CSS Link

❮ Sebelumnya Bab selanjutnya ❯

Dengan CSS, link dapat ditata dengan cara yang berbeda.

Text Link Text Link Tautan Tombol Tombol Tautan

styling Links

Link dapat ditata dengan properti CSS (misalnya color , font-family , background , dll).

Contoh

a {
color: hotpink;
}

Cobalah sendiri "

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

Keempat Link negara adalah:

a:link - normal, link yang belum dikunjungi
a:visited - link pengguna telah mengunjungi
a:hover - link ketika mouse pengguna di atasnya
a:active - link saat itu diklik

Contoh

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

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

/* selected link */
a:active {
    color: blue;
}

Cobalah sendiri "

Ketika menetapkan gaya untuk beberapa negara tautan, ada beberapa aturan agar:

a:hover HARUS datang setelah a:link dan a:visited
a:active HARUS datang setelah a:hover

Dekorasi teks

The text-decoration properti ini kebanyakan digunakan untuk menghapus menggarisbawahi dari link:

Contoh

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Cobalah sendiri "

Warna latar belakang

The background-color properti dapat digunakan untuk menentukan warna latar belakang untuk link:

Contoh

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Cobalah sendiri "

Canggih - Tombol Tautan

Contoh ini menunjukkan contoh yang lebih canggih di mana kita menggabungkan beberapa sifat CSS untuk menampilkan link sebagai kotak / tombol:

Contoh

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

Cobalah sendiri "