พื้นฐานการเขียน CSS เบื้องต้น การซ้ำ ลำดับความสำคัญ

การซ้ำของ 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 จะเรียงลำดับความสำคัญด้งนี้

1. ตัวเลือกพื้นฐานของเบราว์เซอร์
2. External style sheet ไฟล์ CSS จากภายนอก
3. Internal style sheet (ที่อยู่ในส่วน head ของ HTML)
4. 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;
}