Belajar css mengatur hyperlink

belajar css

Pada CSS Anda bisa mengatur style untuk link menjadi lebih interaktif. Salah satunya menggunakan anchor pseudo-classes. Sebuah link memiliki empat state yang berbeda, yaitu: linkvisitedactive dan hover. Keempat state ini dapat ditata secara berbeda melalui property CSS atau dengan anchor pseudo-classes yang bisa Anda gunakan untuk menentukan gaya elemen <a> .

  • a: link – Normal, link yang belum dikunjungi
  • a: visited – Link pengguna yang telah dikunjungi
  • a: hover – Link ketika mouse pengguna di atasnya
  • a: active – Link saat itu diklik

Contoh:

Editor Online
  1. a:link {
  2. color: red;
  3. }
  4. a:visited {
  5. color: green;
  6. }
  7. a:hover {
  8. color: blue;
  9. }
  10. a:active {
  11. color: orange;
  12. }

Arahkan kursor mouse diatas link dan coba klik link tersebut agar Anda bisa melihat perubahannya.

Urutan kelas semua harus berurutan seperti: :link:visited:hover:active agar ini bekerja dengan baik.

Di semua browser web utama, tautan pada halaman web memiliki garis bawah dan menggunakan warna tautan default browser, jika Anda tidak menetapkan gaya khusus untuk mereka. Misalnya, warna tautan default di peramban web berbasis Gecko seperti Firefox adalah biru untuk belum dikunjungi, ungu untuk dikunjungi dan merah untuk tautan aktif.

Anda juga bisa memainkan hyperlink dengan style seperti tombol. Ini mendesain sebuah CSS untuk menampilkan link sebagai visual kotak atau tombol, yang tentunya bisa diklik.

Contoh:

Editor Online
  1. a:link, a:visited {
  2. background-color: orange;
  3. padding: 15px 25px;
  4. text-align: center;
  5. text-decoration: none;
  6. display: inline-block;
  7. }
  8. a:hover, a:active {
  9. background-color: red;
  10. }

Anda juga bisa memainkan hyperlink dengan mengkombinasikan pada property text-decoration.

Contoh:

Editor Online
  1. a:link {
  2. text-decoration: none;
  3. }
  4. a:visited {
  5. text-decoration: none;
  6. }
  7. a:hover {
  8. text-decoration: underline;
  9. }
  10. a:active {
  11. text-decoration: underline;
  12. }

Daftar anchor pseudo-classes

Anchor Pseudo-classesKegunaanya
a: linkNormal, link yang belum dikunjungi
a: visitedLink pengguna yang telah dikunjungi
a: hoverLink ketika mouse pengguna di atasnya
a: activeLink saat itu diklik

Leave a Reply

Your email address will not be published. Required fields are marked *