Tính đặc hiệu (Specificity) trong CSS
Tính đặc hiệu (Specificity) trong CSS là cơ chế giúp trình duyệt xác định kiểu dáng nào sẽ được áp dụng cho một phần tử khi có xung đột giữa các quy tắc CSS. Trong bài học này, bạn sẽ tìm hiểu về quy tắc ưu tiên giữa các loại CSS (inline, internal, external) và cách xử lý xung đột giữa các selectors.
Tính đặc hiệu (Specificity)
1. Quy tắc ưu tiên giữa các loại CSS
CSS được áp dụng dựa trên mức độ ưu tiên như sau:
- Inline CSS: Kiểu dáng được khai báo trực tiếp trong phần tử HTML (cao nhất).
-
Internal CSS: Kiểu dáng được định nghĩa trong thẻ
<style>của trang HTML. -
External CSS: Kiểu dáng được liên kết qua file
.cssbên ngoài.
Ví dụ minh họa:
<p style="color: red;">Đoạn văn với Inline CSS</p>
<style>
p {
color: blue; /* Internal CSS */
}
</style>
<link rel="stylesheet" href="styles.css"> <!-- External CSS -->
Kết quả: Đoạn văn sẽ hiển thị màu đỏ vì Inline CSS có mức ưu tiên cao nhất.
2. Tính đặc hiệu của selectors
Mỗi selector trong CSS có một điểm số cụ thể dùng để xác định mức ưu tiên.
- Inline style: 1000 điểm.
-
ID selector (
#id): 100 điểm. -
Class selector (
.class), attribute selector, pseudo-classes: 10 điểm. -
Element selector (
div,p,h1) và pseudo-elements: 1 điểm.
Ví dụ tính điểm:
h1 { color: blue; } /* 1 điểm */
#main-title { color: red; } /* 100 điểm */
.highlight { color: green; } /* 10 điểm */
Khi các quy tắc trên đều áp dụng cho một phần tử <h1 id="main-title" class="highlight">, thì màu red sẽ được ưu tiên vì ID selector có điểm cao nhất.
3. Xử lý xung đột giữa selectors
- Khi có xung đột, CSS dựa vào:
- Tính đặc hiệu (Specificity).
- Thứ tự khai báo (Quy tắc viết sau sẽ ghi đè nếu cùng độ đặc hiệu).
Ví dụ minh họa:
/* Khai báo ban đầu */
p {
color: blue;
}
/* Khai báo sau */
p {
color: green;
}
Kết quả: Màu green được áp dụng do được khai báo sau.
Thực hành
1. Yêu cầu
Tạo một file HTML và CSS để minh họa quy tắc đặc hiệu:
- Một tiêu đề
<h1>được định dạng bằng nhiều selectors khác nhau. - Một đoạn văn
<p>với cả Inline, Internal, và External CSS để kiểm tra ưu tiên.
2. Hướng dẫn
File HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tính đặc hiệu trong CSS</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Internal CSS */
h1 {
color: blue;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<h1 id="main-title" class="highlight" style="color: red;">
Tiêu đề minh họa
</h1>
<p style="color: red;">Đoạn văn với Inline CSS</p>
</body>
</html>
File CSS (styles.css):
/* External CSS */
h1 {
font-size: 24px;
text-align: center;
color: black;
}
3. Quan sát kết quả
-
Tiêu đề
<h1>: Màu red từ Inline CSS được ưu tiên. -
Đoạn văn
<p>: Màu red cũng được chọn do Inline CSS.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com