บทที่ 8 แนะนำการเขียน CSS เบื้องต้น ตอน ไอดี
#paragraph1 {
font-size: 150%;
}ความแตกต่างของการใช้คลาสหรือไอดีอยู่ที่ข้อกำหนดหรือกฎของ HTML ครับ
ไอดีของแท็กเปรียบเสมือนชื่อเรียกของแท็กนั้นๆครับ หรือถ้าจะให้อธิบายง่ายๆก็จะหมายความถึงชื่อของคนในบ้านของเรา(ซึ่งก็คือเว็บเพจ)นั่นเอง ในบ้านของเราก็จะมีคนอยู่หลายคนและแต่ละคนก็จะมีชื่อไม่ซ้ำกัน ลองนึกดูเอาละกันครับว่าถ้าบ้านเรามีนายเอสองคน เวลาเราเรียกนายเอจะรู้หรือไม่ว่าเราต้องการเรียกคนไหน ดังนั้นในหนึ่งเว็บเพจ(หนึ่งหน้า) เราก็จะมีไอดีนั้นๆกำหนดให้แท็กได้เพียงตัวเดียว
<p id=paragraph1>ย่อหน้านี้มีไอดีชื่อ paragraph1</p>
<p>ย่อหน้านี้เป็นย่อหน้าปกติ</p>ดังนั้นโดยทั่วไปถ้าเรากำหนด CSS โดยใช้ไอดีก็จะหมายความว่ามันจะมีผลกับแท็กเพียงแท็กเดียวเท่านั้น
เราสามารถเลือกใช้ ไอดี หรือ คลาสก็ได้นะครับ รวมถึงสามารถใช้ทั้งสองอย่างร่วมกันก็ได้ ซึ่งโดยปกติแล้วเรามักจะใช้ไอดีกับแท็กที่เราต้องการกำหนดเพียงแท็กเดียวเท่านั้น
<style>
#paragraph1 {
font-size: 150%;
}
.red {
color: red;
}
</style>
<p id=paragraph1>ย่อหน้านี้มีไอดีชื่อ paragraph1</p>
<p>ย่อหน้านี้เป็นย่อหน้าปกติ</p>
<p id=paragraph1 class=red>ย่อหน้านี้มีไอดีชื่อ paragraph1 และมีสีแดง</p>
ผลลัพท์ :
ย่อหน้านี้มีไอดีชื่อ paragraph1
ย่อหน้านี้เป็นย่อหน้าปกติ
ย่อหน้านี้มีไอดีชื่อ paragraph1 และมีสีแดง