Podcast CSS – 014: Phần 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à chữ cái lớn hơn nhiều— làm cách nào để đạt được điều đó?
Trong CSS,
bạn có thể sử dụng phần tử giả ::first-letter
để có được loại chi tiết thiết kế 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ả.
Họ có nhiều vai trò,
Trong bài học này, bạn sẽ tìm hiểu những phần tử giả có sẵn và cách sử dụng chúng.
::before
và ::after
Cả hai thuộc tính
::before
và
::after
phần tử giả tạo phần tử con bên trong một phần tử chỉ khi bạn xác định thuộc tính content
.
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
content
có thể là bất kỳ chuỗi nào
—kể cả một lời nhắc trống—
nhưng hãy lưu ý rằng trình đọc màn hình đều có thể thông báo bất kỳ nội dung nào khác ngoài một 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 theo kích thước ban đầu,
nên bạn sẽ không thể đổi kích thước ảnh.
Bạn cũng có thể chèn
counter
.
Sau khi tạo một 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 thành phần 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ể sử dụng khi nhắm mục tiêu
::first-letter
.
Sau đây là các cơ sở lưu trú hiện có:
color
- Tài sản
background
(chẳng hạn nhưbackground-image
) - Tài sản
border
(chẳng hạn nhưborder-color
) float
- Tài sản
font
(chẳng hạn nhưfont-size
vàfont-weight
) - 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
::first-line
phần tử giả sẽ cho phép bạn tạo kiểu cho dòng văn bản đầu tiên
chỉ khi phần tử có ::first-line
được áp dụng 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ể sử dụng một số thuộc tính CSS:
color
background
cơ sở lưu trúfont
cơ sở lưu trútext
cơ sở lưu trú
::backdrop
Nếu bạn 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 cách 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
::marker
phần tử giả cho phép bạn tạo kiểu cho dấu đầu dòng hoặc số cho một mục 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
cơ sở lưu trú- Các thuộc tính
animation
vàtransition
Bạn có thể thay đổi biểu tượng đánh dấu bằng cách sử dụng thuộc tính content
. Ví dụ: bạn có thể sử dụng thuộc tính này để đặt dấu cộng và dấu trừ cho trạng thái đóng và trống của phần tử <summary>
.
::selection
::selection
phần tử giả 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 mã này 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 số thuộc tính CSS:
color
background-color
nhưng không phảibackground-image
text
cơ sở lưu trú
::placeholder
Bạn có thể thêm gợi ý trợ giúp vào các thành phần biểu mẫu,
chẳng hạn như <input>
có thuộc tính placeholder
.
::placeholder
phần tử giả 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
cơ sở lưu trúfont
cơ sở lưu trútext
cơ sở lưu trú
::cue
Cuối cùng trong chuyến tham quan phần tử giả này là
Phần tử giả ::cue
.
Điều này cho phép bạn tạo kiểu cho các tín hiệu WebVTT,
là phụ đề của phần tử <video>
.
Bạn cũng có thể truyền bộ chọn vào ::cue
,
công cụ này cho phép bạn tạo kiểu cho các phần tử cụ thể bên trong phụ đề.
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 của bạn về phần tử giả
Phần 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 các phần tử giả trong tệp HTML.