Tautan adalah koneksi dari satu halaman web ke halaman web lainnya, dan CSS dapat menata tautan dengan berbagai cara melalui atribut yang berbeda.
1. Gaya tautan
Tautan adalah bagian penting dari sebuah situs web. Anda dapat melihat banyak tautan di hampir setiap halaman web. Desain gaya tautan yang masuk akal dapat menambah poin pada tampilan halaman web. Tautan memiliki empat status berbeda, yaitu tautan, dikunjungi, aktif, dan arahkan kursor. Anda dapat mengatur gaya berbeda untuk empat status tautan melalui penyeleksi kelas semu berikut:
(1) a: link => Ini adalah link normal yang belum dikunjungi.
(2) a:visited => Ini adalah tautan yang telah dikunjungi pengguna setidaknya sekali
(3) a:hover => ketika mouse diarahkan ke atasnya, itu adalah sebuah link
(4) a: aktif => Ini adalah link yang baru saja diklik.
tata bahasa:
a:tautan{warna:nama_warna;}color_name bisa dalam format apa pun, seperti nama warna (hijau), nilai heksadesimal (#5570f0), atau nilai RGB - rgb(25, 255, 2). Ada status lain "a:focus" yang digunakan untuk fokus ketika pengguna menggunakan tombol tab untuk menelusuri tautan.
Nilai default untuk tautan:
(1) Secara default, tautan yang dibuat digarisbawahi.
(2) Saat mouse diarahkan ke link, ikon tangan akan berubah.
(3) Tautan normal/belum dikunjungi berwarna biru.
(4) Tautan yang dikunjungi berwarna ungu.
(5 ) Tautan aktif berwarna merah.
(6) Ketika sebuah tautan terfokus, ia memiliki garis besar di sekelilingnya.
Misalnya:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Tautan CSS</title><style>p{font-size:25px;text-align:center;}</style></head ><body><p><ahref=https://www.dotcpp.com/>Tautan sederhana</a></p></body></html>Hasil yang ditampilkan adalah sebagai berikut:
2. Bagaimana cara mengatur gaya tautan dengan CSS?
Berikut adalah beberapa properti CSS dasar untuk tautan:
(1) atribut warna
Properti CSS ini digunakan untuk mengubah warna teks tautan.
tata bahasa:
a{warna:nama_warna;}(2) atribut font-family
Properti ini digunakan untuk mengubah jenis font link menggunakan properti font-family.
tata bahasa:
a{font-keluarga:nama keluarga;}(3) atribut dekorasi teks
Atribut ini terutama digunakan untuk menghapus atau menambahkan garis bawah dan modifikasi lainnya pada tautan.
tata bahasa:
a{dekorasi teks: tidak ada;}Contoh:
<style>/*Setel ukuran font untuk meningkatkan visibilitas*/p{font-size:2rem;}/*Hapus garis bawah menggunakan atribut text-decoration*/a{text-decoration:none;}/*Anda juga dapat menggunakan gaya berikut, tambahkan garis bawah dekorasi teks: garis bawah;*/</style>(4) atribut warna latar belakang
Properti ini digunakan untuk mengatur warna latar belakang link.
tata bahasa:
a{warna-latar belakang:nama_warna;}