btvn.vn
Tìm kiếm Đăng nhập

Phần tử giả: dòng đầu, chữ đầu và vùng chọn

Lưu trên thiết bị này
Trạng thái và mức ưu tiên CSS · Chọn bài khác

Lớp giả khác phần tử giả

Cùng đoạn văn ở hai độ rộng: phần được xem là dòng đầu và tô đỏ thay đổi theo cách ngắt dòng.
Cùng đoạn văn ở hai độ rộng: phần được xem là dòng đầu và tô đỏ thay đổi theo cách ngắt dòng.
Mở hình lớn
Phần tử giả (pseudo-element) giúp định dạng một phần nội dung hoặc thành phần được CSS tạo ra. Trong cách viết đang học, dùng hai dấu hai chấm, như ::first-line, khác dấu hai chấm của lớp giả :hover. | Bộ chọn | Phần được định dạng trong mẫu | |---|---| | p.doan::first-line |Dòng hiển thị đầu tiên của đoạn thuộc lớp doan| | p#chu_dau::first-letter |Chữ đầu của đoạn có id chu_dau| | ::selection |Phần văn bản đang được chọn| Dòng hiển thị đầu tiên phụ thuộc nội dung, phông, cỡ chữ và chiều rộng vùng chứa. Nó không phải dòng đầu trong mã nguồn, cũng không chỉ phụ thuộc chiều rộng cửa sổ.

Ba phần được định dạng riêng

```html <p class="doan">Buổi đọc chung bắt đầu bằng một câu hỏi ngắn. Mỗi người lần lượt trình bày ý kiến và ghi lại điều cần nhớ.</p> <p id="chu_dau">Một câu mở đầu được đánh dấu.</p> ``` ```css p.doan::first-line { color: red; font-family: monospace; font-size: 120%; } p#chu_dau::first-letter { font-size: 200%; } ::selection { background-color: lime; } ``` Dòng đầu của đoạn doan có chữ đỏ, phông monospace và cỡ 120%; những dòng sau không nhận kiểu ấy từ quy tắc ::first-line. Đoạn chu_dau có chữ đầu lớn hơn theo 200%, không phải toàn bộ đoạn. Kéo chọn một phần văn bản để thấy nền lime từ ::selection; bỏ vùng chọn để đối chiếu. Các quy tắc này không cần chèn span quanh từng chữ. Trong ví dụ chữ đầu bắt đầu trực tiếp bằng văn bản, không có ảnh hay thành phần khác đứng trước.

Bài luyện

Bộ chọn nào định dạng dòng hiển thị đầu của p?
Chọn một đáp án

Bài luyện

Giữ cùng đoạn và phông, thu hẹp vùng chứa có thể làm gì với ::first-line?
Chọn một đáp án

Bài luyện

Trong mẫu, thuộc tính nào đặt nền lime cho phần văn bản đang chọn?
Chọn một đáp án

Đang học