I. Lý thuyết trọng tâm

1. Kiểu bộ chọn dạng pseudo-class và pseudo-element

Các lệnh định dạng CSS đã học đề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 làm thế nào để thiết lập CSS định dạng cho các trạng thái tương tác, ví dụ như khi người dùng di chuyển hay nháy chuột lên phần tử? Câu trả lời nằm ở bộ chọn pseudo-class và pseudo-element.

1.1. Bộ chọn pseudo-class (Lớp giả)

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.

Cú pháp:

:pseudo-class {thuộc_tính: giá_trị;}

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

Ví dụ minh họa:

Đoạn CSS sau 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:

a:link {color: red;}      /* Liên kết mặc định màu đỏ */
a:visited {color: green;} /* Liên kết đã kích hoạt chuyển màu xanh lá */
a:hover {color: magenta;} /* Khi di chuột qua đổi màu hồng */
h1 {color: blue;}

Áp dụng cho HTML:

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

Kết quả: Liên kết “Tự học nhanh CSS” sẽ có màu đỏ mặc định. Nếu đã được kích hoạt, liên kết 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ữ đổi màu hồng.

1.2. Bộ chọn pseudo-element (Phần tử giả)

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.

Cú pháp:

::pseudo-element {thuộc_tính: giá_trị;}

Một số phần tử giả thường dùng:

Ví dụ minh họa:

Đoạn CSS sau thiết lập định dạng cho dòng đầu tiên của phần tử p:

p::first-line {
    color: red;
    font-family: monospace;
    font-size: 120%;
}

Áp dụng cho HTML:

<p>HTML là ngôn ngữ đánh dấu siêu văn bản, 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.</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>

Kết quả: 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 với màu đỏ, phông chữ có độ rộng đều nhau và kích thước lớn hơn 1,2 lần so với bình thường.

Lưu ý quan trọng: 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. Nếu thu nhỏ cửa sổ, dòng đầu tiên sẽ ngắn lại.

2. Mức độ ưu tiên khi áp dụng CSS

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.

2.1. Thứ tự ưu tiên của CSS

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 sau:

Ví dụ về Media type:

@media only screen and (max-width: 600px) {
    body {font-size: 150%;}
}

Mẫu định dạng trên sẽ tăng kích thước chữ lên 150% nếu chiều ngang màn hình nhỏ hơn 600px.

2.2. Cách tính trọng số CSS

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 bộ chọn:

Một số ví dụ tính trọng số:

Nguyên tắc quan trọng: 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. 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.

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa