Selector จะทำให้เราสามารถเลือกได้ว่าต้องการจะจัดการกับองค์ประกอบในหน้า HTML ของเราได้อย่างไร ต้องการกำหนดรูปแบบที่ตรงไหน ในตอนนี้จะเป็นการกำหนด selector ด้วย class
กำหนดโดยใช้ "คลาส" (class Selector)
โค้ด: เลือกทั้งหมด
.class_name{
text-align: center;
color: blue;
} - สามารถเรียกใช้ class ได้ด้วย elements แล้วตามด้วย class
- การเรียกใช้ class="class_name"
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
.class_name{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="class_name">MindPHP with Tag h1 </h1>
<p class="class_name">MindPHP with Tag p</p>
</body>
</html>** ข้อห้าม : ห้ามขึ้นต้น class ด้วยตัวเลขเด็ดขาด
ผลที่ได้
- 2015-02-11_14-30-55.png (16.44 KiB) Viewed 1658 times
โค้ด: เลือกทั้งหมด
p.class_name {
text-align: center;
color: blue;
} โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
p.class_name {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="class_name">MindPHP</h1>
<p class="class_name">www.mindphp.com</p>
</body>
</html>
<h1 class="class_name"> จะไม่สามารถเรียกใช้ได้
** ข้อห้าม : ห้ามขึ้นต้น class ด้วยตัวเลขเด็ดขาด
ผลที่ได้
- 2015-02-11_15-08-33.png (14.56 KiB) Viewed 1658 times
