Class และ ID

wave
มานพ กองอุ่น 10 เม.ย. 2016 15:50:19 9,888

    การใช้งานแบบ 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>


ผลลัพธ์


 
 


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 9,888
  • รักเลย 0
  • หมวดหมู่ CSS
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags css css3
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009