pautan CSS (pautan)


Pautan CSS

Pautan yang berbeza boleh mempunyai gaya yang berbeza.

Gaya pautan

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

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

Empat status pautan ialah:

  • a:pautan - pautan biasa, tidak dilawati

  • a: dilawati - pautan bahawa pengguna telah melawati

  • a:tuding - apabila pengguna mengarahkan tetikus ke atas pautan

  • a:aktif - pautan itu adalah Saat anda klik

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
</style>
</head>

<body>
<p><b><a href="http://www.php.cn/css/css-css_tutorial.html" 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>

Run Instance»

Klik "Run Instance" Button View Online Contoh

Apabila ditetapkan kepada gaya beberapa keadaan pautan, terdapat juga beberapa peraturan tertib:

  • a:tuding mesti diikuti dengan a:pautan dan a:dilawati

  • a:aktif mesti diikuti dengan a:hover

Gaya pautan biasa

Berdasarkan pada contoh perubahan warna yang dipautkan di atas, lihat keadaannya.

Mari kita beralih kepada penggayaan pautan dengan beberapa cara biasa lain:

Hiasan Teks

Atribut hiasan teks digunakan terutamanya untuk mengalih keluar garis bawah dalam pautan:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */
</style>
</head>

<body>
<p><b><a href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This is a link</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Warna Latar Belakang

Atribut warna latar belakang menentukan warna latar belakang pautan:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This is a link</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>

Instance berjalan»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Lagi contoh

Contoh: Tambah berbeza gaya hiperpautan

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>将鼠标移至链接上改变样式.</p>

<p><b><a class="one" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes text-decoration</a></b></p>
</body>

</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Ini contoh menunjukkan cara menambah pautan Gaya lain.

Instance: Advanced - Create Link Box

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a:link,a:visited
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<a href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This is a link</a>
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Contoh ini menunjukkan contoh yang lebih maju di mana kami menggabungkan beberapa sifat CSS untuk memaparkan kotak.