วันจันทร์ที่ 1 กันยายน พ.ศ. 2551

CSS Selectors

กลับมาที่ CSS กันอีกครั้งนะครับ หลังจากนอกเรื่องไป ^^"(ขอโทษที)

วันนี้เรามาเรียนเกี่ยวกับ Selectors ของ CSS กันนะครับ ลืม CSS Syntax กันไปรึยังเอ่ย
ถ้าลืมไปแล้วก็ดังข้างล่างนี่เลยนะครับ

SELECTOR { PROPERTY:VALUE; }

หน้าตาเป็นแบบนี้นะครับ CSS Syntax

ในวันนี้เราจะได้เห็นความสามารถของ CSS Selectors กันมากขึ้น
ซึ่งผมได้นำ Syntax การใช้งาน CSS Selectors มาให้ดูกันในวันนี้นะครับ

*{ } - เป็นการกำหนด Element ของทุก tag HTML ให้ตั้งค่าตาม CSS
p { } - เป็นการกำหนด Element ให้กับ tag p ของ HTML
*.c { } - เป็นการกำหนด Element ให้กับทุก tag ที่ใช้ Class ชื่อ c
p.c { } - เป็นการกำหนด Element ให้กับ tag p ของ HTML ที่ใช้ class ชื่อ c
#main { } - เป็นการกำหนด Element ให้กับ tag HTML ที่ใช้ ID ชื่อ main
a:link { } - เป็นการกำหนด Element ให้กับทุก Link ที่ยังไม่ได้เข้า
a:visited { } - เป็นการกำหนด Element ให้กับทุก Link ที่เข้าแล้ว
a:active { } - เป็นการกำหนด Element ให้กับทุก Link ที่เข้าอยู่ปัจจุบัน
a:hover { } - เป็นการกำหนด Element ให้กับทุก Link ที่ถูกชี้ด้วย Cursor
a:focus { } - เป็นการกำหนด Element ให้กับทุก Link ที่ถูก focus อยู่
p:first-letter { } - เป็นการกำหนด Elementให้กับตัวอักษรตัวแรกที่อยู่ใน tag p
p:first-line { } - เป็นการกำหนด Elementให้กับแถวแรกที่อยู่ใน tag p
#n  *.c  :first-line { } - เป็นตัวอย่างการสืบทอดของ CSS
#n > *.c : first-line { } - เป็นตัวอย่างการกำหนดลูกของ CSS
#n + *.c : first-line { } - เป็นตัวอย่างการกำหนดพี่น้องของ CSS
#n , *.c , :first-line { } - เป็นการใช้ CSS ร่วมกันบน tag HTML เดียวกัน
*[title] { } - เป็นการกำหนด Element ให้กับ Attribute title ของ HTML
*[title~="WORD"] { } - เป็นการกำหนด Element ให้กับ Attribute title ของ HTML ที่มีคำว่า "WORD"

วันนี้ก็ขอจบเพียงเท่านี้นะครับ ถ้ายังไงอยากให้ผู้ที่ได้อ่านลองทำดูนะครับ เพราะว่าถ้าไม่ลองทำคงไม่เข้าใจ
ผมเองก็ต้องขอตัวไปทดลองทำบ้างแล้วล่ะครับ อ่านอย่างเดียวคงไม่เข้าใจ ลาก่อนครับ ^^"

Reference : Pro CSS and HTML Design Patterns ,Michael Bowers.

ไม่มีความคิดเห็น: