Bài 17. Các mức ưu tiên của bộ chọn
SAU BÀI HỌC NÀY EM SẼ:
Chúng ta đã biết nhiều cách thiết lập mẫu định dạng cho các phần tử HTML. Tuy nhiên, các lệnh định dạng CSS đã biết đều chỉ áp dụng cho các phần tử tĩnh, tức là không phụ thuộc vào tương tác với người dùng. Vậy có cách nào thiết lập CSS để định dạng cho các trạng thái tương tác với người dùng, ví dụ như trạng thái khi người dùng di chuyển hay nháy chuột lên phần tử đó không?
1. KIỂU BỘ CHỌN DẠNG PSEUDO-CLASS VÀ PSEUDO-ELEMENT
Hoạt động 1. Tìm hiểu một số kiểu lớp và bộ chọn pseudo-class, pseudo-element
Thảo luận và trả lời các câu hỏi sau:
1. Thế nào là pseudo-class của bộ chọn? Cách áp dụng.
2. Thế nào là pseudo-element của bộ chọn? Nêu ý nghĩa của khái niệm này trong định dạng CSS.
a) Bộ chọn pseudo-class
Pseudo-class (lớp giả) là khái niệm chỉ các trạng thái đặc biệt của phần tử HTML. Các trạng thái này không cần định nghĩa và mặc định được coi như các lớp có sẵn của CSS. Trong CSS, các lớp giả quy định viết sau dấu ":" theo cú pháp:
:pseudo-class {thuộc tính: giá trị;}Bảng 17.1. Một số lớp giả thường dùng
| Bộ chọn | Ý nghĩa | |
| :link | Tất cả các liên kết khi chưa được kích hoạt. | Các liên kết (khi chưa kích hoạt) sẽ có màu xanh dương. a:link {color: blue;} |
| :visited | Tất cả các liên kết sau khi đã được kích hoạt một lần. | Các liên kết sau khi kích hoạt chuyển màu xám. a:visited {color: gray;} |
| :hover | Tất cả các phần tử, khi người dùng di chuyển con trỏ chuột lên đối tượng. | Khi di chuyển con trỏ chuột lên đối tượng có id = "home" sẽ hiển thị với cỡ chữ tăng lên 150%. #home:hover {font-size: 150%;} |
Ví dụ trong Hình 17.1 mô tả CSS thiết lập định dạng cho các trạng thái đặc biệt của phần tử a chứa liên kết. Các trạng thái này được gọi là các lớp giả. Liên kết "Tự học nhanh CSS" sẽ được thiết lập màu đỏ mặc định. Nếu liên kết đã được kích hoạt thì nó sẽ tự động chuyển màu xanh lá cây. Khi di chuyển con trỏ chuột lên liên kết thì dòng chữ liên kết đổi màu hồng.
a) Mã HTML
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color: red;}
a:visited {color: green;}
a:hover {color: magenta;}
h1 {color: blue;}
</style>
</head>
<body>
<h1>CSS là gì</h1>
<p><a href="https://www.w3schools.com/css/" target="_blank">Tự học nhanh CSS</a></p>
<p>CSS (Cascading Style Sheets) là ngôn ngữ định dạng đặc biệt được dùng để mô tả cách thể hiện của văn bản HTML trong trang web.</p>
</body>
</html>b) Kết quả hiển thị trên trình duyệt
CSS là gì
Tự học nhanh CSS
CSS (Cascading Style Sheets) là ngôn ngữ định dạng đặc biệt được dùng để mô tả cách thể hiện của văn bản HTML trong trang web.
Hình 17.1. Ví dụ minh hoạ cho bộ chọn pseudo-class
b) Bộ chọn kiểu pseudo-element
Pseudo-element (phần tử giả) là khái niệm chỉ một phần (hoặc một thành phần) của các phần tử bình thường. Các phần này có thể coi là một phần tử giả và có thể thiết lập mẫu định dạng CSS. Quy định phần tử giả viết sau dấu "::" theo cú pháp:
::pseudo-element {thuộc tính: giá trị;}Bảng 17.2. Một số phần tử giả
| Bộ chọn | Mô tả | Ví dụ |
| ::first-line | Dòng đầu tiên của đối tượng. | Dòng đầu tiên của các đoạn thuộc lớp test chuyển phông monospace. p.test::first-line {font-family: monospace;} |
| ::first-letter | Kí tự đầu tiên của đối tượng. | Kí tự đầu tiên của đoạn có id = "first" có màu đỏ và kích thước gấp đôi bình thường. p#first::first-letter {font-size: 200%;} |
| ::selection | Phần được chọn (bằng cách kéo thả chuột trên màn hình) của đối tượng. | Vùng đang chọn bất kì sẽ chuyển màu nền xanh lá mạ. ::selection {background-color: lime;} |
Ví dụ trong Hình 17.2 mô tả CSS thiết lập định dạng cho một phần hoặc một thành phần của phần tử p (được gọi là phần tử giả). CSS sẽ tự động tạo khuôn cho dòng đầu tiên của tất cả các phần tử p của trang web với màu đỏ, phông chữ có độ rộng đều nhau và có kích thước lớn hơn 1,2 lần so với bình thường. Chú ý: dòng đầu tiên này không phụ thuộc vào văn bản mà chỉ phụ thuộc vào độ rộng của cửa sổ trình duyệt.
a) Mã HTML
<!DOCTYPE html>
<html>
<head>
<style>
p:first-line {color: red;
font-family: monospace;
font-size: 120%;}
</style>
</head>
<body>
<p>HTML là ngôn ngữ đánh dấu siêu văn bản, là ngôn ngữ đặc biệt để thiết kế nội dung các trang web và được thể hiện bằng trình duyệt.</p>
<p>CSS là ngôn ngữ định dạng đặc biệt được dùng để mô tả cách thể hiện của văn bản HTML trong trang web.</p>
</body>
</html>b) Kết quả hiển thị trên trình duyệt
HTML là ngôn ngữ đánh dấu siêu văn bản, là ngôn ngữ đặc biệt để thiết kế nội dung các trang web và được thể hiện bằng trình duyệt.
CSS là ngôn ngữ định dạng đặc biệt được dùng để mô tả cách thể hiện của văn bản HTML trong trang web.
Hình 17.2. Ví dụ minh hoạ cho bộ chọn pseudo-element
CSS hỗ trợ thiết lập định dạng cho các lớp giả (pseudo-class) và phần tử giả (pseudo-element). Lớp giả mô tả các trạng thái được định nghĩa trước của phần tử. Phần tử giả mô tả các thành phần (nhỏ hơn) của phần tử.
2. MỨC ĐỘ ƯU TIÊN KHI ÁP DỤNG CSS
Hoạt động 2. Tìm hiểu ý nghĩa và ứng dụng của mức độ ưu tiên trong CSS
Giả sử có định dạng CSS như sau: <style> .test {color: green;} p {color: red;} </style>
CSS trên áp dụng cho phần tử HTML sau: <p class="test">Tin học 12</p>
Khi đó cụm từ "Tin học 12" sẽ có màu gì?
Khi có nhiều mẫu định dạng có thể áp dụng cho một phần tử HTML nào đó trên trang web, CSS sẽ áp dụng định dạng theo thứ tự ưu tiên. Trong các bài học trước, em đã biết hai quy tắc ưu tiên là tính kế thừa và quy định về thứ tự cuối cùng (cascading). Trên thực tế, quy định về chọn mẫu định dạng ưu tiên từ cao xuống thấp của CSS được mô tả trong Bảng 17.3.
Như vậy, theo nguyên tắc trên, nếu có một dãy các mẫu định dạng CSS cùng có thể áp dụng cho một phần tử HTML thì tính kế thừa CSS và nguyên tắc thứ tự cuối cùng được xếp dưới trọng số CSS, tức là khi đó CSS sẽ tính trọng số các mẫu định dạng, cái nào có trọng số lớn hơn sẽ được ưu tiên áp dụng.
Cách tính trọng số của CSS rất đơn giản, dựa trên giá trị trọng số của từng thành phần của bộ chọn (selector) trong mẫu định dạng. Trọng số của mẫu định dạng sẽ được tính bằng tổng của các giá trị thành phần đó. Giá trị của các thành phần của bộ chọn theo quy định trong Bảng 17.4.
Trở lại với ví dụ của Hoạt động 2, cụm từ "Tin học 12" là nội dung của phần tử p. Có hai định dạng CSS có thể áp dụng cho phần tử. Định dạng phía trên có trọng số 10 (vì là pseudo-class), định dạng phía dưới có trọng số 1 (vì là element). Do đó định dạng phía trên sẽ được áp dụng và cụm từ đó sẽ có màu xanh lá cây.
Nếu có nhiều mẫu định dạng CSS cùng mức ưu tiên áp dụng cho một phần tử HTML thì mẫu CSS nào có trọng số cao nhất sẽ được áp dụng.
| STT | CSS | Giải thích |
| !important | Các thuộc tính trong CSS với từ khoá !important sẽ có | |
| 2 | CSS trực tiếp (inline CSS). | Các định dạng nằm ngay trong phần tử HTML với thuộc tính style. |
| 3 | Đến CSS liên quan kích thước thiết bị (Media type). | Các định dạng loại này thường dùng để điều khiển cách hiển thị thông tin phụ thuộc vào kích thước màn hình của thiết bị. Ví dụ mẫu định dạng sau sẽ tăng kích thước chữ lên 150% nếu chiều ngang màn hình nhỏ hơn 600 px: @media only screen and (max-width: 600px) { body {font-size: 150%;} } |
| Trọng số CSS. | Mỗi định dạng CSS sẽ có trọng số (specificity) riêng. Tại mức ưu tiên này, định dạng CSS có trọng số cao nhất sẽ được áp dụng. | |
| 5 | Nguyên tắc thứ tự cuối cùng (Rule order). | Nếu có nhiều mẫu định dạng với cùng trọng số thì định dạng ở vị trí cuối cùng sẽ được áp dụng. |
| Kế thừa từ CSS cha. | Nếu không tìm thấy mẫu định dạng tương ứng thì sẽ lấy thông số định dạng CSS kế thừa từ phần tử cha. | |
| 7 | Mặc định theo trình duyệt. | Nếu không có bất cứ định dạng CSS nào thì trình duyệt quyết định thể hiện nội dung mặc định. |
| STT | Bộ chọn | Giá trị đóng góp trọng số |
| Mã định danh (ID). | 100 | |
| 2 | Lớp, lớp giả, bộ chọn kiểu thuộc tính. (Class, pseudo-class, attribute selector). | 10 |
| 3 | Phần tử, phần tử giả (element, pseudo-element). | 1 |
| 4 | 0 |
| Bộ chọn | Trọng số | Giải thích |
| p em | 2 | Bộ chọn có hai phần tử là p và em, vậy trọng số bằng 1 + 1 = 2. |
| #test.more | 110 | Bộ chọn bao gồm 1 class và 1 id, vậy trọng số bằng 10 + 100 = 110. |
| p.test em.more | 22 | Bộ chọn có hai phần tử (p, em) và hai class (test, more), vậy trọng số bằng 2 + 20 = 22. |
| p em#p123 | 102 | Bộ chọn có hai phần tử (p, em) và một id, vậy trọng số bằng 2 + 100 = 102. |
Tính trọng số của các mẫu định dạng sau:
a) #n12 > .test
b) h1, h2, h3, h4 > #new
c) p + em.test
3. THỰC HÀNH
Nhiệm vụ 1: Nhập tệp HTML giới thiệu HTML và CSS
Giới thiệu HTML
Giới thiệu CSS
HTML là gì
HTML là ngôn ngữ đặc biệt dùng để thiết kế nội dung các trang web và được thể hiện bằng trình duyệt.
Cấu trúc mỗi tệp HTML là một cấu trúc dạng cây của các phần tử HTML.
Xem logo của HTML
CSS là gì
Mỗi định dạng CSS đều có dạng chuẩn là bộ chọn {thuộc tính: giá trị;}.
CSS (Cascading Style Sheets) là ngôn ngữ định dạng đặc biệt được dùng để mô tả cách thể hiện của văn bản HTML trong trang web.
Xem logo của CSS.
Nhiệm vụ 2: Thiết lập định dạng bằng CSS
Yêu cầu: Thiết lập định dạng cho tệp HTML ở Nhiệm vụ 1 bằng CSS theo các yêu cầu sau:
Hình ảnh trang web sau khi định dạng cần được thể hiện như Hình 17.3.
Hình 17.3. Trang web kết quả
Hướng dẫn:
<nav>
<ul>
<li><a href="#P1">Giới thiệu HTML</a></li>
<li><a href="#P2">Giới thiệu CSS</a></li>
</ul>
</nav>CSS được thiết lập như sau:
<style>
h1 {color: red; text-align: center;}
h2 {color: blue; font-weight: bold;}
nav {text-align: right;}
li {display: inline; border: 1px solid blue; padding: 5px; background-color: lime;}
a:hover {color: red; background-color: cyan;}
h2 + p {color: red;}
img {display: none;}
img:active {display: block;}
</style>LUYỆN TẬP
Giải thích sự khác nhau giữa hai định dạng sau:
#p123 + p {color: red;}
h2#p123 + p {color: red;}