Blog ini mencakup area konten di bawah ini:
- Bagaimana Cara Menerapkan Dekorasi Teks dengan Tailwind Hover, Focus, dan Active States?
- Menerapkan Dekorasi Teks dengan Status “hover”.
- Menerapkan Dekorasi Teks dengan Status “fokus”.
- Menerapkan Dekorasi Teks dengan Keadaan “aktif”.
Bagaimana Cara Menerapkan Dekorasi Teks dengan Tailwind Hover, Focus, dan Active States?
Teks dapat didekorasi melalui “ dekorasi teks ' Properti. Properti ini dapat diterapkan dengan berbagai status pengubah seperti “ melayang ', ' fokus ' Dan ' aktif ” untuk menghias teks berdasarkan tindakan pengguna yang sesuai.
Contoh 1: Menerapkan Dekorasi Teks dengan Status “hover”.
Contoh ini menerapkan “ dekorasi teks ” properti sedemikian rupa sehingga tidak digarisbawahi secara default tetapi menjadi digarisbawahi saat mouse diarahkan:
< 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 >
< area teks kelas = 'tanpa garis bawah arahkan kursor: garis bawah' > Ini adalah CSS Tailwind < / area teks >
< / tubuh >
< / html >
Menurut baris kode ini, tentukan jalur CDN di dalam “
Keluaran
Seperti yang terlihat, “ Elemen ” berhasil digarisbawahi saat mouse diarahkan.
Contoh 2: Menerapkan Dekorasi Teks dengan Status “fokus”.
Blok kode berikut menghiasi teks dengan menyertakan “ fokus ' negara. Ini menggarisbawahi teks (tidak digarisbawahi secara default) pada elemen yang difokuskan melalui “ tab ” kunci:
< 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 >
< area teks kelas = 'fokus tanpa garis bawah: garis bawah' >Ini adalah CSS Tailwind< / area teks >
< / tubuh >
< / html >
Menurut kode ini:
- Demikian pula, sertakan jalur CDN dan sertakan “ ” elemen.
- Setelah itu, gunakan “ dekorasi teks ” properti yang membuat teks tidak digarisbawahi secara default.
- Yang terkait “ fokus ” menyatakan kemudian menggarisbawahi teks pada elemen yang menjadi fokus.
Keluaran
Hasil ini menandakan bahwa teks yang terkandung dalam elemen digarisbawahi saat menekan tombol “ tab ” kuncinya, yaitu memfokuskan elemen.
Contoh 3: Menerapkan Dekorasi Teks dengan Keadaan “aktif”.
Dalam contoh ini, teks dapat dihias sedemikian rupa sehingga “ garis-melalui ” Properti diterapkan padanya saat elemen aktif:
< 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 >
< area teks kelas = 'tanpa garis bawah aktif: baris demi baris' >Ini adalah CSS Tailwind< / area teks >
< / tubuh >
< / html >
Dalam cuplikan kode ini, terapkan langkah-langkah yang disediakan di bawah ini:
- Ingat kembali metodologi yang dibahas untuk memasukkan jalur CDN dan “ ” elemen.
- Sekarang, terapkan hiasan teks “ tanpa garis bawah ” properti secara default dan mengalokasikan “ aktif ” nyatakan dengan “ garis-melalui ”.
- Ini secara otomatis menelusuri teks yang terkandung pada elemen yang aktif.
Keluaran
Dari keluaran ini dapat diverifikasi bahwa teks tersebut dihias sesuai dengan keadaan yang diterapkan dengan tepat.
Kesimpulan
Teks dapat didekorasi melalui “ dekorasi teks ' Properti. Properti ini dapat diterapkan dengan “ melayang ', ' fokus ' Dan ' aktif ” pengubah menyatakan untuk menghiasi teks saat mouse diarahkan, elemen yang sedang difokuskan, atau elemen yang aktif.