Bài trước: CuTeoHocLamWeb(3): Làm quen với CSS
-----
4. Kế thừa, kỹ thuật xếp lớp trong CSS
4.1 Sự kế thừa (Inheritance)
Bạn có đôi mắt, khuôn mặt, hay tính cách giống cha hoặc mẹ của bạn không? Nếu có, rất có thể bạn đã được kế thừa nó từ cha hoặc mẹ của bạn. Trong CSS cũng có tình huống kiểu như vậy, những gì chúng ta định dạng cho phần-tử-cha, thì mặc định, chúng cũng được định dạng cho các phần-tử-con. Tổng quát hơn, khi chúng ta định dạng CSS cho một phần tử, thì một số định dạng cũng áp dụng luôn cho các phần tử chứa trong nó.
Ví dụ,
body{
background-color: bisque;
}
Đoạn mã CSS trên sẽ định dạng cho phần tử body có màu nền là bisque, chứ bạn chưa định dạng màu nền cho phần tử h1 và p. Tuy nhiên, do h1 và p là con của body, nên bạn sẽ thấy phần tử h1 và p cũng có màu nền là bisque.
Cấu trúc của tài liệu HTML
Làm sao CSS biết được phần tử nào chứa phần tử nào? Để CSS biết được sự kế thừa giữa chúng? CSS sẽ dựa vào tài liệu HTML. Như đã biết, tài liệu HTML đã ngầm chứa trong nó một cấu trúc phân cấp (hierarchy), hay cấu trúc cha-con.
Ví dụ như tài liệu HTML trong tập in QueHuong.html. Tài liệu có phần tử gốc là html chứa phần tử head và body. Phần tử head chứa các phần tử title, meta, link, style. Phần tử body chứa các phần tử img, h1, p, p và p.
Một cách hình ảnh, tài liệu HTML chính là một cái cây lộn ngược (upside-down tree), với gốc là html, và các nhánh mọc xuống từ gốc. Xem hình minh họa:
Mối quan
hệ giữa các nút trong cây-HTML
Để dễ hiểu, có thể xem mối quan hệ giữa các nút trong cây-HTML như là mối quan hệ trong một dòng tộc, mỗi phần tử trong tài liệu HTML là một thành viên trong dòng tộc.
– Mọi phần tử nằm trong một phần tử thì được gọi hậu duệ (descendants) của nó. Ví dụ, các phần tử body, img, h1, p được gọi là hậu duệ của phần tử html
– Phần tử chứa trực tiếp phần tử khác được gọi là cha (parent), các phần tử được-chứa gọi là con (child). Ví dụ, phần tử body chứa img, nên body là cha, img là con
– Với một phần tử bất kì, mọi phần tử ở mức cao hơn mà có mối liên hệ nội tộc (…ông-cha-con-cháu…) thì được gọi là tổ tiên (ancestors) của nó. Ví dụ, tổ tiên của img là body, html
– Hai phần tử có cùng cha thì được gọi là anh em (siblings), Ví dụ, img, h1, p là anh em, vì đều có cha là body
Có thuộc tính được kế thừa, có thuộc tính không
Như ở trang web QueHuong.html, nếu bạn thiết lập kích thước font (font-size) cho phần tử body là 24px, thì nó sẽ tác động lên mọi phần tử h1 và p nằm trong body. Có nghĩa là, phần tử h1 và p đã kế thừa thuộc tính font-size từ phần tử body. Tuy nhiên, phần tử img cũng nằm trong body nhưng sẽ không kế thừa thuộc tính font-size, vì hình ảnh thì không có thuộc tính font-size. Vậy là sẽ có một số thuộc tính được kế thừa và có một số thuộc tính thì không.
body{
background-color: bisque;
font-size:
24px;
}
Nói chung, các thuộc tính liên quan đến định dạng văn bản (ví dụ: font-size, color, style) thì sẽ được kế thừa, các thuộc tính liên quan đến borders, backgrounds, margins sẽ không được kế thừa.
Tính kế thừa có chọn lọc này rất hữu dụng trong một số tính huống, ví dụ nếu muốn thiết lập thuộc tính font cho tất cả các phần tử văn bản, thay vì phải thiết lập cho từng phần tử văn bản thì có thể thiết lập một lần cho phần tử body. Ngược lại, khi thiết lập thuộc tính border (đường biên) cho một phần tử p nào đó thì chắc chắn là không muốn có border cho cả các phần tử em, strong, hay a nằm ở trong nó.
Khi thiết lập thuộc tính cho một phần tử, nó sẽ ghi đè (override) lên thuộc tính được kế thừa tương ứng. Ví dụ, với phần tử em là con của phần tử p, nếu thiết lập phông chữ cho p là sans-serif và thiết lập phông chữ cho em là serif thì thuộc tính được áp dụng cho em sẽ là serif.
4.2 Kỹ thuật xếp lớp (Cascading)
Nhiều định dạng chồng chéo lên một phần tử HTML
Quay trở lại định nghĩa, CSS là viết tắt của 3 từ tiếng Anh: Cascading Style Sheets, nghĩa là viết mã định dạng cho trang web theo kỹ thuật xếp lớp. Cascading nghĩa là kỹ thuật xếp lớp.
Như ở các phần trước đã đề cập, kỹ thuật CSS cho phép viết mã định dạng ở 3 nơi khác nhau (trong phần tử HTML, trong tài liệu HTML và ngoài tài liệu HTML), vậy sẽ có tình trạng nhiều định dạng cùng áp lên một phần tử. Hoặc do tính kế thừa trong CSS, cũng sẽ dẫn tới tình trạng tương tự, một phần tử sẽ nhận được cùng lúc nhiều định dạng từ các phần tử cha, ông của nó.
Ví dụ: đoạn mã CSS trong style định dạng p có màu green, đoạn mã CSS trong phần tử p định dạng p có màu brown, vậy cuối cùng p có màu gì?
<style>
...
p {
color: green;
font-style: italic;
}
</style>
</head>
<body>
...
<p style="color:brown">Quê hương là gì hả mẹ
Hoặc, phần tử body được định dạng nền màu bisque, p là con của body được định dạng nền màu azure? vậy p sẽ có nền màu gì?
body {
background-color: bisque;
}
p {
...
background-color: azure;
}
Để giải quyết tình huống: một phần tử HTML có nhiều định dạng cùng lúc, CSS sẽ sử dụng kĩ thuật xếp lớp.
Kĩ thuật xếp lớp là cách sắp xếp thứ tự các định dạng CSS (chỉ-dẫn-CSS) lên một phần tử HTML. Mỗi chỉ-dẫn-CSS được đánh trọng số ưu tiên (weight) hay độ ưu tiên, chỉ-dẫn-CSS nào có độ ưu tiên thấp sẽ định dạng lên phần tử HTML trước; chỉ-dẫn-CSS có độ ưu tiên cao hơn sẽ định dạng sau và đè lên (overwrite) chỉ-dẫn-CSS có độ ưu tiên thấp hơn. Xem hình minh họa:
Độ ưu tiên được
xác định dựa trên 3 yếu tố:
– Chỉ-dẫn-CSS từ đâu đến (priority of style source)
– Tính rõ ràng, chính xác của chỉ-dẫn-CSS (specificity)
– Thứ tự thực thi chỉ-dẫn-CSS (rule order)
Chỉ-dẫn-CSS từ đâu đến
CSS của trình duyệt
Như đã biết, nếu chúng ta không viết mã CSS để định dạng cho tài liệu HTML, thì trình duyệt sẽ lấy định dạng mặc định của nó để hiển thị trang web. W3C gọi kiểu định dạng này là user agent style sheet. Mỗi trình duyệt (ví dụ Chrome, Firefox) sẽ có bộ định dạng mặc định khác nhau.
Ví dụ, bạn chỉ viết mã HTML cho trang test.html, không viết mã CSS.
[test.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>user agent style sheet</title>
</head>
<body>
<h1>Hi bac Teo!</h1>
</body>
</html>
Tuy nhiên, khi bạn sử dụng Developer tools để quan sát mã CSS thì sẽ thấy trang web đã được định dạng bằng CSS mặc định của trình duyệt. Để mở Developer tools, bấm chuột phải vào trang web > chọn Inspect; hoặc bấm phím F12, hoặc Fn + F12.
CSS do lập
trình viên tạo ra
Nếu lập trình viên có viết mã CSS để định dạng cho tài liệu HTML (author style sheet), thì mã này sẽ có độ ưu tiên cao hơn mã CSS của trình duyệt. Đây chính là mã CSS chúng ta đang viết trong các bài học.
Bảng sau cho biết độ ưu tiên của định dạng dựa trên nguồn CSS từ đâu đến? Thứ tự ưu tiên sẽ tăng dần từ trên xuống:
Tính rõ ràng, chính xác của chỉ-dẫn-CSS
Trong thực tế sẽ có tình huống: một phần tử HTML bị nhiều chỉ dẫn CSS áp dụng lên nó. Ví dụ, ở đoạn mã dưới đây: phần tử h1 được định dạng màu đỏ, phần tử có id=“tieu-de” được định dạng màu vàng; cả hai định dạng này đều áp dụng lên dòng chữ “Hi bac Teo!”. Vậy cuối cùng dòng chữ có màu gì?
…
<style>
h1 {
color: red;
}
#tieu-de {
color: yellow;
}
</style>
</head>
<body>
<h1 id="tieu-de">Hi bac Teo!</h1>
</body>
…
Trong tình huống này, CSS quy định: khi hai (hay nhiều) chỉ dẫn trong một tài liệu CSS xung đột với nhau, thì sẽ dựa vào loại của bộ chọn (type of selector) để xác định độ ưu tiên. Bộ chọn nào càng rõ ràng, chính xác, và cụ thể (specificity) thì có độ ưu tiên cao hơn. Như ở ví dụ đang xét, bộ chọn h1 sẽ áp dụng cho tất cả mọi phần tử h1, như vậy ít có tính "cụ thể" bằng bộ chọn dựa trên định danh (#tieu-de). Kết quả là bộ chọn dựa trên định danh sẽ có độ ưu tiên cao hơn, và dòng chữ “Hi bac Teo!” sẽ có màu vàng.
Bạn có thể trải nghiệm về specificity tại trang web: https://specificity.keegan.st/
Thứ tự thực thi chỉ-dẫn-CSS (rule order)
Sau khi đã xem xét đến nguồn xuất phát và kiểu bộ chọn để xác định độ ưu tiên cho các định dạng CSS, thì vẫn có thể xảy ra trường hợp nhiều chỉ dẫn CSS cùng tác động lên một phần tử HTML, như trường hợp sau:
…
<style>
h1 { color: red; }
h1 { color: yellow; }
h1 { color: green; }
</style>
</head>
<body>
<h1 id="tieu-de">Hi bac Teo!</h1>
</body>
…
Khi đó, CSS đưa ra quy tắc “cái nào gần đối tượng (HTML) cần định dạng hơn sẽ có độ ưu tiên cao hơn (cái cuối cùng sẽ có độ ưu tiên cao nhất)”. Vậy, h1 sẽ có màu green. Nếu để ý sẽ thấy, khi thực thi mã nguồn, trình duyệt sẽ thực hiện từ trên xuống dưới, từ trái sang phải. Mã CSS luôn xuất hiện trước phần tử HTML. Nên mã CSS càng gần phần tử HTML hơn càng được thực thi sau, và mã CSS cuối cùng sẽ định dạng đè lên các mã CSS trước đó.
Ví dụ dưới đây, màu yellow sẽ được áp dụng cho phần tử h1,
h1 {
color: red;
color: green;
color: yellow;
}
Trong trường hợp sau, chỉ dẫn CSS trong tập tin main3.css sẽ có độ ưu tiên cao nhất.
<link rel="stylesheet" href="main1.css">
<link rel="stylesheet" href="main2.css">
<link rel="stylesheet" href="main3.css">
4.3 Bài tập
1. Khi áp dụng đoạn mã CSS sau, văn bản p có màu gì?
<style>
p { color: purple; }
p { color: green; }
p { color: gray; }
</style>
A. purple
B. green
C. gray
D. black
2. Phát biểu nào không đúng khi nói về kỹ thuật xếp lớp (cascading)?
A. Là cách sắp xếp thứ tự các định dạng CSS (chỉ-dẫn-CSS) lên một phần tử HTML
B. Mỗi chỉ-dẫn-CSS được đánh trọng số ưu tiên (weight) hay độ ưu tiên
C. Là kỹ thuật định dạng màu nền cho một phần tử HTML
D. Chỉ-dẫn-CSS có độ ưu tiên cao hơn sẽ định dạng sau và đè lên (overwrite) chỉ-dẫn-CSS có độ ưu tiên thấp hơn
3. Mã CSS nào có độ ưu tiên cao nhất?
A. CSS mặc định của trình duyệt
B. Các định dạng CSS do lập trình viên đánh dấu là “!important”
C. CSS do lập trình viên định nghĩa
D. Cả 3 cái trên có độ ưu tiên bằng nhau
4. Viết lại các đoạn mã trong bài học.
-----
Gợi ý làm bài tập
1(C), 2(C), 3(B)
------
Cập nhật: 5/12/2024