Nội dung chính Khoa học máy tính 12 kết nối bài 17: Các mức ưu tiên của bộ chọn

BÀI 17: CÁC MỨC ƯU TIÊN CỦA BỘ CHỌN

1. KIỂU BỘ CHỌN DẠNG PSEUDO-CLASS VÀ PSEUDO-ELEMENT

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:

Bảng 17.1. Một số lớp giả thường dùng

Khai báo lớp giả để làm thay đổi các giá trị mặc định của đối tượng Gây sự chú ý.

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:

Bảng 17.2. Một số phần tử giả

Khai báo phần tử giả để thiết lập các mẫu định dạng đặc biệt cho phần tử giả đó khác so với mặc định.

2. MỨC ĐỘ ƯU TIÊN KHI ÁP DỤNG CSS

* Thứ tự ưu tiên các mẫu định dạng trong CSS khi có nhiều hơn các mẫu cùng áp dụng cho một phần tử HTML

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:

1. !important: Các thuộc tính trong CSS với từ khoá !important sẽ có mức ưu tiên cao nhất.

1. 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.

1. CSS liên quan đến 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%;}}

1. Trọng số CSS: Mỗi định dạng CSS sẽ có trọng số (specificity) riêng của mình. 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.

1. 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.

1. 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.

2. 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.

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 một mẫu định 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 đó. 

Bảng 17.4. Giá trị của các thành phần của bộ chọn

Bảng 17.5. Một số ví dụ tính trọng số