Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai CSS Link.
Dengan CSS, link dapat ditata dengan cara yang berbeda.
Link Style
Link dapat ditata dengan properti CSS (misalnya color, font-family, background, dll).
Contoh
<!DOCTYPE html><html>
<head>
<style>
a{
color: hotpink;
}
</style>
</head>
<body>
<p><b><a href="1.html" target="_blank">Ini adalah sebuah link</a></b></p>
</body>
</html>
Hasil
Selain itu, link bisa ditata secara berbeda tergantung pada apa yang ada di negara mereka berada.
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
<!DOCTYPE html>
<html>
<head>
<style>
/* 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;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Ini adalah sebuah link</a></b></p>
<p><b>Catatan:</b> a: hover HARUS datang setelah: link dan a: visited dalam definisi CSS agar efektif.</p>
<p><b>Catatan:</b> a: aktif HARUS datang setelah: hover dalam definisi CSS agar efektif.</p>
</body>
</html>
<html>
<head>
<style>
/* 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;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Ini adalah sebuah link</a></b></p>
<p><b>Catatan:</b> a: hover HARUS datang setelah: link dan a: visited dalam definisi CSS agar efektif.</p>
<p><b>Catatan:</b> a: aktif HARUS datang setelah: hover dalam definisi CSS agar efektif.</p>
</body>
</html>
Hasil
Ketika menetapkan gaya untuk beberapa negara tautan, ada beberapa aturan agar.
- a: hover HARUS datang setelah: link dan a:visited
- a: aktif HARUS datang setelah: hover
Dekorasi Teks
Tag text-decoration ini kebanyakan digunakan untuk menghapus menggarisbawahi dari link.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Ini adalah sebuah</a></b></p>
<p><b>Catatan:</b> a: hover HARUS datang setelah: link dan a: visited dalam definisi CSS agar efektif.</p>
<p><b>Catatan:</b> a: aktif HARUS datang setelah: hover dalam definisi CSS agar efektif.</p>
</body>
</html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Ini adalah sebuah</a></b></p>
<p><b>Catatan:</b> a: hover HARUS datang setelah: link dan a: visited dalam definisi CSS agar efektif.</p>
<p><b>Catatan:</b> a: aktif HARUS datang setelah: hover dalam definisi CSS agar efektif.</p>
</body>
</html>
Hasil
Warna Latar Belakang
Tag background-color dapat digunakan untuk menentukan warna latar belaknag untuk link.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Ini adalah sebuah link</a></b></p>
<p><b>Catatan:</b> a: hover HARUS datang setelah: link dan a: visited dalam definisi CSS agar efektif.</p>
<p><b>Catatan:</b> a: aktif HARUS datang setelah: hover dalam definisi CSS agar efektif.</p>
</body>
</html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Ini adalah sebuah link</a></b></p>
<p><b>Catatan:</b> a: hover HARUS datang setelah: link dan a: visited dalam definisi CSS agar efektif.</p>
<p><b>Catatan:</b> a: aktif HARUS datang setelah: hover dalam definisi CSS agar efektif.</p>
</body>
</html>
Hasil
Tombol Tautan
Contoh ini menunjukkan contoh yang lebih canggih di mana kita menggabungkan beberapa sifat CSS untuk menampilkan link sebagai kota/ tombol.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">Ini adalah sebuah Link</a>
</body>
</html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">Ini adalah sebuah Link</a>
</body>
</html>
Hasil
REFERENSI
No comments:
Post a Comment