pautan CSSLOGIN

pautan CSS

Pautan CSS

Pautan yang berbeza boleh mempunyai gaya yang berbeza.

Gaya pautan

Gaya pautan boleh menggunakan sebarang sifat CSS (seperti warna, fon, latar belakang, dll.).

Pautan khas boleh mempunyai gaya yang berbeza, bergantung pada statusnya.

Empat status pautan ialah:

a:pautan - pautan biasa, tidak dilawati

a:dilawati - pautan yang telah dilawati pengguna

a: tuding - apabila pengguna tetikus pada pautan

a:aktif - saat pautan diklik

<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */
</style>
</head>
<body>
<p><b><a href="#" target="_blank">这是一个链接</a></b></p>
<p><b>注释:</b>为了使定义生效,a:hover 必须位于 a:link 和 a:visited 之后!!</p>
<p><b>注释:</b>为了使定义生效,a:active 必须位于 a:hover 之后!!</p>
</body>
</html>

Apabila ditetapkan kepada gaya untuk beberapa keadaan pautan, terdapat juga beberapa jujukan Peraturan:

a:tuding mesti mengikut a:pautan dan a:dilawati

a:aktif mesti mengikut a:tuding

Gaya pautan biasa

Berdasarkan contoh perubahan warna pautan di atas, lihat keadaannya.

Mari kita beralih ke gaya pautan melalui beberapa cara biasa yang lain:

Hiasan teks

atribut hiasan teks utama Digunakan untuk mengalih keluar garis bawah daripada pautan:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
a:link {background-color:#B2FF99;}    /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;}   /* mouse over link */
a:active {background-color:#FF704D;}  /* selected link */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">点击链接</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>


bahagian seterusnya
<!DOCTYPE html> <html> <head> <style> a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */ </style> </head> <body> <p><b><a href="#" target="_blank">这是一个链接</a></b></p> <p><b>注释:</b>为了使定义生效,a:hover 必须位于 a:link 和 a:visited 之后!!</p> <p><b>注释:</b>为了使定义生效,a:active 必须位于 a:hover 之后!!</p> </body> </html>
babperisian kursus