CSS LINK

Penggunaan css pada fitur css link sangat bervariasi. Ada banyak fungsi pada fitur css link, kita bisa mengatur warna link, warna latar pada link, merubah warna pada saat dikunjungi ataupun warna bila link dipilih atau diklik.




Beberapa properti yang digunakan yaitu :
    * a: link - link, normal belum dikunjungi
    * a: visited - link pengguna telah mengunjungi
    * a: hover - link ketika krusor mouse di atasnya
    * a: active - link saat itu diklik

Berikut contoh-contoh Penggunaan fitur Css Link :
1. Menambahkan warna link, saat dikunjungi serta pada saat diklik

<style type="text/css">
a.satu:link {color:#FF0000;}
a.satu:visited {color:#00FF00;}
a.satu:hover {color:#FF00FF;}
a.satu:active {color:#0000FF;}
</style>

<a class="satu" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

2. Penggunaan text-decoration pada link

<style type="text/css">
a.dua:link {text-decoration:none;}
a.dua:visited {text-decoration:none;}
a.dua:hover {text-decoration:underline;}
a.dua:active {text-decoration:underline;}
</style>

<a class="dua" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

3. Menentukan warna latar belakang untuk link

<style type="text/css">
a.tiga:link {background-color:#B2FF99;}
a.tiga:visited {background-color:#FFFF85;}
a.tiga:hover {background-color:#FF704D;}
a.tiga:active {background-color:#FF704D;}
</style>
<a class="tiga" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

4. Memberikan efek lain pada link

<style type="text/css">
a.empat:link {color:#ff0000;}
a.empat:visited {color:#0000ff;}
a.empat:hover {color:#ffcc00;}

a.lima:link {color:#ff0000;}
a.lima:visited {color:#0000ff;}
a.lima:hover {font-size:150%;}

a.enam:link {color:#ff0000;}
a.enam:visited {color:#0000ff;}
a.enam:hover {background:#66ff66;}

a.tujuh:link {color:#ff0000;}
a.tujuh:visited {color:#0000ff;}
a.tujuh:hover {font-family:monospace;}

a.delapan:link {color:#ff0000;text-decoration:none;}
a.delapan:visited {color:#0000ff;text-decoration:none;}
a.delapan:hover {text-decoration:underline;}
</style>

<a class="empat" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

<a class="lima" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

<a class="enam" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

<a class="tujuh" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

<a class="delapan" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

Cara Buat Web Gratis

Cara Buat Web Gratis

Cara Buat Web Gratis

Cara Buat Web Gratis

4. Membuat kotak link berbentuk tab menu

<style type="text/css">
a.sembilan:link,a.sembilan:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a.sembilan:hover,a.sembilan:active
{
background-color:#7A991A;
}
</style>
<a class="sembilan" href="http://www.carabuatwebgratis.com" target="_blank">Cara Buat Web Gratis</a>

Berikut hasilnya :

Cara Buat Web Gratis

Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Judul: CSS LINK; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts