11.1 Cascading
Các nguyên tắc cơ bản của CSS bao gồm cascading, inheriting và specificity. Hiểu rõ các nguyên tắc này giúp kiểm soát tốt hơn kiểu dáng và giao diện của các trang web.
Cascading
Cascading là nguyên tắc cơ bản của CSS, xác định cách áp dụng các kiểu khi có nhiều quy tắc xung đột. Khi cascading, trình duyệt sử dụng các quy tắc sau để giải quyết xung đột:
-
Thứ tự nguồn: các kiểu có thể được định nghĩa ở nhiều nơi - các file CSS bên ngoài, các kiểu nội bộ (bên trong thẻ
<style>) và các kiểu inline (trong thuộc tínhstylecủa HTML element). Các quy tắc được áp dụng theo thứ tự xuất hiện của chúng. - Specificity: mỗi selector có mức độ specificity riêng. Specificity càng cao, ưu tiên càng cao.
-
Importance: các quy tắc với chỉ thị
!importantcó độ ưu tiên cao nhất và được áp dụng ngay cả khi có các quy tắc xung đột khác.
Ví dụ về cascading:
Trong ví dụ này, màu nền sẽ là màu vàng vì kiểu inline có ưu tiên hơn so với kiểu nội bộ. Màu văn bản sẽ là màu đỏ vì kiểu inline có ưu tiên hơn kiểu nội bộ.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ về cascading CSS</title>
<style>
body {
background-color: lightblue; /* Kiểu nội bộ */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- Kiểu inline -->
<p style="color: red;">Ví dụ về cascading CSS</p>
</body>
</html>
11.2 Inheritance
Inheritance là quá trình mà các phần tử con kế thừa kiểu của các phần tử cha. Không phải tất cả các thuộc tính CSS đều được kế thừa. Các thuộc tính được kế thừa bao gồm màu văn bản, họ phông chữ, khoảng cách dòng và một số thuộc tính khác.
Ví dụ về inheritance:
Trong ví dụ này, phần tử <p> thừa kế phông chữ và màu từ phần tử <body>, và kích thước phông từ lớp .container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ về inheritance CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>Văn bản này thừa kế phông chữ và màu sắc từ body, và kích thước phông chữ từ ".container".</p>
</div>
</body>
</html>
11.3 Specificity
Specificity xác định quy tắc CSS nào sẽ được áp dụng cho phần tử khi có nhiều quy tắc tương ứng với cùng một phần tử. Specificity được tính toán dựa trên số lượng và loại selector trong quy tắc.
Quy tắc tính toán specificity:
- Các kiểu inline có specificity cao nhất
- Selectors by ID có specificity cao hơn so với các lớp, pseudo-classes và thuộc tính
- Các lớp, pseudo-classes và thuộc tính có specificity cao hơn các phần tử và pseudo-elements
- Các phần tử và pseudo-elements có specificity thấp nhất
Ví dụ về tính toán specificity:
Trong ví dụ này, văn bản sẽ có màu đỏ vì selector #unique có specificity cao nhất.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ về specificity CSS</title>
<style>
p {
color: blue; /* Specificity 0-0-0-1 */
}
.highlight {
color: green; /* Specificity 0-0-1-0 */
}
#unique {
color: red; /* Specificity 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">Văn bản này sẽ có màu đỏ.</p>
</body>
</html>
11.4 Importance
CSS cho phép các nhà phát triển chỉ định rõ ràng mức ưu tiên của các kiểu với chỉ thị !important. Các quy tắc với chỉ thị này sẽ được áp dụng bất kể specificity của các quy tắc khác.
Ví dụ sử dụng !important:
Trong ví dụ này, văn bản sẽ có màu xanh dương vì quy tắc với !important có độ ưu tiên cao nhất.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ !important trong CSS</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">Văn bản này sẽ có màu xanh do "!important".</p>
</body>
</html>
11.5 Ví dụ sử dụng các nguyên tắc của CSS
Ví dụ sử dụng các nguyên tắc của CSS trong các bài toán thực tế.
Ví dụ về cascading và specificity:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ cascading và specificity CSS</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">Văn bản này sẽ có màu đỏ vì .important có specificity cao hơn "p".</p>
</body>
</html>
Ví dụ về inheritance và specificity:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ inheritance và specificity CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* Ghi đè màu từ body cho tất cả các phần tử con */
}
.highlight {
color: red; /* Có specificity cao hơn .container */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">Văn bản này sẽ có màu đỏ do specificity của lớp ".highlight".</p>
</div>
</body>
</html>
GO TO FULL VERSION