Posts Tagged ‘property’

CSS Property 5 ตัวที่ถูกลืม

วันนี้ผมจะมานำเสนอเกี่ยวกับ property ของ css ที่หลาย ๆ คนอาจจะงงว่า “css มันมีคำสั่งแบบนี้ด้วยเหรอ ?” property ทั้ง 5 ตัวที่ผมจะมานำเสนอวันนี้ก็คือ clip, min-height, white-space, cursor และ display ซึ่งหลาย ๆ คนมองข้ามเจ้าพวกนี้ไป ทั้ง ๆ ที่มันมีประโยชน์ในการใช้งานอยู่มากโขทีเดียว 1. CSS Property : Clip (คลิกเพื่อดูตัวอย่าง) การใช้งาน clip นั้นจะทำให้เหมือนกับมีหน้ากากมาครอบพื้นที่อยู่ (นึกภาพง่าย ๆ ก็เหมือนกับการใช้คำสั่ง crop ใน photoshop) โดยการที่เราจะสร้างหน้ากากขึ้นมาครอบนั้น เราจะต้องระบุค่าระยะห่างของด้านทั้ง 4 ก่อน(บน ขวา ล่าง ซ้าย) ตัวอย่างแรก ในตัวอย่างนี้เราจะสร้างหน้ากากให้กับรูปภาพโดยใช้คำสั่ง clip อันดับแรกเราต้องกำหนด position: relative ใน [...]

More »

การเขียน CSS แบบย่อ

ในการเขียน CSS นั้น หลาย ๆ คนอาจจะไม่ทราบว่าสามารถย่อให้สั้นลงได้ (จริงเหรอเนี่ย !!!) โดยการใส่ค่า(value) ให้กับคุณสมบัติ(property) พร้อมกันหลาย ๆ ค่า วิธีการเช่นนี้เราเรียกว่า Shorthand นั่นเอง property แต่ละตัวเวลาเขียนแบบย่อแล้วจะเป็นอย่างไร ไปดู Font (ตัวอักษร) การใช้งานปกติ : font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif เขียนแบบย่อ : font: 1em/1.5em bold italic serif Background (พื้นหลัง) การใช้งานปกติ : background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; background-attachment: fixed [...]

More »