Apabila mereka bentuk tapak web, memformat teks ialah aspek penting untuk mencipta antara muka yang menarik dan boleh dibaca.
CSS menyediakan beberapa sifat yang membolehkan anda menyesuaikan pelbagai elemen teks, termasuk warna fon, saiz, keluarga, penjajaran, jarak dan banyak lagi.
Di bawah ialah panduan terperinci tentang setiap sifat pemformatan teks, bersama-sama dengan contoh untuk setiap sifat.
Warna Fon
Parameter: Nilai warna, yang boleh menjadi nama warna(cth, red), kod hex(cth, "#FF0000"), nilai RGB(cth, "rgb(255, 0, 0)") atau nilai RGBA(cth, "rgba(255, 0, 0, 0.5)").
p {
color: blue;
}
Saiz huruf
Parameter: Nilai saiz, yang boleh dalam piksel(cth, "16px"), unit em(cth, "1em"), unit rem(cth, "1.2rem"), unit lebar port pandang(cth, "10vw"), unit ketinggian tempat pandang(cth, "5vh"), atau unit lain.
h1 {
font-size: 24px;
}
Keluarga Font
Parameter: Senarai keluarga fon, dinyatakan dalam susunan pilihan. Anda boleh menentukan nama fon(cth, Arial) atau sertakan nama fon yang mengandungi aksara khas dalam petikan berganda(cth, " Times New Roman).
body {
font-family: Arial, sans-serif;
}
Berat dan Gaya Font
Parameter font-weight: normal(default), bold, bolder, lighter atau nilai angka dari 100 hingga 900.
Parameter font-style: normal(default), italic.
em {
font-style: italic;
}
strong {
font-weight: bold;
}
Hiasan Teks
Parameter: "none"(default), "underline", "overline", "line-through" atau gabungan nilai yang dipisahkan oleh ruang.
a {
text-decoration: underline;
}
del {
text-decoration: line-through;
}
Penjajaran Teks
Parameter: "left"(default), "right", "center" or "justify".
p {
text-align: center;
}
Ketinggian Garisan dan Margin
Ketinggian baris parameter: Nilai angka atau peratusan saiz fon semasa.
Jidar parameter: Nilai ukuran, seperti piksel(px), unit em(em), unit rem(rem), dsb.
p {
line-height: 1.5;
margin-bottom: 10px;
}
Reka Letak Teks Berbilang Lajur
Parameter: Integer positif atau "auto"(default).
.container {
column-count: 2;
}
Perubahan Warna Teks pada Tuding
Tiada parameter khusus, hanya gunakan pseudo-class :hover.
a:hover {
color: red;
}
Perubahan Warna Teks pada Keadaan(aktif, dilawati)
Tiada parameter khusus, hanya gunakan kelas pseudo :active dan :visited.
a:visited {
color: purple;
}
Kami berharap penjelasan dan contoh di atas telah membantu anda memahami cara menggunakan dan menyesuaikan sifat pemformatan teks dalam CSS untuk mencipta antara muka teks yang menarik dan menarik secara visual di tapak web anda.