CSS LINK | OOM RIO
Home » CSS » css link » CSS LINK

Sunday, March 27, 2011

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 :


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 :


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 :


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 :






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:


Posted by at 1:29 AM
Labels: ,

0 comments:

Post a Comment

Informasi Pilihan Identitas:
Google/Blogger : Khusus yang punya Account Blogger.
Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan).

Subscribe to: Post Comments (Atom)