CSS: Sesuaikan pautan web berwarna-warni underlines_CSS/HTML

CSS sendiri tidak secara langsung menyediakan fungsi menukar garis bawah pautan HTML, tetapi selagi kita menggunakan beberapa teknik, kita masih boleh menjadikan garis bawah pautan web yang membosankan menjadi berwarna-warni.

1. Prinsip asas

Pertama sekali, langkah pertama untuk menyesuaikan garis bawah pautan HTML ialah membuat grafik Ulang grafik ini dalam arah mendatar untuk membentuk kesan garis bawah. Jika anda ingin menunjukkan latar belakang halaman web di belakang garis bawah, anda boleh menggunakan grafik .gif yang telus.

Kedua, jika ketinggian grafik garis bawah adalah besar, ketinggian teks mesti dinaikkan dengan sewajarnya supaya terdapat ruang yang lebih besar antara bahagian bawah satu baris teks dan bahagian atas baris teks seterusnya, seperti sebagai p { garis-tinggi: 1.5;

Contoh garis bawah pautan tersuai

Ketiga, untuk memaparkan garis bawah tersuai, garis bawah lalai mesti disembunyikan, iaitu { text-decoration: none }.

Keempat, tetapkan grafik garis bawah untuk elemen pautan dan bina garis bawah tersuai. Dengan mengandaikan bahawa grafik garis bawah ialah underline.gif, kod CSS untuk menetapkan grafik garis bawah ialah { background-image: url(underline.gif }.

Kelima, kita perlu membuat grafik garis bawah muncul berulang kali dalam arah mendatar, tetapi bukan dalam arah menegak, jika tidak, ia akan tersembunyi di belakang teks. Kod yang memerlukan garis bawah untuk mengulang hanya dalam arah mendatar ialah: a { background-repeat: repeat-x }.

Keenam, untuk memastikan grafik muncul di bawah teks pautan (tanpa mengira saiz fon), gunakan atribut kedudukan latar belakang untuk meletakkan grafik di bahagian bawah elemen pautan. Untuk garis bawah grafik seperti anak panah, anda juga mungkin ingin mempertimbangkan penjajaran mendatar grafik. Katakan anda ingin meletakkan grafik garis bawah di sudut kanan bawah, kod CSS ialah: a { background-position: 100% 100% }.

Ketujuh, untuk meninggalkan ruang untuk grafik tersuai di bawah teks pautan, ruang putih yang sesuai mesti ditambah. Kedudukan khusus grafik garis bawah berbanding dengan teks pautan adalah berkaitan dengan saiz teks, tetapi secara amnya, anda boleh terlebih dahulu membuat jidar bawah sama dengan ketinggian grafik garis bawah, dan kemudian melaraskannya jika perlu. Contohnya: a { padding-bottom: 4px }.

Kelapan, memandangkan grafik garis bawah diletakkan di bahagian bawah elemen pautan, ia mesti dipastikan bahawa pautan tidak putus (jika pautan dibenarkan menjangkau berbilang baris, hanya teks pautan dalam baris berikut akan mempunyai garis bawah tersuai). Gunakan atribut ruang putih CSS untuk menghalang teks pautan daripada dibalut, iaitu { white-space: nowrap }.

Ringkasnya, contoh lengkap mentakrifkan atribut gaya CSS untuk elemen pautan adalah seperti berikut:

　a {
' hiasan teks: tiada; ' latar belakang: url(garis bawah.gif) ulang-x 100%;
' padding-bawah: 4px; ' ruang putih: nowrap; , }


Jika anda mahu garis bawah tersuai muncul hanya apabila tetikus melayang, cuma tukar atribut latar belakang CSS yang asalnya ditetapkan terus pada elemen pautan ke:hover, sebagai contoh:

　a {

' hiasan teks: tiada;

' padding-bawah: 4px; ' ruang putih: nowrap; , }

a:tuding {
' latar belakang: url(garis bawah.gif) ulang-x 100% 100%;
, }

2. Penghayatan contoh

Katakan terdapat dua garis bawah grafik pepenjuru.gif (garisan riak) dan bunga.gif (bunga). Berikut ialah contoh lengkap menetapkan dua jenis garis bawah:

Contoh garis bawah pautan tersuai

Kod sumber halaman web adalah seperti berikut:
, Nota: diagonal.gif dan flower.gif telah disalin ke direktori yang sama di mana halaman web berada.

　

,

,

　
,

　

　

Contoh:

,

garis bawah statik riak,
, Garisan riak yang muncul apabila tetikus di atas.

,

garis bawah statik bunga,
, Garis bawah bunga yang muncul apabila tetikus di atas.

　
,