Belajar CSS chapter 3 (Mengubah Tampilan Link)
Assalamualaikum, sob. Untuk tutorial kali ini saya akan menjelaskan sedikit tentang mengubah tampilan link dengan css. link dapat ditata dengan berbeda tergantung pada keadaan. MIsal saat cursor diatasnya, dikunjungi, dan lain-lain. Mari langsung kita simak tutorialnya. Check this out...
CSS link
4 keadaan berbeda pada link :
- a:link – normal, pada saat link belum dikunjungi
- a:visited – ketika link sudah dikunjungi
- a:hover – ketika mouse diatasnya
- a:active – ketika diklik
Catatan :
- a:hover harus setelah a:link dan a:visited
- a:active harus setelah a:hover
properti yang umum digunakan :
- text-decoration
- background-color
Contoh membuat link dalam box :
<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href=”default.asp” target=”_blank”>This is a link</a>
</body>
</html>
<a href=”default.asp” target=”_blank”>This is a link</a>
</body>
</html>
sekian untuk postingan kali ini. Jangan lupa komentarnya ya, karena satu komen dari kalian berarti untuk perbaikan postingan-postingan selanjutnya.
Wassalamualaikum wr wb
Sumber : w3schools.com
Posting Komentar untuk "Belajar CSS chapter 3 (Mengubah Tampilan Link)"