Kursus Membuat Web

iklan

Link CSS

Link dapat di beri style dengan cara yang berbeda-beda.

Memberi Style Link

Link dapat di beri style dengan beberapa property CSS (misaknya color, font-family, background, dan lain-lain).

a {
    color: #FF0000;
}
Lihat ...

Selain itu, link dapat di beri style yang berbeda tergantung pada keadaannya.

Empat keadaan link adalah :

  • a:link - normal, link yang belum dikunjungi
  • a:visited - link sudah dikunjungi pengguna
  • a:hover - link ketika mouses pengguna diatasnya
  • a:active - link saat itu di click
/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}
Lihat ...

Bila pengaturan style untuk beberapa keadaan link, ada aturan urutannya :

  • a:hover harus setelah a:link dan a:visited
  • a:active harus setelah a:hover

Link Style Yang Umum

Pada contoh diatas link berubah warna tergantung keadaannya.

Text Decoration

Property text-decoration biasanya digunakan untuk menghilangkan garis bawah dari link:

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: underline;
}
Lihat ...

Background Color

Property background-color menetapkan warna background untuk link:

a:link {
    background-color: #B2FF99;
}

a:visited {
    background-color: #FFFF85;
}

a:hover {
    background-color: #FF704D;
}

a:active {
    background-color: #FF704D;
}
Lihat ...

Beberapa Contoh Untuk di Praktekkan Sendiri

a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

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

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

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

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}

Menambahkan style yang berbeda untuk hyperlink

Contoh ini menunjukkan bagaimana menambahkan style untuk hyperlink.

a:link, a:visited {
	font-weight: bold;
	color: #ffffff;
	background-color: #98bf21;
	text-align: center;
	padding: 5px 10px;
	text-decoration: none;
}

a:hover, a:active {
	background-color: #7A991A;
}

Membuat link box

Contoh ini mengkombinasikan beberapa property CSS untuk menampilkan link box.

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015