ก่อนอื่นต้องขอบอกว่า ใครยังไม่เข้าใจ ก็อ่านผ่านๆไปจนถึงบทที่ 2 ก่อน แล้วจะร้อง อ๋อ... เอง(มั้ง)
เพราะบทนี้จะยังไม่ยกตัวอย่างที่ใช้งานได้จริงๆ
1.2 SelectorMulti-Selector เราสามารถ ใช้ selector ได้หลายๆตัว ต่อ 1 คำสั่ง เช่น
b, strong {
color: green
}
ในที่นี้ทั้งแท็ก "b" และ "strong" ก็ถูกจับจอง ให้แลมองเป็นสีเขียว
Class Selector สมมุติว่าเรากำหนดแท็ก font ดังนี้
<font>ถ้า อจวว ไม่หล่อ ก็ยังรักจริง</font>
<b>ถ้า อจวว ไม่หล่อ ก็ขอแฟนสวยๆ</b>
<font class="s1">แต่ที่จริงแล้ว อจวว ก็ดูไปแล้วเหมือนจะหล่อนิดๆ</font>
<b class="s1">(ไอ้คนติวเตอร์จิตใจมันฟุ้งซ่านป่าววะ)</b>
ในที่นี้ 2 บรรทัดด้านบน จะไม่ถูกกำหนด class แต่ 2 บรรทัดล่าง ได้ถูกกำหนด class เอาไว้ แถมใช้ชื่อเดียวกันอีกตะหากคือ "s1" ดังนั้นเราจะกำหนดสไตล์ให้กับ class ที่ ชื่อ "s1" ดังนี้
ผลของมันคือ เป็นการกำหนดให้ 2 บรรทัดล่าง จากโค้ดข้างบน ให้มันเป็นสีเขียว นั่นเอง ไม่ว่าจะแท็ก "font" หรือ "b" ก็ตาม
แต่ถ้าเราจะเพิ่มเติมว่า ในเท็ก "b" ให้มีขนาดฟอนต์สัก 20 pt แต่แท็กอื่นไม่ต้องไปกำหนดอะไรมัน เราก็ใช้แบบนี้
.s1 {
color: green
}
b.s1 {
font-size: 20pt
}
ID Selector วิธีการ เหมือน Class Selector แต่จะแตกต่างตรงที่ "class" เป็น "id" และ "." เป็น "#"
<font>ถ้า อจวว ไม่หล่อ ก็ยังรักจริง</font>
<b>ถ้า อจวว ไม่หล่อ ก็ขอแฟนสวยๆ</b>
<font id="s1">แต่ที่จริงแล้ว อจวว ก็ดูไปแล้วเหมือนจะหล่อนิดๆ</font>
<b id="s1">(ไอ้คนติวเตอร์จิตใจมันฟุ้งซ่านป่าววะ)</b>
เราจะกำหนดสไตล์ให้กับ id ที่ ชื่อ "s1" ดังนี้
ถ้าเราจะเพิ่มเติมว่า ในเท็ก "b" ให้มีขนาดฟอนต์สัก 20 pt แต่แท็กอื่นไม่ต้องไปกำหนดอะไรมัน เราก็ใช้แบบนี้
#s1 {
color: green
}
b#s1 {
font-size: 20pt
}
หมายเหตุ :
1. จริงๆแล้วตามหลัก ไม่ควรใช้ id ซ้ำกัน เพราะเวลาอ้าง id ด้วย Javascript จะเกิดปัญหา ดังนั้น ควรใช้ class จะดีกว่า
2. เค้าว่ากันว่า (เปิดตำรามา) ไม่ควรใช้ชื่อ id หรือ class ให้มีตัวเลขนำหน้าเช่น 3000annnn แต่ annnn3000 นี่ใช้ได้ เพราะตัวเลขนำหน้า เค้าว่ากันว่าถ้าเปิดใน Fixefox แล้วจะ error (แต่ไม่เคยลองทำดูนะ)