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 (không cần định nghĩa, được coi như các lớp có sẵn) của phần tử HTML.
:pseudo-class {thuộc tính : giá trị;}
| Bộ chọn |
Ý nghĩa |
Ví dụ |
| :link |
Tất cả các liên kết khi chưa được kích hoạt. |
Các liên kết chưa kích hoạt có màu xanh.
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 kích hoạt có màu xanh.
a:visited{color:blue}
|
| :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. |
Ki 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%;}
|
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.
::pseudo-element{thuộc tính : giá trị;}
| 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.
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. |
Vùng đang chọn bất kì sẽ chuyển màu nền xanh lá mạ.
::selection{background-color: lime;}
|
@203706842387@@203706845775@
2. Mức độ ưu tiên khi áp dụng CSS
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.
| CSS |
Giải thích |
| !important |
Các thuộc tính trong CSS với từ khoá !important sẽ có mức ưu tiên cao nhất. |
| 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. |
| CSS liên quan kích thước thiết bị |
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 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. |
| Nguyên tắc thứ tự cuối cùng |
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. |
| Mặc định 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. |
Cách tính trọng số của CSS 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 đó.
| STT |
Bộ chọn |
Giá trị đóng góp trọng số |
| 1 |
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 |
@203706926391@
