Tentang Link CSS

Semua pelajari dalam pelajaran sebelumnya Anda dapat mengajukan permohonan untuk referensi / link (seperti mengubah font, warna, garis bawah dan sebagainya). Baru adalah bahwa dalam CSS, sifat ini dapat didefinisikan secara berbeda, tergantung pada sudah mengunjungi link, apakah itu aktif, apakah pointer mouse di atas link. Hal ini memungkinkan Anda untuk menambahkan efek menarik pada situs Anda. Untuk tujuan ini, pseudo disebut-kelas.

Apakah semu?

Pseudo-class memungkinkan Anda untuk mengambil berbagai mempertimbangkan kondisi atau peristiwa dalam menentukan sifat-sifat dari tag-HTM.

Pertimbangkan contoh. Seperti yang Anda ketahui, link yang ditentukan dalam <a> tag HTML. Pada CSS, kita juga dapat menggunakan 'a' sebagai selector:

a {
color: blue;
}

Link dapat memiliki negara bagian yang berbeda. Sebagai contoh, ia telah mengunjungi / visited atau tidak. Anda dapat menggunakan pseudo-kelas untuk memungkinkan gaya yang berbeda dari link dikunjungi dan belum dikunjungi.

a: link {
color: blue;
}

a: visited {
color: red;
}

Gunakan :
a: link dan a: visited untuk dan link yang belum dikunjungi, masing-masing. Link Aktif memiliki pseudo a: active, dan a: hover, saat pointer -pada link.

Kami menganggap masing-masing empat pseudo-on contoh dan penjelasan.

Pseudo-class: link

Pseudo-class : link yang digunakan untuk merujuk pada halaman yang pengguna tidak dikunjungi.

Dalam kode contoh link yang belum dikunjungi - biru.

a: link {
color: # 6699CC;
}

Pseudo: visited

Pseudo : visited digunakan untuk merujuk pada halaman yang telah dikunjungi pengguna. Dalam kode contoh mengunjungi link - ungu.

a: visited {
color: # 660099;
}

Pseudo-class: active

Pseudo-class : active digunakan untuk link aktif.

Dalam contoh tersebut, link aktif memiliki latar belakang kuning.

a: active {
background-color: # FFFF00;
}

Pseudo: hover

Pseudo-class : hover digunakan untuk menghubungkan dimana pointer mouse.

Hal ini dapat digunakan untuk menciptakan efek menarik. Sebagai contoh, jika kita ingin menghubungkan berubah oranye dan miring ketika melewati pointer atas mereka, kami CSS akan terlihat seperti:

a: hover {
color: orange;
font-style: italic;
}

Contoh 1: Pengaruh dalam mencari pointer di atas link

Pengaruh pointer mouse di atas link sudah menjadi tempat umum. Kami mempertimbangkan beberapa tambahan contoh untuk pseudo : hover.

Contoh 1a: Jarak antara huruf

Seperti yang Anda ingat dari Pelajaran 5, jarak antara karakter dapat mengatur properti letter-spacing. Hal ini dapat berlaku untuk link:

a: hover {
letter-spacing: 10px;
font-weight: bold;
color: red;
}

Contoh 1b: UPPERCASE dan lowercase
Dalam Bab 5 kita dianggap sebagai milik text-transform, yang dapat menghidupkan karakter dengan huruf besar untuk huruf kecil.

Hal ini juga dapat digunakan untuk menciptakan efek pada link di bawah ini:

a: hover {
text-transform: uppercase;
font-weight: bold;
color: blue;
background-color: yellow;
}

Kedua contoh ini menunjukkan kemungkinan hampir tak terbatas menggabungkan sifat yang berbeda. Anda dapat membuat sendiri efek sendiri - mencobanya!

Contoh 2: Menghapus menggarisbawahi links

Pertanyaan umum adalah - cara menghapus garis bawah dari link?

Anda harus menentukan apakah Anda ingin menghapus menggarisbawahi, karena dapat secara signifikan mengurangi penggunaan situs Anda. Orang-orang digunakan untuk melihat pada halaman link biru bergaris bawah dan tahu bahwa ia perlu untuk mengklik. Bahkan ibu saya tahu itu! Jika Anda menghapus bagian bawah dan mengubah warna link, kemungkinan bahwa hal ini akan membingungkan pengguna dan mereka tidak memiliki akses ke seluruh isi situs Anda.

Sebenarnya menghapus garis bawah dari link sangat sederhana. Seperti yang Anda ingat dari pelajaran 5, property text-decoration dapat digunakan untuk menentukan teks garis bawah. Untuk menghapus garis bawah hanya mengatur text-decoration - none.

a {
text-decoration: none;
}

Atau, Anda juga dapat mengatur text-decoration, bersama dengan sifat lain, untuk semua empat kelas pseudo.

a: link {
color: blue;
text-decoration: none;
}

a: visited {
color: purple;
text-decoration: none;
}

a: active {
background-color: kuning;
text-decoration: none;
}

a: hover {
color: merah;
text-decoration: none;
}