CSS styling link selalu menjadi kode yang dipastikan "selalu ada" dalam desain web/blog. Kode ini sangat penting dan selalu ditempatkan di bagian atas pada susunan kode css. Biasanya berada tak jauh dari syntax body. Penggunaan css styling link tak lepas dari 'digunakannya kode html tag "a" (html "a" tag) yang berfungsi untuk membuat link. Link sendiri berfungsi untuk membuat suatu hubungan dengan blog/web lain atau bisa juga dengan satu atau beberapa bagian didalam web/blog itu sendiri. HTML tag "a" dapat dengan mudah dikenali melalui berbagai ciri/tanda:
- Terjadi perubahan bentuk cursor ketika disentuh/tersentuh (umumnya cursor berbentuk tangan - hand/pointer cursor).
- Biasanya warna teks berbeda dengan teks lain.
- Lebih sering menggunakan font lebih tebal atau dengan garis di bawah teks.
- Berubah warna ketika tersentuh cursor.
- Beberapa menggunakan background.
- Menampilkan tips (teks) ketika cursor berada di atasnya.
- Ketika di "klik" akan mengarahkan anda ke sebuah alamat tertentu (bisa diluar web/blog atau di dalam web/blog.
Kode dasar HTML tag "a"
<a href="URL" title="Title here">Text Link</a>
Kode seperti terlihat di atas disebut sebagai sebuah link (text link). Selain link berupa teks, banyak juga menggunakan image sebagai sebuah link.
<a href="URL" title="Title here"><img src="image.jpg" width="xx" height="XXX" /></a>Penggunaan CSS styling link hanya ditujukan pada teks link.
CSS styling link
- a:link{property:value;} Link yg belum dikunjungi.
- a:visited{property:value;} Link yg sudah dikunjungi.
- a:hover{property:value;} Perubahan beberapa variable link saat tersentuh cursor.
- a:active{property:value;} Perubahan beberapa variable link saat "klik".
Contoh susunan & kode css styling link
a:link{
font:bold 12px Arial;
color:#000;
text-decoration:none;
}
a:visited{
color:#888;
}
a:hover{
color:red;
text-decoration:underline;
}
a:active{
color:blue;
outline:none;
}
Keterangan :
- Susunan harus berurutan dimulai dari a:link, a:visited, a:hover dan yang terakhir a:active
- a:visited (link yang telah dikunjungi biasanya menggunakan warna yang tak terlalu mencolok.
- a:link dan a:hover biasanya menggunakan 2 pilihan text-decoration property.
text-decoration:none
text-decoration:underline - Ke-4 syntax css styling link tersebut masih bisa dilengkapi dengan properti css lain untuk membentuk tampilan styling link yang berbeda.
Contoh penambahan property lain pada css styling link
a:link{
font:bold 12px Arial;
color:#000;
text-decoration:none;
background:lightblue; /* menambah background property */
padding:1px 6px; /* menambah padding property */
transition:1s; /* menambah css3 transition property untuk efek hover */
-o-transition:1s;
-ms-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
a:visited{
color:#888;
}
a:hover{
color:red;
background:#aaa; /* menambah background property */
text-decoration:underline;
}
a:active{
color:blue;
outline:none;
}Di bawah telah disertakan demo styling link sederhana dan yang lebih komplex dengan melibatkan beberapa property css termasuk css3 transition property.
Please click the button to display. Continue with editing code and click to see the results!
Post : CSS Styling Linkby : gubhugreyot - gubhugcss
my Blogs : Demo Tutorial Blogger-1 | Demo Tutorial Blogger-2 | Best Blogger Hacks | Best Blogger Menus | gubhuggreyot-b'detik | gubhugreyot
Trims tutorialnya :)
BalasHapus