CSS การเรียกใช้งาน class Selector
Selector จะทำให้เราสามารถเลือกได้ว่าต้องการจะจัดการกับองค์ประกอบในหน้า HTML ของเราได้อย่างไร ต้องการกำหนดรูปแบบที่ตรงไหน ในตอนนี้จะเป็นการกำหนด selector ด้วย class
กำหนดโดยใช้ "คลาส" (class Selector)
Code: Select all
.class_name{
text-align: center;
color: blue;
}
- การกำหนดโดยใช้ class ใน CSS จะเริ่มต้นด้วยสัญญลักษณ์ . แล้วตามด้วยชื่อ class ที่เราต้องการ
- สามารถเรียกใช้ class ได้ด้วย elements แล้วตามด้วย class
- การเรียกใช้ class="class_name"
Code: Select all
<!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>
ไม่ว่าจะใช้ elements ตัวไหน เมื่อใส่ class="class_name" ก็จะได้รูปแบบตามที่กำหนดไว้ คือข้อความอยู่ตรงกลาง และตัวหนังสือมีสีฟ้า
** ข้อห้าม : ห้ามขึ้นต้น class ด้วยตัวเลขเด็ดขาด
ผลที่ได้

- 2015-02-11_14-30-55.png (16.44 KiB) Viewed 778 times
หรือจะกำหนด class ให้กับตัว element เผื่อเรียกใช้ก็ได้ โดยตัว element อื่นจะไม่สามารถเรียกใช้ได้
Code: Select all
p.class_name {
text-align: center;
color: blue;
}
ตัวที่สามารถเรียกใช้ class="class_name" ได้คือ <p> เท่านั้น
Code: Select all
<!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>
<p class="class_name"> เท่านั้นที่สามารถเรียกใช้รูปแบบได้
<h1 class="class_name"> จะไม่สามารถเรียกใช้ได้
** ข้อห้าม : ห้ามขึ้นต้น class ด้วยตัวเลขเด็ดขาด
ผลที่ได้

- 2015-02-11_15-08-33.png (14.56 KiB) Viewed 778 times