1.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ụ,
[CSS]
p
{
font-size:
41px;
color:
red;
}
[HTML]
<p>Cuối
tuần đi đá banh, giúp thêm <em>năng
lượng</em>
để làm việc</p>
Như bạn thấy,
chúng ta chỉ định dạng cho phần tử p
có cỡ chữ 41px và màu đỏ, chứ không định dạng cho phần tử em. Tuy nhiên, do em nằm
trong p nên nội dung của em cũng có cỡ chữ 41px và màu đỏ.
Cấu trúc của tài liệu
Làm sao biết được
phần tử nào chứa phần tử nào? Để biết được sự kế thừa giữa chúng? 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).
Ví dụ như tài liệu
HTML trong Bài tập 2 (xem mục Bài tập
và thực hành). Tài liệu có phần tử gốc là html
chứa phần tử head và body. Phần tử body chứa các phần tử h1, h2
và p. Một số phần tử p lại chứa các phần tử kiểu inline như img, em.
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 cà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ử 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ử h1,
h2, p, em, img được gọi là hậu duệ của phần tử body
– 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ử p chứa em, nên p là cha, em 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à p, body, html
– Hai phần tử có
cùng cha thì được gọi là anh em (siblings), Ví dụ, h1, h2, 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ư ở bài tập
đang xét, khi thiết lập định dạng font cho phần tử p, nó sẽ tác động lên mọi phần tử p của tài liệu HTML và các phần tử văn bản
kiểu inline (em) nằm trong p. Có nghĩa là, phần tử em đã kế thừa thuộc tính định dạng font từ phần tử p. Tuy nhiên, phần tử img cũng nằm trong p nhưng sẽ không kế thừa thuộc tính định dạng font, vì hình ảnh thì
không có thuộc tính font. 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.
Xem hình minh họa,
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.
1.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 chữ CSS, nó là viết tắt của Cascading Style
Sheets, hiểu nôm na “style sheets” là đoạn mã định dạng, thế còn “cascading” có
nghĩa là gì?
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 đỏ, đoạn mã CSS trong phần tử p định dạng p có màu xanh, vậy cuối cùng p
có màu gì?
<style>
p
{
font-size:
41px;
color: red;
}
</style>
<body>
<p
style="color: green">Cuối
tuần đi đá banh, giúp thêm <em>năng
lượng</em>
để làm việc</p>
</body>
Hoặc, phần tử body được định dạng nền màu xám, p là con của body được định dạng nền màu vàng? vậy p sẽ có nền màu gì?
body {
background-color: gray;
}
p {
font-size: 41px;
color: red;
background-color: yellow;
}
</style>
Để 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 (cascading).
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 đè 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 index.html, không viết mã CSS.
[index.html]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Cooking with Nada Surf</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.
CSS do người dùng tạo
ra
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 người
dùng và của trình duyệt.
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:
|
CSS mặc định của
trình duyệt |
|
CSS do người duyệt
web định nghĩa |
|
CSS do lập trình viên định nghĩa |
|
Các định dạng
CSS do lập
trình viên đánh dấu là “!important” |
|
Các định dạng
CSS do người
duyệt web đánh dấu là “!important” |
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ữ này 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 xanh. 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 vàng 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">