CSS sendiri tidak secara langsung menyediakan fungsi untuk mengubah garis bawah link HTML, namun selama kita menggunakan beberapa teknik, kita masih bisa membuat garis bawah link web yang monoton menjadi berwarna.
1. Prinsip dasar
Pertama-tama, langkah pertama untuk mengkustomisasi garis bawah link HTML adalah dengan membuat grafik. Ulangi grafik ini dalam arah horizontal untuk membentuk efek garis bawah. Jika Anda ingin menampilkan latar belakang halaman web di belakang garis bawah, Anda dapat menggunakan grafik .gif transparan.
Kedua, jika tinggi grafik garis bawah besar maka tinggi teks harus ditambah secukupnya agar terdapat jarak yang lebih besar antara bagian bawah satu baris teks dan bagian atas baris teks berikutnya, misalnya p { tinggi garis: 1,5;
Contoh garis bawah tautan khususKetiga, untuk menampilkan garis bawah khusus, garis bawah default harus disembunyikan, yaitu { text-decoration: none }.
Keempat, atur grafik garis bawah untuk elemen tautan dan buat garis bawah khusus. Dengan asumsi grafik yang digarisbawahi adalah underline.gif, maka kode CSS untuk mengatur grafik yang digarisbawahi adalah { background-image: url(underline.gif });
Kelima, kita perlu membuat grafik garis bawah berulang dalam arah horizontal, tetapi tidak dalam arah vertikal, jika tidak maka akan tersembunyi di balik teks. Kode yang memerlukan pengulangan garis bawah hanya pada arah horizontal adalah: a { background-repeat: repeat-x }.
Keenam, untuk memastikan grafik muncul di bawah teks tautan (berapa pun ukuran fontnya), gunakan atribut background-position untuk menempatkan grafik di bagian bawah elemen tautan. Untuk grafik yang digarisbawahi seperti panah, Anda mungkin juga ingin mempertimbangkan perataan grafis secara horizontal. Misalkan Anda ingin meletakkan grafik garis bawah di pojok kanan bawah, kode CSSnya adalah: a { background-position: 100% 100% }.
Ketujuh, spasi yang sesuai harus ditambahkan untuk memberikan ruang bagi grafik khusus di bawah teks tautan. Posisi spesifik grafik garis bawah relatif terhadap teks tautan berkaitan dengan ukuran teks, namun secara umum, Anda dapat membuat margin bawah terlebih dahulu sama dengan tinggi grafik garis bawah, lalu menyesuaikannya jika perlu. Misalnya: a {padding-bawah: 4px;
Kedelapan, karena grafik garis bawah ditempatkan di bagian bawah elemen tautan, maka harus dipastikan bahwa tautan tersebut tidak putus (jika tautan diperbolehkan untuk mencakup beberapa baris, hanya teks tautan pada baris berikutnya yang akan memiliki garis bawah khusus. ). Gunakan atribut spasi putih CSS untuk mencegah teks tautan terbungkus, yaitu, { white-space: nowrap }.
Ringkasnya, contoh lengkap mendefinisikan properti gaya CSS untuk elemen tautan adalah:
A {
dekorasi teks: tidak ada;
latar belakang: url(garis bawah.gif) ulangi-x 100% 100%;
bantalan-bawah: 4px;
spasi putih: nowrap;
}
Jika ingin custom underline hanya muncul saat mouse sedang hover , ubah saja properti CSS background yang semula diset langsung pada elemen link menjadi: hover, misalnya:
A {
dekorasi teks: tidak ada;
bantalan-bawah: 4px;
spasi putih: nowrap;
}
a: arahkan kursor {
latar belakang: url(garis bawah.gif) ulangi-x 100% 100%;
}
2. Apresiasi terhadap keteladanan
Misalkan ada dua grafik yang digarisbawahi diagonal.gif (garis bergelombang) dan bunga.gif (bunga). Tinggi dan lebar yang pertama adalah 3 dan 9, dan tinggi dan lebar yang terakhir adalah 11 dan 15. Berikut contoh lengkap pengaturan dua jenis garis bawah:
Contoh garis bawah tautan khususKode sumber halaman web adalah sebagai berikut:
Catatan: diagonal.gif dan Flower.gif telah disalin ke direktori yang sama di mana halaman web berada.
<html>
<kepala>
<judul>mantan</judul>
<tipe gaya=teks/css>
a#contoh1a {
dekorasi teks: tidak ada;
latar belakang: url(diagonal.gif) ulangi-x 100% 100%;
spasi putih: nowrap;
padding-bawah: 2px;
}
a#contoh1b {
dekorasi teks: tidak ada;
spasi putih: nowrap;
padding-bawah: 2px;
}
a#contoh1b:arahkan kursor {
latar belakang: url(diagonal.gif) ulangi-x 100% 100%;
}
a#contoh2a {
dekorasi teks: tidak ada;
latar belakang: url(flower.gif) ulangi-x 100% 100%;
spasi putih: nowrap;
padding-bawah: 10px;
}
a#contoh2b {
dekorasi teks: tidak ada;
spasi putih: nowrap;
padding-bawah: 10px;
}
a#contoh2b:arahkan kursor {
latar belakang: url(flower.gif) ulangi-x 100% 100%;
}
-->
</gaya>
</kepala>
<tubuh>
<p>Contoh:</p>
<p> <a href=# id=example1a>garis bawah statis riak</a>,
<a href=# id=example1b>Garis riak yang muncul saat mouse berada di atas</a>. </p>
<p> <a href=# id=example2a>Garis bawah statis bunga</a>,
<a href=# id=example2b>Garis bawah bunga yang muncul saat mouse berada di atas</a>. </p>
</tubuh>
</html>