Situs web yang menarik bagi pengguna sering kali memerlukan beberapa metodologi gaya untuk ditambahkan dari waktu ke waktu. Dalam situasi seperti itu, penataan gaya dekorasi teks dapat dilakukan dengan berbagai cara berdasarkan nilai yang berbeda sesuai kebutuhan untuk membuat situs menonjol.
Blog ini akan mencakup area konten berikut:
Bagaimana Cara Mengatur Gaya Dekorasi Teks di Tailwind CSS?
Gaya teks dapat diatur dan didekorasi dengan bantuan “ gaya dekorasi teks ” properti yang dialokasikan dengan nilai gaya yang berbeda.
Properti Gaya Dekorasi Teks
| Kelas | Properti |
| dekorasi-solid | gaya dekorasi teks: solid; |
| dekorasi-ganda | gaya dekorasi teks: ganda; |
| dekorasi-bergelombang | gaya dekorasi teks: bergelombang; |
| dekorasi-putus-putus | gaya dekorasi teks: putus-putus; |
| bertitik dekorasi | gaya dekorasi teks: putus-putus; |
Contoh: Mengatur Gaya Dekorasi Teks di Tailwind CSS
Contoh ini menggunakan “ gaya dekorasi teks ” properti dengan semua nilai untuk menata teks paragraf:
DOCTYPEhtml >< html >
< kepala >
< meta rangkaian karakter = 'utf-8' >
< meta nama = 'area pandang' isi = 'lebar=lebar perangkat, skala awal=1' >
< naskah src = 'https://cdn.tailwindcss.com' > naskah >
kepala >
< tubuh >
< div >
< P kelas = 'garis bawahi dekorasi-padat...' > Ini adalah Situs Web Linuxhint P >
< P kelas = 'garisbawahi dekorasi-ganda...' > Ini adalah Situs Web Linuxhint P >
< P kelas = 'garis bawahi hiasan bergelombang...' > Ini adalah Situs Web Linuxhint P >
< P kelas = 'garis bawahi dekorasi-putus-putus...' > Ini adalah Situs Web Linuxhint P >
< P kelas = 'garis bawahi hiasan bertitik...' > Ini adalah Situs Web Linuxhint P >
div >
tubuh >
html >
Berdasarkan kode ini, terapkan langkah-langkah berikut:
-
- Sertakan yang diberikan “ CDN ” jalur di dalam “
tag ” untuk menerapkan fungsi Tailwind. - Sekarang, buat empat paragraf menggunakan “ ” tag yang berisi “ dekorasi teks ” properti yang diberi nilai berbeda dalam setiap kasus, seperti yang dibahas.
- Hasilnya, teks digarisbawahi dengan garis padat, ganda, bergelombang, putus-putus, dan putus-putus.
- Sertakan yang diberikan “ CDN ” jalur di dalam “
Keluaran
Dari hasil ini, diverifikasi bahwa teks tersebut telah dihias sebagaimana mestinya.
Kesimpulan
Gaya teks dapat diatur dan didekorasi dengan bantuan “ gaya dekorasi teks ” properti yang dialokasikan dengan nilai gaya yang berbeda. Nilai-nilai ini meliputi padat, ganda, bergelombang, putus-putus, dan putus-putus. Blog ini membahas tentang pengaturan gaya dekorasi teks menggunakan Tailwind CSS.