CSS - Phần tử giả
Phần tử giả CSS được sử dụng để thêm hiệu ứng đặc biệt cho một số bộ chọn. Bạn không cần sử dụng JavaScript hoặc bất kỳ tập lệnh nào khác để sử dụng các hiệu ứng đó. Cú pháp đơn giản của phần tử giả như sau:
selector:pseudo-element {property: value}Các lớp CSS cũng có thể được sử dụng với các phần tử giả -
selector.class:pseudo-element {property: value}Các phần tử giả được sử dụng phổ biến nhất như sau:
| Sr.No. | Giá trị & Mô tả |
|---|---|
| 1 | :first-line Sử dụng phần tử này để thêm các kiểu đặc biệt vào dòng đầu tiên của văn bản trong bộ chọn. |
| 2 | :first-letter Sử dụng phần tử này để thêm kiểu đặc biệt vào chữ cái đầu tiên của văn bản trong bộ chọn. |
| 3 | :before Sử dụng phần tử này để chèn một số nội dung trước phần tử. |
| 4 | :after Sử dụng phần tử này để chèn một số nội dung sau phần tử. |
Phần tử giả: dòng đầu tiên
Ví dụ sau minh họa cách sử dụng phần tử : first-line để thêm các hiệu ứng đặc biệt vào dòng đầu tiên của phần tử trong tài liệu.
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head>
<body>
<p class = "noline">
This line would not have any underline because this belongs to nline class.
</p>
<p>
The first line of this paragraph will be underlined as defined in the
CSS rule above. Rest of the lines in this paragraph will remain normal.
This example shows how to use :first-line pseduo element to give effect
to the first line of any HTML element.
</p>
</body>
</html>Nó sẽ tạo ra liên kết sau:
Phần tử giả: chữ cái đầu tiên
Ví dụ sau minh họa cách sử dụng phần tử : first-letter để thêm các hiệu ứng đặc biệt cho chữ cái đầu tiên của các phần tử trong tài liệu.
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<p class = "normal">
First character of this paragraph will be normal and will have font size 10 px;
</p>
<p>
The first character of this paragraph will be 5em big as defined in the
CSS rule above. Rest of the characters in this paragraph will remain
normal. This example shows how to use :first-letter pseduo element
to give effect to the first characters of any HTML element.
</p>
</body>
</html>Nó sẽ tạo ra liên kết đen sau:
Phần tử: trước phần tử giả
Ví dụ sau minh họa cách sử dụng phần tử : before để thêm một số nội dung vào trước bất kỳ phần tử nào.
<html>
<head>
<style type = "text/css">
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>Nó sẽ tạo ra liên kết đen sau:
Phần tử: sau phần tử giả
Ví dụ sau minh họa cách sử dụng phần tử : after để thêm một số nội dung vào sau phần tử bất kỳ.
<html>
<head>
<style type = "text/css">
p:after {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
</body>
</html>Nó sẽ tạo ra liên kết đen sau: