Rumah > Artikel > hujung hadapan web > Hiasan Teks HTML
Hiasan Teks HTML
- WBOYasal
- 2024-09-04 16:40:57417semak imbas
Hiasan teks dalam HTML digunakan untuk menghias teks dengan cara yang berbeza. text-decoration ialah sifat yang digunakan untuk hiasan teks. sifat hiasan teks memerlukan nilai garis bawah, garis atas, garis bawah, garis bawah untuk menghiasi teks dengan cara yang berbeza.
Contoh Masa Nyata: Nilai atas hiasan teks, garis bawah, baris melalui digunakan untuk menjana captcha sambil mengesahkan pengguna log masuk adalah sama ada manusia atau robot. Kerana jika garisan di atas teks tidak dapat dikenali oleh robot dengan sempurna.
Jenis:
- hiasan teks: tiada;
- teks-hiasan: atas talian;
- hiasan teks: baris;
- teks-hiasan: garis bawah;
Bagaimanakah hiasan teks berfungsi dalam HTML?
Sifat hiasan teks berfungsi berdasarkan tiada, garis atas, garisan dan garis bawah
1. Tiada
Sintaks:
text-decoration: none;
Penjelasan: Ia tidak akan memberikan sebarang hiasan kepada teks. Ia sama seperti teks biasa.
2. Garis atas
Sintaks:
text-decoration: overline;
Penjelasan: Ia akan memberikan garis di atas teks dengan saiz 1px.
3. Line-through
Sintaks:
text-decoration: line-through;
Penjelasan: Ia akan memberikan garis dari tengah teks dengan saiz 1px.
4. Gariskan
Sintaks:
text-decoration: underline;
Penjelasan: Ia akan memberikan garis di bahagian bawah teks dengan saiz 1px.
5. Kejap
Sintaks:
text-decoration: blink;
Penjelasan: Ia akan menjadikan teks berkelip dengan warna berbeza daripada kelegapan 0% hingga 100%.
Nota: Ciri kelipan penyemak imbas baru-baru ini tidak digunakan lagi. Sekarang ia tidak digunakan sama sekali.Sifat hiasan teks juga boleh membuat garis atas, garisan, garis bawah dengan gaya yang berbeza selain daripada gaya lalai seperti bertitik, beralun, pepejal, alur, dsb., dengan warna. Anda boleh melihat sintaks di bawah.
Sintaks:
text-decoration: underline dotted red;
Contoh Hiasan Teks HTML
Di bawah ialah contoh untuk hiasan teks HTML:
Contoh #1 – Tiada
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.none {
text-decoration: none;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:none</h1>
<p class="none">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in the development of back end features in Spring MVC with Hibernate. Developed importing models and logic in the Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>
Output:
Penjelasan: Seperti yang anda lihat, hiasan teks: tiada siapa yang tidak boleh memberikan sebarang hiasan baris dengan teks perenggan.
Contoh #2 – Gariskan
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.underline {
text-decoration: underline;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:underline</h1>
<p class="underline">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>
Output:
Penjelasan: Seperti yang anda lihat, hiasan teks: garis bawah memberikan baris di bawah teks.
Contoh #3 – Overline
Hiasan teks: contoh atas talian:
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.overline{
text-decoration: overline;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:overline</h1>
<p class="overline">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>
Output:
Penjelasan: Seperti yang anda lihat, hiasan teks: garis atas memberikan baris di atas teks.
Contoh #4 – Barisan
Teks-hiasan:contoh baris-melalui:
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.through {
text-decoration: line-through;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:line-through</h1>
<p class="through">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>
Output:
Penjelasan: Seperti yang anda lihat, hiasan teks: baris melalui memberikan baris dari tengah teks.
Contoh #5
Hiasan teks dengan pepejal, dua kali ganda, beralun dengan garis bawah, baris melalui, contoh garis atas:
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.p1 {
text-decoration:solid overline brown;
font-size:18px;
}
.p2 {
text-decoration:double line-through blue;
font-size:18px;
}
.p3 {
text-decoration:wavy underline red;
font-size:18px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:solid overline brown</h1>
<p class="p1">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
<h1>Demo for text-decoration:double line-through blue</h1>
<p class="p2">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
<h1>Demo for text-decoration:wavy underline red</h1>
<p class="p3">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>
Output:
Penjelasan: Seperti yang anda lihat, perenggan pertama mempunyai garis atas yang padat, perenggan kedua mempunyai dua baris dan perenggan ketiga dengan gaya hiasan teks garis bawah beralun.
Kesimpulan
Hiasan teks boleh digayakan dengan nilai sifat garis atas, garis bawah, garis melalui dan juga gaya garisan yang berbeza dengan sebarang warna.
Atas ialah kandungan terperinci Hiasan Teks HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!