Rumah >hujung hadapan web >tutorial css >Sifat manakah yang digunakan untuk menggariskan, garis atas dan teks coretan menggunakan CSS?
Sifat manakah yang digunakan untuk menggariskan, garis atas dan teks coretan menggunakan CSS?
- PHPzke hadapan
- 2023-09-07 18:37:101778semak imbas
Dalam CSS, sifat "penghiasan teks" digunakan untuk menambah garis bawah, garis atas dan coretan pada teks.
Teks garis bawah bermaksud melukis garisan di bawah teks, dan teks garis bawah bermaksud melukis garisan di atas teks. Memadam teks bermakna melukis garisan di atas teks untuk menunjukkan bahawa teks telah dipadamkan.
Dalam tutorial ini, kita akan belajar untuk menggayakan teks yang berbeza menggunakan nilai yang berbeza dari sifat CSS hiasan teks.
Tatabahasa
text-decoration: style decoration color thickness;
Nilai
Gaya——Mewakili gaya garisan hiasan, seperti garisan pepejal, garisan putus-putus, garisan beralun, dll.
Hiasan - Ia boleh menghiasi teks dengan nilai "garis bawah", "garis atas" dan "garis bawah".
Warna - Tetapkan warna garisan hiasan.
Ketebalan——Digunakan untuk menetapkan ketebalan garisan hiasan.
Contoh
Dalam contoh di bawah, kami menggunakan sifat CSS "penghiasan teks" untuk menghiasi teks. Kami menetapkan gaya garisan "pepejal", hiasan "garis bawah" merah dan berat 5px, yang boleh diperhatikan oleh pengguna dalam output.
<html>
<head>
<style>
.text {
font-size: 1.2rem;
text-decoration: solid underline red 5px;
}
</style>
</head>
<body>
<h3> Setting the underline to the text using the 'text-decoration' property in CSS </h3>
<div class = "text">
This is a text with an underline.
</div>
</body>
</html>
Contoh
Dalam contoh di bawah, kami telah menghiasi teks dengan garis atas biru. Dalam output, pengguna boleh melihat garis biru di atas teks.
<html>
<head>
<style>
.text {
font-size: 1.2rem;
text-decoration: wavy overline blue 5px;
}
</style>
</head>
<body>
<h3> Setting the <i> overline to the text </i> using the 'textdecoration' property in CSS </h3>
<div class = "text">
This is a text with an overline.
</div>
</body>
</html>
Contoh
Dalam contoh ini, kami menggunakan sifat CSS "hiasan teks" dan nilai "baris melalui" untuk memadamkan teks. Dalam output, pengguna boleh memerhatikan baris di atas teks. Dengan cara ini kita boleh menunjukkan bahawa terdapat ralat dalam teks tanpa memadamkannya.
<html>
<head>
<style>
.text {
font-size: 2rem;
text-decoration: dotted line-through green 5px;
}
</style>
</head>
<body>
<h3> Setting the <i> strickthrough to the text </i> using the 'textdecoration' property in CSS </h3>
<div class = "text">
This is a text with a strikethrough.
</div>
</body>
</html>
Contoh
Dalam contoh ini, kami telah mencipta tiga elemen div berbeza dengan teks berbeza. Kami menggunakan gaya hiasan yang berbeza untuk teks setiap elemen div. Dalam output, pengguna boleh melihat perbezaan antara gaya hiasan teks "garis bawah", "garis atas" dan "benang".
<html>
<head>
<style>
.underline {
color: grey;
text-decoration: solid underline yellow 2px;
font-size: 1.5rem;
}
.overline {
text-decoration: solid overline yellow 3px;
font-size: 1.5rem;
}
.strikethrough {
text-decoration: solid line-through yellow 2px;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h3> Setting the strikethrough, underline, and overline to the text using the 'text-decoration' property in CSS </h3>
<div class = "underline"> underline </div>
<div class = "overline"> overline </div>
<div class = "strikethrough"> strike through </div>
</body>
</html>
Kesimpulan
Tutorial ini mengajar pengguna cara menghias teks menggunakan sifat CSS "penghiasan teks". Pengguna boleh menghiasi teks secara berbeza menggunakan nilai yang berbeza mengikut keperluan.
Atas ialah kandungan terperinci Sifat manakah yang digunakan untuk menggariskan, garis atas dan teks coretan menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!