unsur pseudo CSS
CSS Pseudo-element
CSS pseudo-element digunakan untuk menambah beberapa kesan khas pada pemilih.
Sintaks
Sintaks unsur pseudo:
Kelas CSS juga boleh menggunakan elemen pseudo:
:first-line pseudo Elemen
elemen pseudo "baris pertama" digunakan untuk menetapkan gaya khas pada baris pertama teks.
Dalam contoh berikut, penyemak imbas akan memformat baris pertama teks elemen p mengikut gaya dalam elemen pseudo "baris pertama":
<!DOCTYPE html>
<html>
<head>
<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>您可以使用:線偽元素添加特殊效果給第一行文本。</p>
</body>
</html>Jalankan program Cuba
Nota: elemen pseudo "baris pertama" hanya boleh digunakan dengan elemen peringkat blok.
Nota: Sifat berikut boleh digunakan pada elemen pseudo "baris pertama":
- sifat fon
- sifat warna
- sifat latar belakang
- jarak perkataan
- jarak huruf
- hiasan teks
- jajaran menegak
- transformasi teks
- tinggi garis
- jelas
:elemen pseudo huruf pertama
"first- letter" pseudo-element Digunakan untuk menetapkan gaya khas kepada huruf pertama teks:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>Jalankan atur cara untuk mencubanya keluar
Nota: Elemen pseudo "huruf pertama" hanya boleh digunakan dengan elemen peringkat blok.
Nota: Sifat berikut boleh digunakan pada unsur pseudo "huruf pertama":
- sifat fon
- sifat warna
- sifat latar belakang
- sifat margin
- sifat padding
- sifat sempadan
- hiasan teks
- penjajaran menegak (hanya jika "terapung" ialah "tiada")
- transformasi teks
- tinggi garis
- terapung
- jelas
Unsur pseudo dan kelas CSS
Unsur pseudo boleh digabungkan dengan kelas CSS:
<p class="article">Satu perenggan dalam artikel</p>
Contoh di atas akan menjadikan huruf pertama semua perenggan dengan artikel kelas bertukar merah.
Berbilang Pseudo-elemen
boleh digunakan dalam kombinasi dengan berbilang pseudo-elemen.
Dalam contoh di bawah, huruf pertama perenggan akan muncul dalam warna merah dan saiz fonnya ialah xx-besar. Selebihnya teks dalam baris pertama akan berwarna biru dan muncul dalam huruf besar kecil.
Selebihnya teks dalam perenggan akan dipaparkan dalam saiz dan warna fon lalai:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>Jalankan atur cara untuk mencubanya
CSS - :before pseudo-element
":before" pseudo-element boleh memasukkan kandungan baharu sebelum kandungan elemen.
Contoh berikut memasukkan imej sebelum setiap elemen <h1>
