บทที่ 9 แนะนำการเขียน CSS เบื้องต้น ตอน ชื่อแท็ก

โดยปกติแล้วแท็กต่างๆจะมีการกำหนดรูปแบบเริ่มต้นที่กำหนดมาโดยบราวเซอร์อยู่แล้วครับ เช่น
  • <b> รูปแบบเริ่มต้นคือแสดงตัวอักษรเป็นตัวหนา หรือ เทียบกับ CSS ได้เป็น font-weight: bold;
  • <i> รูปแบบเริ่มต้นคือแสดงตัวอักษรเป็นตัวเอียง หรือ เทียบกับ CSS ได้เป็น font-style: italic;
ซึ่งบราวเซอร์ก็จะใช้ค่า CSS มาตรฐานของบราวเซอร์เองทำหน้าที่ในการกำหนดรูปแบบการแสดงผลให้กับแท็กต่างๆตามค่าเริ่มต้น ทำให้เราสามารถใช้คุณสมบัตินี้ในการเขียน CSS เพื่อกำหนดคุณสมบัติการแสดงผลของแท็กต่างๆใหม่ให้แตกต่างจากค่าเริ่มต้นได้ เช่น
b {
   font-style:italic; // ทำตัวอักษรให้เป็นตัวเอียง
   font-weight: normal; // ยกเลิกตัวอักษรหนาเป็นตัวอักษรปกติ
}
i {
   font-weight: bold; // ทำตัวอักษรให้เป็นตัวอักษรหนา
   font-style: normal; // ยกเลิกตัวอักษรเอียงเป็นตัวอักษรปกติ
}

คำสั่งด้านบนจะทำให้ <b>แสดงผลเป็นตัวเอียง และ <i> แสดงผลเป็นตัวหนาแทน ซึ่งจะมีผลกับ <b> และ <i> ทุกตัวในหน้าเว็บเพจ
โค้ดด้านบนเป็นการใช้ชื่อแท็กเพื่อกำหนด CSS ซึ่งเป็นอีกวิธีหนึ่งในการกำหนดค่านอกจากการใช้คลาสและไอดี ตามที่ผมได้เคยกล่าวถึงในบทก่อนๆไปแล้ว
และเช่นกัน เราสามารถใช้ชื่อแท็ก ร่วมกับ ไอดี และ คลาส ในการกำหนดค่า CSS ได้
<style>
b {
   font-style: italic;
   font-weight: normal;
}
i {
   font-weight: bold;
   font-style: normal;
}
.red {
   color: #F00;
}
</style>

<b>ข้อความภายใต้แท็ก b</b>
<i>ข้อความภายใต้แท็ก i</i>
<b class=red>ข้อความภายใต้แท็ก b คลาส red</b>
<i class=red>ข้อความภายใต้แท็ก i คลาส red</i>
ผลลัพท์ :

ข้อความภายใต้แท็ก b

ข้อความภายใต้แท็ก i

ข้อความภายใต้แท็ก b คลาส red

ข้อความภายใต้แท็ก i คลาส red

^