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

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

Gunakan kata - kata yang sopan untuk mengomentar dan mengkritik.

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