pautan CSS
1 Empat status pautan CSS:
a:pautan - biasa, pautan tidak dilawati a:dilawati - pautan yang pengguna telah lawati a:hover - penuding tetikus berada di atas pautan a:aktif - saat pautan diklik
Mari kita tetapkan atribut warna bagi kelakuan yang sepadan ini: Masih sama seperti proses sebelumnya, kita mula-mula mencipta index.html, dan kemudian mencipta fail test.css, dipautkan ke html. Berikut ialah kandungan fail html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css test</title> <script src="app.js"></script> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body > <a href="http://ipnx.cn">php</a> </body> </html>
Berikut ialah kandungan fail CSS:
a:link {color:#FF0000;} /* 未被訪問的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標(biāo)指針移動(dòng)到鏈接上 */
a:active {color:#0000FF;} /* 正在被點(diǎn)擊的鏈接 */Mari kita lihat kesannya dahulu: Ini adalah warna yang tidak dilawati:
Ini ialah warna pautan apabila tetikus digerakkan:
Ini adalah warna pautan yang sedang diklik:
Ini adalah warna selepas diklik:
Apa yang perlu kita perhatikan di sini ialah tertib empat atribut ini harus ditetapkan: a:hover mesti terletak dalam After :link dan a:visited, a:active mesti terletak selepas a:hover
1.2 CSS Menetapkan warna latar belakang pautan
Ini semudah mengubah suai warna latar belakang atribut yang sepadan. Jika kita ingin bereksperimen, cuma gantikan atau tambahkan fail CSS tadi:
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}Anda boleh mencuba, saya tidak akan mengambil tangkapan skrin satu persatu di sini
1.3 Ubah suai pautan yang digariskan
Tidak setiap masa kita memerlukan garis bawah di bawah pautan, kadangkala ia menjejaskan penampilan. Jadi di sini kita perlu menambah atribut hiasan teks pada atribut pautan, dan menukar rujukan pemindahan kepada kosong Selepas pengubahsuaian, hasil berikut ialah:
