CSS: Tanganjiklẹn kpacɛ

• Trong CSS, bộ chọn (selector) được sử dụng để chọn các phần tử HTML mà bạn muốn tạo kiểu.
• Khi có nhiều quy tắc CSS áp dụng cho cùng một phần tử, trình duyệt sẽ sử dụng một cơ chế để xác định quy tắc nào sẽ được ưu tiên áp dụng.
• Cơ chế này được gọi là độ ưu tiên (specificity).

Độ Ưu Tiên (Specificity)

• Độ ưu tiên là một hệ thống đánh giá để xác định quy tắc CSS nào sẽ được áp dụng cho một phần tử HTML khi có nhiều quy tắc xung đột.
• Độ ưu tiên được tính dựa trên các loại bộ chọn khác nhau được sử dụng trong quy tắc CSS.
• Các quy tắc có độ ưu tiên cao hơn sẽ ghi đè các quy tắc có độ ưu tiên thấp hơn.

Các Loại Bộ Chọn và Độ Ưu Tiên

• Dưới đây là danh sách các loại bộ chọn CSS theo thứ tự độ ưu tiên từ thấp đến cao:
  • Bộ chọn phần tử (ví dụ: p, h1, div)
  • Bộ chọn lớp (ví dụ: .ten-lop)
  • Bộ chọn ID (ví dụ: #id-cua-phan-tu)
  • Thuộc tính style inline (ví dụ: <p style="color: red;">)
  • !important (được sử dụng để ghi đè tất cả các quy tắc khác)

Cách Tính Độ Ưu Tiên

• Độ ưu tiên được tính dựa trên số lượng và loại bộ chọn có trong một quy tắc CSS.
• Có thể hình dung độ ưu tiên như một bộ ba số (A, B, C), trong đó:
  • A: Số lượng bộ chọn ID trong quy tắc.
  • B: Số lượng bộ chọn lớp, bộ chọn thuộc tính và bộ chọn giả lớp (pseudo-class) trong quy tắc.
  • C: Số lượng bộ chọn phần tử và bộ chọn giả phần tử (pseudo-element) trong quy tắc.
• Quy tắc nào có giá trị (A, B, C) lớn hơn sẽ có độ ưu tiên cao hơn.
• Ví dụ:
  • p { color: blue; } -> (0, 0, 1)
  • .ten-lop { color: green; } -> (0, 1, 0)
  • #id-cua-phan-tu { color: red; } -> (1, 0, 0)
  • #id-cua-phan-tu .ten-lop p { color: orange; } -> (1, 1, 1)

Giải Thích Chi Tiết về Độ Ưu Tiên

• Bộ chọn phần tử:
  • Có độ ưu tiên thấp nhất.
  • Ví dụ: p, div, span, h1, h2, ...
• Bộ chọn lớp:
  • Có độ ưu tiên cao hơn bộ chọn phần tử.
  • Được sử dụng để chọn các phần tử có một lớp cụ thể.
  • Ví dụ: .ten-lop, .mau-do, .font-lon
• Bộ chọn ID:
  • Có độ ưu tiên cao hơn bộ chọn lớp.
  • Được sử dụng để chọn một phần tử duy nhất có ID cụ thể.
  • ID của mỗi phần tử phải là duy nhất trên toàn bộ trang web.
  • Ví dụ: #id-cua-phan-tu, #tieu-de, #noi-dung
• Thuộc tính style inline:
  • Có độ ưu tiên cao hơn bộ chọn ID.
  • Được khai báo trực tiếp trong phần tử HTML bằng thuộc tính style.
  • Ví dụ: <p style="color: red;">Đây là đoạn văn bản.</p>
• !important:
  • Có độ ưu tiên cao nhất.
  • Được sử dụng để ghi đè tất cả các quy tắc khác, bất kể độ ưu tiên của chúng.
  • Nên hạn chế sử dụng !important vì nó có thể làm cho mã CSS khó bảo trì và gỡ lỗi.
  • Ví dụ: p { color: blue !important; }

Các Trường Hợp Đặc Biệt

• Bộ chọn đa dạng:
  • Khi một quy tắc CSS chứa nhiều loại bộ chọn khác nhau, độ ưu tiên được tính dựa trên tổng giá trị của tất cả các bộ chọn.
  • Ví dụ: #id-cua-phan-tu .ten-lop p { color: orange; } có độ ưu tiên cao hơn .ten-lop p { color: green; } vì nó có một bộ chọn ID.
• Tính kế thừa:
  • Một số thuộc tính CSS được kế thừa từ phần tử cha sang phần tử con.
  • Nếu một thuộc tính được kế thừa và không được ghi đè bởi bất kỳ quy tắc nào khác, nó sẽ được áp dụng cho phần tử con.
  • Độ ưu tiên của các thuộc tính kế thừa là rất thấp, do đó chúng dễ bị ghi đè bởi các quy tắc khác.
• Tính đặc trưng:
  • Nếu hai quy tắc CSS có cùng độ ưu tiên, quy tắc nào được khai báo sau cùng trong mã CSS sẽ được áp dụng.
  • Điều này được gọi là tính đặc trưng (source order).

Lưu Ý Khi Sử Dụng Độ Ưu Tiên

• Cố gắng viết mã CSS đơn giản và dễ hiểu.
• Hạn chế sử dụng bộ chọn ID và !important để tránh làm cho mã CSS khó bảo trì.
• Sử dụng bộ chọn lớp một cách nhất quán để tạo kiểu cho các phần tử.
• Hiểu rõ về độ ưu tiên để có thể giải quyết các xung đột CSS một cách hiệu quả.
• Sử dụng các công cụ gỡ lỗi của trình duyệt để kiểm tra độ ưu tiên của các quy tắc CSS.

Ví Dụ Minh Họa

• Ví dụ 1:

  <p id="paragraph" class="text">
      Đây là một đoạn văn bản.
  </p>
  

  p { color: blue; } /* (0, 0, 1) */
  .text { color: green; } /* (0, 1, 0) */
  #paragraph { color: red; } /* (1, 0, 0) */
  

  • Trong ví dụ này, đoạn văn bản sẽ có màu đỏ vì bộ chọn ID có độ ưu tiên cao nhất.
• Ví dụ 2:

  <button class="button primary">Click me</button>
  

  .button {
      background-color: gray;
      color: white;
  }
  .primary {
      background-color: blue;
  }
  

  • Trong ví dụ này, nút sẽ có màu nền xanh lam vì lớp primary được khai báo sau lớp button trong mã HTML và có độ ưu tiên tương đương.
• Ví dụ 3:

  <div style="color: purple;">
      <p>Đoạn văn bản này có màu gì?</p>
  </div>
  

  p { color: blue; }
  div { color: green; }
  

  • Đoạn văn bản sẽ có màu tím vì thuộc tính color được khai báo inline trong phần tử div có độ ưu tiên cao hơn và được kế thừa xuống phần tử p.

Tổng Kết

• Hiểu rõ về độ ưu tiên của bộ chọn CSS là rất quan trọng để viết mã CSS hiệu quả và dễ bảo trì.
• Bằng cách nắm vững các loại bộ chọn và cách tính độ ưu tiên, bạn có thể giải quyết các xung đột CSS một cách dễ dàng và tạo ra các trang web có giao diện nhất quán và chuyên nghiệp.
• Hãy luôn nhớ rằng việc sử dụng mã CSS đơn giản và dễ hiểu sẽ giúp bạn tiết kiệm thời gian và công sức trong quá trình phát triển web.