Hiasan Teks HTML-html tutorial-php.cn

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;

Salin selepas log masuk

Penjelasan: Ia tidak akan memberikan sebarang hiasan kepada teks. Ia sama seperti teks biasa.

2. Garis atas

Sintaks:

text-decoration: overline;

Salin selepas log masuk

Penjelasan: Ia akan memberikan garis di atas teks dengan saiz 1px.

3. Line-through

Sintaks:

text-decoration: line-through;

Salin selepas log masuk

Penjelasan: Ia akan memberikan garis dari tengah teks dengan saiz 1px.

4. Gariskan

Sintaks:

text-decoration: underline;

Salin selepas log masuk

Penjelasan: Ia akan memberikan garis di bahagian bawah teks dengan saiz 1px.

5. Kejap

Sintaks:

text-decoration: blink;

Salin selepas log masuk

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;

Salin selepas log masuk

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>

Salin selepas log masuk

Output:

Hiasan Teks HTML

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>

Salin selepas log masuk

Output:

Hiasan Teks HTML

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>

Salin selepas log masuk

Output:

Hiasan Teks HTML

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>

Salin selepas log masuk

Output:

Hiasan Teks HTML

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>

Salin selepas log masuk

Output:

Hiasan Teks HTML

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.