Độ Ưu Tiên Trong CSS – Các giải pháp Chuyển đổi số

Độ ưu tiên trong CSS quyết định quy tắc nào sẽ được áp dụng khi có nhiều quy tắc cùng định dạng một thuộc tính cho cùng một phần tử. Độ ưu tiên được xác định dựa trên các yếu tố sau:

Nguồn gốc của quy tắc
- Inline styles: Quy tắc được viết trực tiếp trong thẻ HTML bằng thuộc tính style. Đây là quy tắc có độ ưu tiên cao nhất.
- Internal stylesheets: Quy tắc được viết trong thẻ <style> trong tài liệu HTML.
- External stylesheets: Quy tắc được viết trong các tệp CSS riêng biệt và được liên kết với tài liệu HTML bằng thẻ <link>.
- User agent styles: Quy tắc mặc định của trình duyệt. Đây là quy tắc có độ ưu tiên thấp nhất.
Độ cụ thể (Specificity) Độ cụ thể được xác định bằng cách đếm các loại bộ chọn trong một quy tắc CSS. Công thức tính độ cụ thể như sau:
- Inline styles: 1000 điểm
- ID selectors (#): 100 điểm
- Class, attribute, pseudo-classes selectors (.class, [attribute], :hover, …): 10 điểm
- Type selectors (element), pseudo-elements selectors (::before, ::after, …): 1 điểm
Tính thứ tự (Source Order) Khi hai quy tắc có cùng độ cụ thể, quy tắc nào được khai báo sau cùng trong mã sẽ được áp dụng.
Từ khóa !important Khi sử dụng từ khóa !important, quy tắc đó sẽ có độ ưu tiên cao hơn tất cả các quy tắc khác ngoại trừ các quy tắc !important khác. Khi có nhiều quy tắc !important cùng áp dụng cho một thuộc tính, quy tắc có độ cụ thể cao hơn sẽ được ưu tiên.

Ví dụ về độ ưu tiên:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    p { color: blue; }
    .special { color: green; }
    #unique { color: red; }
    p { color: orange !important; }
  </style>
</head>
<body>
  <p id="unique" class="special" style="color: yellow;">Đoạn văn bản</p>
</body>
</html>

style="color: yellow;" (Inline style): độ ưu tiên cao nhất, nên đoạn văn bản có màu vàng.
Nếu bỏ dòng style="color: yellow;", thì p { color: orange !important; } sẽ được áp dụng vì có !important.

Kết Luận

Hiểu và áp dụng đúng cấu trúc HTML và độ ưu tiên trong CSS giúp bạn kiểm soát và gỡ rối các vấn đề về định dạng một cách hiệu quả. Việc nắm vững các nguyên tắc này sẽ giúp bạn tạo ra các trang web hoạt động chính xác theo mong muốn và tối ưu hóa trải nghiệm người dùng.

Tóm tắt độ ưu tiên trong css:

Sử dụng style nội bộ có độ ưu tiên cao nhất (ví dụ: <a style=”color:red;”>Nội dung</a>)

style nội bộ có trong tag head có độ ưu tiên tiếp theo

các file css có trong mã nguồi có độ ưu tiên cuối cùng

Độ ưu tiên trong các thuộc tính css: id đến class đến name

sử dụng từ khoá: !important trong file css có độ ưu tiên chỉ sao style nội bộ

Kết Luận

Để lại một bình luận Huỷ trả lời