Podcast CSS – 014: Các yếu tố giả
Nếu bạn có một bài viết về nội dung và bạn muốn chữ cái đầu tiên phải là giới hạn lớn hơn nhiều — bạn sẽ làm được điều ��ó bằng cách nào?
Trong CSS, bạn có thể sử dụng phần tử giả ::first-letter
để có được kiểu thiết kế chi tiết này.
p::first-letter {
color: blue;
float: left;
font-size: 2.6em;
font-weight: bold;
line-height: 1;
margin-inline-end: 0.2rem;
}
Phần tử giả giống như việc thêm hoặc nhắm mục tiêu một phần tử bổ sung mà không phải thêm HTML khác.
Giải pháp mẫu này (sử dụng ::first-letter
) là một trong nhiều phần tử giả.
Chúng có nhiều vai trò và trong bài học này, bạn sẽ tìm hiểu về những phần tử giả có sẵn cũng như cách sử dụng chúng.
::before
và ::after
Cả hai phần tử giả ::before
và ::after
đều tạo phần tử con bên trong một phần tử chỉ nếu bạn xác định thuộc tính content
.
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
content
có thể là chuỗi bất kỳ (kể cả chuỗi trống), nhưng hãy lưu ý rằng trình đọc màn hình có thể thông báo bất kỳ nội dung nào khác ngoài chuỗi trống.
Bạn có thể thêm hình ảnh url
. Thao tác này sẽ chèn hình ảnh ở kích thước ban đầu để bạn không thể đổi kích thước hình ảnh.
Bạn cũng có thể chèn một counter
.
Sau khi tạo phần tử ::before
hoặc ::after
, bạn có thể tạo kiểu theo ý muốn mà không có giới hạn.
Bạn chỉ có thể chèn phần tử ::before
hoặc ::after
vào một phần tử chấp nhận các phần tử con (các phần tử có cây tài liệu), do đó, các phần tử như <img />
, <video>
và <input>
sẽ không hoạt động.
::first-letter
Chúng ta đã gặp phần tử giả này ở đầu bài học.
Xin lưu ý rằng không phải thuộc tính CSS nào cũng có thể dùng khi nhắm mục tiêu ::first-letter
.
Các cơ sở lưu trú hiện có là:
color
- Thuộc tính
background
(chẳng hạn nhưbackground-image
) - Thuộc tính
border
(chẳng hạn nhưborder-color
) float
- Các thuộc tính
font
(chẳng hạn nhưfont-size
vàfont-weight
) - các thuộc tính văn bản (chẳng hạn như
text-decoration
vàword-spacing
)
p::first-letter {
color: goldenrod;
font-weight: bold;
}
::first-line
Phần tử giả ::first-line
sẽ chỉ cho phép bạn tạo kiểu cho dòng văn bản đầu tiên nếu phần tử được áp dụng ::first-line
có giá trị display
là block
, inline-block
, list-item
, table-caption
hoặc table-cell
.
p::first-line {
color: goldenrod;
font-weight: bold;
}
Giống như phần tử giả ::first-letter
, bạn chỉ có thể dùng một nhóm nhỏ thuộc tính CSS:
color
background
tài sảnfont
tài sảntext
tài sản
::backdrop
Nếu có một phần tử hiển thị ở chế độ toàn màn hình, chẳng hạn như <dialog>
hoặc <video>
, bạn có thể tạo kiểu cho phông nền (khoảng không gian giữa phần tử và phần còn lại của trang) bằng phần tử giả ::backdrop
:
video::backdrop {
background-color: goldenrod;
}
::marker
Phần tử giả ::marker
cho phép bạn tạo kiểu cho dấu đầu dòng hoặc số cho một mục trong danh sách hoặc mũi tên của phần tử <summary>
.
::marker {
color: hotpink;
}
ul ::marker {
font-size: 1.5em;
}
ol ::marker {
font-size: 1.1em;
}
summary::marker {
content: '\002B'' '; /* Plus symbol with space */
}
details[open] summary::marker {
content: '\2212'' '; /* Minus symbol with space */
}
Chỉ một số ít tài sản CSS được hỗ trợ cho ::marker
:
color
content
white-space
font
tài sản- Các thuộc tính
animation
vàtransition
Bạn có thể thay đổi ký hiệu đánh dấu bằng cách sử dụng thuộc tính content
. Ví dụ: bạn có thể sử dụng tính năng này để đặt ký hiệu dấu cộng và dấu trừ cho trạng thái đóng và trống của phần tử <summary>
.
::selection
Phần tử giả ::selection
cho phép bạn tạo kiểu cho văn bản đã chọn.
::selection {
background: green;
color: white;
}
Bạn có thể sử dụng phần tử giả này để tạo kiểu cho tất cả văn bản đã chọn như trong bản minh hoạ ở trên. Bạn cũng có thể sử dụng kết hợp với các bộ chọn khác để có kiểu lựa chọn cụ thể hơn.
p:nth-of-type(2)::selection {
background: darkblue;
color: yellow;
}
Giống như các phần tử giả khác, chỉ cho phép một nhóm nhỏ thuộc tính CSS:
color
background-color
nhưng không phảibackground-image
text
tài sản
::placeholder
Bạn có thể thêm gợi ý trợ giúp để tạo các thành phần biểu mẫu, chẳng hạn như <input>
có thuộc tính placeholder
.
Phần tử giả ::placeholder
cho phép bạn tạo kiểu cho văn bản đó.
input::placeholder {
color: darkcyan;
}
::placeholder
chỉ hỗ trợ một số quy tắc CSS:
color
background
tài sảnfont
tài sảntext
tài sản
::cue
Cuối cùng trong chuyến tham quan về phần tử giả này, hãy cùng tìm hiểu về phần tử giả ::cue
.
Nhờ vậy, bạn có thể tạo kiểu cho các tín hiệu WebVTT,
là chú thích của phần tử <video>
.
Bạn cũng có thể chuyển bộ chọn vào ::cue
, cho phép bạn tạo kiểu cho các phần tử cụ thể bên trong chú thích.
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
Kiểm tra kiến thức
Kiểm tra kiến thức về các phần tử giả
Yếu tố nào sau đây không phải là phần tử giả?
::before
content: '';
.::first-paragraph
::after
content: '';
.::marker
::pencil
:active
Bạn có thể tìm thấy phần tử giả trong tệp HTML.