Kế thừa và Biến CSS

Bài học này giới thiệu về hai khái niệm quan trọng trong CSS: Kế thừa (Inheritance) và Cascade (Xếp chồng), cùng với việc sử dụng Biến CSS (CSS Variables) để tạo mã CSS linh hoạt, dễ quản lý và tái sử dụng.

• Kế thừa (Inheritance): Hiểu cách các thuộc tính được kế thừa từ phần tử cha sang phần tử con, quy tắc nào áp dụng và cách kiểm soát quá trình này bằng thuộc tính inherit, initial, và unset.
• Cascade (Xếp chồng): Tìm hiểu cách CSS xác định ưu tiên giữa các quy tắc dựa trên nguồn gốc, mức độ ưu tiên (specificity), và thứ tự xuất hiện.
• Biến CSS (CSS Variables): Làm quen với cách định nghĩa và sử dụng các biến CSS để làm cho mã CSS dễ đọc, dễ bảo trì và có khả năng tái sử dụng cao.

1. Kế thừa trong CSS

• Khái niệm:

  • Kế thừa là khả năng cho các phần tử con nhận giá trị từ các phần tử cha.
  • Chỉ áp dụng với một số thuộc tính như: color, font, visibility.

• Thuộc tính kế thừa và không kế thừa:

• Giá trị inherit:
  • Có thể buộc phần tử con kế thừa thuộc tính dù không mặc định kế thừa.

.parent {
  color: blue;
}
.child {
  color: inherit;
}

2. Cascade trong CSS

• Quy tắc Cascade:

  • Khi nhiều quy tắc CSS được áp dụng cho cùng một phần tử, quy tắc Cascade xác định quy tắc nào sẽ có hiệu lực.

• Thứ tự ưu tiên:

  1. Inline styles (style="...").
  2. Internal styles (trong thẻ <style>).
  3. External styles (từ file CSS).

• Mức độ cụ thể (Specificity):

3. Biến CSS (CSS Variables)

• Khái niệm:

  • Biến CSS là cách lưu trữ giá trị để tái sử dụng nhiều lần.
  • Khai báo bằng cách sử dụng --variable-name.

• Sử dụng biến:

:root {
  --main-color: blue;
  --padding-size: 10px;
}

.box {
  color: var(--main-color);
  padding: var(--padding-size);
}

• Ưu điểm:
  • Dễ dàng thay đổi giao diện.
  • Giảm thiểu lỗi lặp lại trong CSS.

Thực hành

Bài tập 1: Sử dụng inherit trong kế thừa

Tạo danh sách có màu văn bản kế thừa từ cha.

<div class="parent" style="color: green;">
  Parent Text
  <div class="child">Child Text</div>
</div>

Bài tập 2: Sử dụng CSS Variables

Tạo giao diện thay đổi theo màu theme.

:root {
  --bg-color: white;
  --text-color: black;
}

.dark-theme {
  --bg-color: black;
  --text-color: white;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Kết luận

• Hiểu rõ về kế thừa và cascade giúp quản lý quy tắc CSS tốt hơn.
• Biến CSS là công cụ quan trọng cho giao diện linh hoạt và dễ bảo trì.