Một lưu ý nhỏ trước khi bắt đầu: đề bài ghi là trang 98–99, nhưng hai ảnh thực tế là trang 96 và 97 của Bài 17 "Các mức ưu tiên của bộ chọn". Mình sẽ giải đúng theo nội dung trong ảnh nhé.

Tóm tắt lý thuyết

Bài 17 giới thiệu hai kiểu bộ chọn đặc biệt trong CSS dùng để định dạng các trạng thái tương tác hoặc một phần của phần tử HTML.

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 (ví dụ trạng thái khi rê chuột, khi đã nhấp...).
• Không cần định nghĩa, được CSS coi như các lớp có sẵn.
• Cú pháp: viết sau dấu hai chấm :

```css
:pseudo-class { thuộc tính : giá trị ; }
```

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

Pseudo-element (phần tử giả)

• Là khái niệm chỉ một phần (một thành phần) của phần tử bình thường, được coi như một phần tử giả để định dạng.
• Cú pháp: viết sau dấu hai chấm kép ::

```css
::pseudo-element { thuộc tính : giá trị ; }
```

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

Hoạt động 1: Tìm hiểu một số kiểu lớp và bộ chọn pseudo-class, pseudo-element

Phần này có 2 câu hỏi thảo luận.

Câu 1

Đề: Thế nào là pseudo-class của bộ chọn? Cách áp dụng.

Trả lời:

• Pseudo-class (lớp giả) là khái niệm dùng để chỉ một trạng thái đặc biệt của phần tử HTML. Các trạng thái này thường gắn với tương tác của người dùng (rê chuột, đã nhấp...) hoặc vị trí của phần tử, và không cần lập trình viên tự định nghĩa vì CSS đã có sẵn.
• Cách áp dụng: viết tên lớp giả sau dấu hai chấm : , thường gắn ngay sau một bộ chọn khác.

```css
bộ_chọn:pseudo-class { thuộc tính : giá trị ; }
```

• Ví dụ:

```css

a:hover { color: magenta; } / khi rê chuột lên liên kết, chữ đổi màu hồng tím /

a:visited { color: green; } / liên kết đã được nhấp sẽ có màu xanh lá /
```

Vì sao như vậy: lớp giả cho phép định dạng các trạng thái động (phụ thuộc tương tác người dùng) mà các bộ chọn thông thường (chỉ áp dụng cho phần tử tĩnh) không làm được.

Câu 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.

Trả lời:

• 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 phần tử bình thường. Phần đó được coi như một "phần tử giả" độc lập để có thể áp dụng mẫu định dạng CSS riêng.
• Cú pháp: viết tên phần tử giả sau dấu hai chấm kép ::

```css
bộ_chọn::pseudo-element { thuộc tính : giá trị ; }
```

• Ví dụ:

```css

p::first-line { font-family: monospace; } / định dạng riêng dòng đầu tiên /

p#first::first-letter { font-size: 200%; } / phóng to kí tự đầu tiên /
```

Ý nghĩa trong định dạng CSS:

• Cho phép định dạng một bộ phận nhỏ của phần tử (dòng đầu, kí tự đầu, vùng bôi chọn...) mà không cần thêm thẻ HTML phụ. Nhờ đó mã HTML gọn gàng hơn.
• Tạo hiệu ứng trình bày linh hoạt, ví dụ chữ cái đầu lớn theo kiểu báo chí, hay làm nổi bật dòng đầu tiên.
• Lưu ý: một số phần tử giả như ::first-line phụ thuộc vào độ rộng cửa sổ trình duyệt chứ không cố định theo nội dung văn bản.

Ví dụ minh họa lớp giả (trang 97)

Đoạn mã trong sách minh họa rõ cách hoạt động của pseudo-class với liên kế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.
 

Giải thích kết quả hiển thị:

• Liên kết "Tự học nhanh CSS" mặc định có màu đỏ (a:link).
• Sau khi đã được nhấp một lần, liên kết chuyển sang màu xanh lá (a:visited).
• Khi rê chuột lên, liên kết đổi sang màu hồng tím/magenta (a:hover).
• Tiêu đề

  luôn có màu xanh dương (h1 {color: blue;}).

Hai trang này chủ yếu là lý thuyết và một hoạt động thảo luận, chưa có bài tập tính toán. Nếu bạn gửi tiếp các trang sau (phần Câu hỏi/Luyện tập/Vận dụng), mình sẽ giải chi tiết từng câu nhé.