1. Tính kế thừa của thuộc tính CSS
Một số thuộc tính CSS có thể được kế thừa. Nếu một thuộc tính CSS có thể kế thừa, thì khi đặt thuộc tính đó trên một phần tử, các phần tử con của nó cũng sẽ kế thừa thuộc tính đó. Nếu các phần tử con cũng cài đặt thuộc tính này, giá trị của phần tử con sẽ được ưu tiên.
Các thuộc tính liên quan đến văn bản và phông chữ thường là thuộc tính có thể kế thừa, như font-size, font-family, font-weight, line-height, color, text-align.
Ví dụ về các thuộc tính có thể kế thừa:
Để kiểm tra xem một thuộc tính có thể kế thừa hay không, bạn có thể tham khảo tài liệu MDN. Dưới đây là một ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tài liệu</title>
<style>
div.box {
color: red;
}
</style>
</head>
<body>
<div class="box">
<h1>Tôi là h1</h1>
<p>
Tôi là p
<span>Phần tử con span của p</span>
<strong>Phần tử con strong của p</strong>
</p>
<span>Tôi là span</span>
</div>
</body>
</html>
Khi mở trang web này, bạn sẽ thấy thuộc tính color đã được kế thừa.
Lưu ý rằng giá trị được kế thừa là giá trị đã tính toán, không phải giá trị cài đặt ban đầu.
Khi gặp các giá trị liên quan đến tỷ lệ, phần tử con kế thừa giá trị đã tính toán, không phải tỷ lệ.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tài liệu</title>
<style>
.box {
color: red;
font-size: 2em; /* Tỷ lệ so với phông chữ của phần tử cha, mặc định là 16px */
}
</style>
</head>
<body>
<div class="box">
Tôi là phần box
<!-- Phần tử p sẽ kế thừa giá trị font-size đã tính toán, tức là 32px -->
<p>Tôi là phần tử p</p>
</div>
</body>
</html>
Trong trường hợp này, 2em thực tế là 32px, vì tỷ lệ vẫn dựa trên phông chữ mặc định 16px của phần tử body.
Đối với các thuộc tính không có tính kế thừa, bạn có thể cài đặt để chúng có thể kế thừa.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tài liệu</title>
<style>
.box {
color: red;
border: 2px solid peru;
}
/* Bắt buộc kế thừa */
.box p {
border: inherit;
}
</style>
</head>
<body>
<div class="box">
<p>Tôi là p</p>
<h1>Tôi là h1</h1>
</div>
</body>
</html>
Khi mở trang web, thuộc tính border mặc định không có tính kế thừa, nhưng thông qua cài đặt, bạn có thể bắt buộc nó kế thừa.
2. Tính chất lớp của thuộc tính CSS
Các thuộc tính của một phần tử có thể được cài đặt thông qua nhiều bộ chọn khác nhau, và các thuộc tính này sẽ được chồng lên nhau, cuối cùng chỉ có một thuộc tính duy nhất được áp dụng. Bộ chọn nào sẽ được áp dụng?
Trong các ví dụ trước, chúng ta đã thấy cách CSS ghi đè thuộc tính. Trạng thái cuối cùng phụ thuộc vào thứ tự và trọng số của bộ chọn.
Có hai cách để xác định:
- Cách 1: Dựa trên trọng số của bộ chọn, bộ chọn có trọng số cao hơn sẽ được áp dụng.
- Cách 2: Dựa trên thứ tự, nếu trọng số bằng nhau, bộ chọn sau cùng sẽ được áp dụng.
Trọng số của các thuộc tính CSS như sau:
!important: 10000Inline styles: 1000ID selectors: 100Class selectors,attribute selectors,pseudo-classes: 10Element selectors,pseudo-elements: 1Universal selector: 0
Cách tính trọng số:
| Bộ chọn | Nghìn | Trăm | Chục | Đơn vị |
|---|---|---|---|---|
| h1 | 0 | 0 | 0 | 0 |
| h1 + p::first-line | 0 | 0 | 0 | 3 |
| li > a[href*="en-US"] > .inline-warning | 0 | 0 | 2 | 2 |
| #info | 0 | 1 | 0 | 0 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tài liệu</title>
<style>
div .box {
color: red !important; /* Trọng số 10000 */
}
#main {
color: orange; /* ID selector trọng số 100 */
}
.box {
font-size: 10px; /* Class selector trọng số 10 */
}
.name {
font-size: 30px;
}
* {
color: aquamarine;
}
</style>
</head>
<body>
<div id="main" class="box name info" style="color: blue;">
Tôi là box
</div>
</body>
</html>
Khi mở HTML, kết quả sẽ dựa trên trọng số của bộ chọn.