Pautan sangat umum di laman web, tetapi banyak pereka web tidak menyadari kuasa yang mereka miliki dengan CSS untuk memanipulasi dan mengurus pautan mereka dengan berkesan. Anda boleh menentukan pautan dengan lawatan, hover, dan keadaan aktif. Anda juga boleh bekerja dengan sempadan dan latar belakang untuk memberikan link anda lebih pizzaz atau menjadikannya kelihatan seperti butang atau bahkan imej.
Kebanyakan pereka web bermula dengan menentukan gaya pada "a" tag:
a {color: red; }Ini akan menyusun semua aspek pautan (hover, visited, dan active). Untuk gaya setiap bahagian secara berasingan, anda mesti menggunakan pautan pseudo-kelas.
Link Pseudo-Classes
Terdapat empat jenis asas pautan pseudo-kelas yang anda boleh menentukan:
- : pautan - ini adalah gaya lalai untuk pautan itu
- : dikunjungi - selepas pautan telah diklik
- : hover - sebagai tetikus bersedia pada pautan (pra-klik)
- : aktif - betul kerana pautan sedang diklik
Untuk menentukan pautan pseudo-kelas, gunakannya dengan tag dalam pemilih CSS anda. Jadi, untuk menukar warna yang dilawati semua pautan anda kepada kelabu, tulis:
a: melawat {color: grey; }Jika anda gaya satu pautan pseudo-kelas, ia adalah idea yang baik untuk gaya mereka semua. Dengan cara itu, anda tidak akan terkejut dengan keputusan luaran. Jadi, jika anda hanya mahu mengubah warna yang dilawati ke kelabu, sementara semua pseudo-sifat link anda tetap hitam, anda akan menulis:
a: link, a: hover, a: active {color: black; } a: melawat {color: grey; }Tukar Warna Pautan
Cara yang paling popular untuk pautan gaya adalah untuk menukar warna apabila tetikus memandangnya:
a {color: # 00f; } a: hover {color: # 0f0; }Tetapi jangan lupa bahawa anda boleh menjejaskan cara pautan kelihatan seperti mereka mengklik padanya dengan: harta aktif:
a {color: # 00f; } a: active {color: # f00; }Atau bagaimana pautan itu kelihatan setelah anda melawatnya dengan: harta yang dikunjungi:
a {color: # 00f; } a: visited {color: # f0f; }Untuk meletakkan semuanya bersama:
a {color: # 00f; } a: visited {color: # f0f; } a: hover {color: # 0f0; } a: active {color: # f00; }Letakkan Latar Belakang di Pautan untuk Tambah Ikon atau Peluru
Anda boleh meletakkan latar belakang pada pautan seperti dalam artikel Latar Belakang Bergaya, tetapi dengan bermain dengan latar belakang sedikit, anda boleh membuat pautan yang mempunyai ikon yang berkaitan. Pilih ikon yang kecil, sekitar 15px dengan 15px, kecuali teks anda lebih besar. Letakkan latar belakang ke satu sisi pautan dan tetapkan pilihan ulangi untuk tidak ulangi. Kemudian padd pautan supaya teks dalam pautan dialihkan cukup jauh ke kiri atau kanan untuk melihat ikon.
a {padding: 0 2px 1px 15px; latar belakang: #fff url (ball.gif) left center no-repeat; warna: # c00; }Sebaik sahaja anda mempunyai ikon anda, anda boleh menetapkan imej yang berbeza seperti ikon hover anda, aktif, dan dikunjungi untuk membuat perubahan link:
a {padding: 0 2px 1px 15px; latar belakang: #fff url (ball.gif) left center no-repeat; warna: # c00; } a: hover {background: #fff url (ball2.gif) left center no-repeat; } a: active {background: #fff url (ball3.gif) left center no-repeat; }Buat Pautan Anda Suka Butang
Butang sangat popular, tetapi sehingga CSS datang, anda perlu membuat butang menggunakan imej , yang menjadikan laman anda lebih lama untuk dimuat. Nasib baik, terdapat gaya sempadan yang boleh membantu anda membuat kesan seperti butang dengan mudah dengan CSS.
a {border: 4px startset; padding: 2px; teks-hiasan: tiada; } a: active {border: 4px inset; }Perhatikan, apabila anda meletakkan warna pada gaya permulaan dan inset, pelayar tidak semestinya memberikannya seperti yang anda harapkan. Jadi, inilah butang pelindung dengan sempadan berwarna:
a {border-style: solid; lebar sempadan: 1px 4px 4px 1px; teks-hiasan: tiada; padding: 4px; warna sempadan: # 69f # 00f # 00f # 69f; }Dan anda boleh menjejaskan gaya hover dan aktif pautan butang juga, hanya gunakan kelas pseudo:
a: link {border-style: solid; lebar sempadan: 1px 4px 4px 1px; teks-hiasan: tiada; padding: 4px; warna sempadan: # 69f # 00f # 00f # 69f; } a: hover {border color: #ccc; }