การซ้ำของ CSS
การเขียน CSS ในหลายครั้งเมื่อเราได้เขียนมาได้ระยะหนึ่ง เราอาจเผลอเขียนคุณสมบัติ Property ของ CSS ซ้ำซ้อนใน CSS ชุดเดียวกัน
ซึ่งการทำงานของ CSS นั้น จะเลือกใช้ Property ตัวที่ประกาศล่าสุดมาใช้งาน เช่น
h3 {
color: #ff000;
text-align: left;
font-size: 1.5em;
}
h3 {
text-align: right;
font-size: 1.25em;
}
จาก Property ทั้ง 2 ชุดข้างต้น เบราว์เซอร์ที่เราใช้จะยุบรวมเป็น
h3 {
color: #ff0000;
text-align: right;
font-size: 1.25em;
}
ลำดับความสำคัญของ CSS
หากมีการเขียน CSS อยู่ในหลายส่วน การเลือกใช้โค้ด CSS จะเรียงลำดับความสำคัญด้งนี้
- ตัวเลือกพื้นฐานของเบราว์เซอร์
- External style sheet ไฟล์ CSS จากภายนอก
- Internal style sheet (ที่อยู่ในส่วน head ของ HTML)
- Inline style (CSS ที่แทรกอยู่ในโค้ด HTML)
โดยเรียงดังนี้ 1 => 2 => 3 => 4 โดย CSS ที่อยู่ใกล้กับเนื้อหา HTML มากที่สุด จะมีความสำคัญมากที่สุด
การเกาะเกี่ยวของ Selector, ID และ Class
ในกรณีที่มี Selector, ID หรือ Class ที่ซ้ำกัน เราจะต้องใช้ลำดับการเกาะเกี่ยวของ Selector ในการระบุคุณสมบัติ ตัวอย่าง เราต้องการสร้างความแตกต่างให้กับ P ทั้งสองกล่อง
<div class="first-box">
<p>message in first box</p>
</div>
<div class="second-box">
<p>message in second box</p>
</div>
เราสามารถกำหนดค่า Property ของ CSS ของ P ในกล่องแรก และ กล่องที่สอง ให้แตกต่างกันได้ดังนี้
.first-box p { font-size: 1em; }
และ
.second-box p { font-size: 1.5em; text-align: right; }
ความเจาะจงของ Selector
ตัวอย่างโค้ด HTML
<div id="main-content">
<div class="content">
<p>message in main content</p>
</div>
</div>
และไฟล์ CSS ประกอบด้วย
#main-content { font-size: 1em; }
p { font-size: 1.25em; }
จากตัวอย่างข้างต้น CSS ระหว่าง #main-content และ p เบราว์เซอร์จะเรียก Property ของ p มาแสดงผล เพราะอยู่ใกล้กับเนื้อหา HTML มากที่สุด โดยละเว้น Property ของ #main-content
การจับกลุ่มของ Selector, ID และ Class
ในหลายครั้งที่ Selector หลายตัว มีค่า Property เหมือนกัน เราสามารถเขียนคำสั่ง CSS แบบรวมกลุ่มได้ โดยใช้เครื่องหมายคอมม่า , คั่นระหว่าง Selector เช่น
h1, h2, h3, .center {
text-align: center;
}
