简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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>


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492119 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！