Berikut ini adalah berbagai contoh cara yang dapat anda gunakan untuk membentuk style dari link pada halaman anda.
- a:link {color:#1e90ff;}
- a:visited {color:#0069d1;}
- a:hover {color:#ffa500;}
- a:focus {color:#b37400;}
- a:active {color:#00b300;}
Sekarang mari kita lihat apa fungsi masing-masing pada setiap style link di atas.
a:link {color:#1e90ff;}
Berfungsi sebagai penetapan warna asli link atau ketika tidak terjadi apa-apa pada link.
a:visited {color:#0069d1;}
Berfungsi sebagai penetapan perubahan warna link ketika pengguna sudah mengunjungi url/alamat yang ada di dalam link.
a:hover {color:#ffa500;}
Berfungsi sebagi penetapan perubahan warna link ketika pengguna meletakkan pointer mouse di atas link.
a:focus {color:#b37400;}
Fungsinya hampir sama dengan hover, tapi ini ditujukan untuk pengguna yang tidak menggunakan mouse. Misalnya seperti tabbing (penggunaan tombol keyboard) atau touch.
a:active {color:#00b300;}
Berfungsi sebagai penetapan link saat ditekan.
Untuk lebih jelasnya silakan perhatikan perubahan-perubahan pada link di bawah ini.
Pseudo Classes
Anda dapat mengatur link yang terdapat di berbagai bagian dari halaman web anda menjadi warna yang berbeda-beda dengan menggunakan Pseudo Class ini. Misalnya link pada #content dan #navigation, anda dapat melakukannya seperti berikut ini.
#content a:link {color:#1e90ff;}
#content a:visited {color:#0069d1;}
#content a:hover {color:#ffa500;}
#content a:focus {color:#b37400;}
#content a:active {color:#00b300;}
#navigation a:link {color:#ffa500;}
#navigation a:visited {color:#b37400;}
#navigation a:hover {color:#1e90ff;}
#navigation a:focus {color:#0069d1;}
#navigation a:active {color:#00ff00;}
Untuk penulisan pada file (X)HTML bisa seperti berikut ini.
#stupidJob
Tidak ada komentar:
Posting Komentar