การใช้งานแบบ Inline และ การใส่ CSS ที่ <head> นั้นทำให้รูปแบบของ html tag ถูกกำหนดค่าใหม่ ในการเรียกใช้ทุกๆ ครั้งก็จะเป็นค่าใหม่ เช่น เมื่อเราเรียก Tag <b> ก็จะพบว่าเมื่อเรียก Tag <b> ทุกๆ ครั้งก็จะเป็นการเรียกใช้ CSS ที่ถูกกำหนดขึ้นทุกครั้ง ซึ่งหากเราต้องการให้ Tag <b> ตัวแรกมีสีเปลี่ยนไปจากตัวอื่นๆ จะทำไม่ได้ ดังนั้นเราจึงต้องมีการเรียกแบบใหม่โดยใช้ class และ id เพื่อกำหนดรูปแบบให้ตรงตามความต้องการมากขึ้น
Class
.className {
attribute1 : value1;
attribute2 : value2;
…
attribute n : value n;
}
className คือ ชื่อของ Class ที่เรากำหนดขึ้น
attribute1, attribute2, …, attribute n คือ ชื่อรูปแบบ
value1, value2, …, value n คือ ค่าที่กำหนดให้รูปแบบ
ตัวอย่าง ex32.html
<html>
<head>
<title>CSS</title>
<style type= “text/css”>
.mystyle{
color:red;
}
</style>
</head>
<body>
<b>Line1</b>
<b class= “mystyle”>Line2</b>
<b>Line3</b>
</body>
</html>
ผลลัพธ์
ID
#IdName {
attribute1 : value1;
attribute2 : value2;
…
attribute n : value n;
}
IdName คือ ชื่อของ id ของ html Tag
attribute1, attribute2, …, attribute n คือ ชื่อรูปแบบ
value1, value2, …, value n คือ ค่าที่กำหนดให้รูปแบบ
ตัวอย่าง ex33.html
<html>
<head>
<title>CSS</title>
<style type= “text/css”>
#mystyle{
color:red;
}
</style>
</head>
<body>
<b>Line1</b>
<b id= “mystyle”>Line2</b>
<b>Line3</b>
</body>
</html>
ผลลัพธ์
ความคิดเห็น