Tautan sangat umum di laman web, tetapi banyak perancang web tidak menyadari kekuatan yang mereka miliki dengan CSS untuk memanipulasi dan mengelola tautan mereka secara efektif. Anda dapat menentukan tautan dengan status dikunjungi, kursor, dan aktif. Anda juga dapat bekerja dengan batas dan latar belakang untuk memberikan tautan Anda lebih banyak pizzaz atau membuatnya terlihat seperti tombol atau bahkan gambar.
Sebagian besar desainer web memulai dengan menentukan gaya pada tag "a":
sebuah {warna: merah; }Ini akan menata semua aspek tautan (arahkan, dikunjungi, dan aktif). Untuk menata setiap bagian secara terpisah, Anda harus menggunakan kelas pseudo tautan.
Tautkan Pseudo-Classes
Ada empat tipe dasar pseudo-class tautan yang dapat Anda definisikan:
- : tautan - ini adalah gaya default untuk tautan
- : dikunjungi - setelah tautan diklik
- : arahkan kursor - saat mouse berada di atas tautan (klik sebelumnya)
- : aktif - tepat saat tautan diklik
Untuk menentukan kelas pseudo tautan, gunakan dengan tag di pemilih CSS Anda. Jadi, untuk mengubah warna yang dikunjungi dari semua tautan ke abu-abu, tulis:
a: dikunjungi {color: gray; }Jika Anda menata satu pseudo-class tautan, itu ide yang bagus untuk menata semuanya. Dengan begitu Anda tidak akan terkejut dengan hasil yang asing. Jadi jika Anda hanya ingin mengubah warna yang dikunjungi menjadi abu-abu, sementara semua properti pseudo-link Anda tetap hitam, Anda akan menulis:
a: tautan, a: hover, a: active {color: black; } a: dikunjungi {color: gray; }Ubah Warna Tautan
Cara paling populer untuk menautkan tautan adalah mengubah warna ketika mouse melayang di atasnya:
{warna: # 00f; } a: hover {color: # 0f0; }Tetapi jangan lupa bahwa Anda dapat memengaruhi bagaimana tautan terlihat saat mereka mengekliknya dengan: properti aktif:
{warna: # 00f; } a: aktif {color: # f00; }Atau bagaimana tautan terlihat setelah Anda mengunjunginya dengan: properti yang dikunjungi:
{warna: # 00f; } a: dikunjungi {color: # f0f; }Untuk menggabungkan semuanya:
{warna: # 00f; } a: dikunjungi {color: # f0f; } a: hover {color: # 0f0; } a: aktif {color: # f00; }Taruh Latar Belakang pada Tautan untuk Menambahkan Ikon atau Peluru
Anda dapat meletakkan latar belakang pada tautan seperti pada artikel Latar Belakang Bergaya, tetapi dengan sedikit memutar latar belakang, Anda dapat membuat tautan yang memiliki ikon terkait. Pilih ikon yang kecil, sekitar 15px kali 15px, kecuali teks Anda lebih besar. Tempatkan latar belakang ke satu sisi tautan dan tetapkan opsi pengulangan ke no-repeat. Kemudian, padd tautan agar teks di dalam tautan dipindahkan cukup jauh ke kiri atau kanan untuk melihat ikon.
{padding: 0 2px 1px 15px; latar belakang: #fff url (ball.gif) left center no-repeat; warna: # c00; }Setelah mendapatkan ikon Anda, Anda dapat menetapkan gambar yang berbeda sebagai ikon mengambang, aktif, dan dikunjungi untuk membuat perubahan tautan:
{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; }Jadikan Tautan Anda Terlihat Seperti Tombol
Tombol sangat populer, tetapi sampai CSS muncul, Anda harus membuat tombol menggunakan gambar , yang membuat halaman Anda memuat lebih lama. Untungnya, ada gaya perbatasan yang dapat membantu Anda membuat efek mirip tombol dengan mudah menggunakan CSS.
sebuah {border: 4px awal; padding: 2px; teks-dekorasi: tidak ada; } a: aktif {border: 4px inset; }Perhatikan, ketika Anda menempatkan warna pada awal dan gaya inset, browser tidak cenderung membuat mereka seperti yang Anda harapkan. Jadi, inilah tombol pelamun dengan perbatasan berwarna:
sebuah {border-style: solid; lebar pembatas: 1px 4px 4px 1px; teks-dekorasi: tidak ada; padding: 4px; warna pembatas: # 69f # 00f # 00f # 69f; }Dan Anda dapat memengaruhi gaya hover dan gaya aktif dari tautan tombol juga, cukup gunakan kelas pseudo tersebut:
a: tautan {border-style: solid; lebar pembatas: 1px 4px 4px 1px; teks-dekorasi: tidak ada; padding: 4px; warna pembatas: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }