Fungsi text-decoration-style (Property CSS)

BERANDA > FUNGSI DAN KEGUNAAN PROPERTI CSS > Fungsi text-decoration-style (Property CSS)


A. Pengenalan text-decoration-style (Property CSS)


CSS text-decoration-style merupakan properti yang digunakan untuk menambahkan dekorasi garis bawah, atas, atau coret dengan gaya garis yang berbeda.

B. Contoh Penggunaan text-decoration-style (Property CSS)


• Penggunaan text-decoration-style

Contoh:


<style>

.kelas {
text-decoration: overline;
text-decoration-style: solid;
}

</style>

<div class="kelas">Contoh kalimat yang diberi text decoration dengan garis biasa.</div>


Hasil:


Contoh kalimat yang diberi text decoration dengan garis biasa.


C. Contoh Penerapan text-decoration-style


• Contoh Nomor 1


<p style="text-decoration: line-through; text-decoration-style: wavy;">Kalimat dicoret dengan gaya bergelombang.</p>


Hasil:

Kalimat dicoret dengan gaya bergelombang.


• Contoh Nomor 2


<style>

.KodeKelas {
text-decoration: underline;
text-decoration-style: double;
}

</style>

<div class="KodeKelas">Garis bawah kalimat dengan dua garis.</div>


Hasil:


Garis bawah kalimat dengan dua garis.


• Contoh Nomor 3


<style>

.KodeKelas2 {
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: blue;
}

</style>

<div class="KodeKelas2">Garis bawah kalimat dengan garis gelombang dan bewarna biru.</div>


Hasil:


Garis bawah kalimat dengan garis gelombang dan bewarna biru.

Tidak ada komentar:

Posting Komentar

Gunakan kata - kata yang sopan untuk mengomentar dan mengkritik.

Jangan lupa memberikan saran dan laporan bila terdapat sesuatu yang ingin kamu sampaikan.

Katakan bila ingin ada materi atau pembahasan yang ingin ditambahkan atau yang kurang lengkap.