CSS Links

Styling Links

Link dapat ditata dengan properti CSS (e.g. color, font-family, background, etc.).

a {
    color: #FF0000;
}

Selain itu, link dapat ditata berbeda tergantung pada apa yang negara mereka berada di.

Empat link negara adalah:

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

/* 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;
}

Ketika pengaturan gaya untuk beberapa negara Link, ada beberapa aturan agar:

a: hover harus datang setelah a: link dan a: visited

a: aktif harus datang setelah: hover

Common Link Styles

Dalam contoh di atas link berubah warna tergantung pada apa negara itu dalam.

Mari kita pergi melalui beberapa cara umum lainnya untuk link gaya:

Text Decoration

Properti text-decoration banyak 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;
}

Background Color

Properti background-color menentukan warna latar belakang untuk link:

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

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

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

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