CSSリンク（リンク）


CSS リンク

リンクが異なれば、スタイルも異なります。

リンク スタイル

リンク スタイルでは、任意の CSS プロパティ (色、フォント、背景など) を使用できます。

特別なリンクは、ステータスに応じて異なるスタイルを持つことができます。

4 つのリンク ステータスは次のとおりです:

  • a:link - 通常の未訪問のリンク

  • a:visited - ユーザーが訪問したリンク

  • a:hover - ユーザーがマウスを上に置いたときリンク

  • a:active - リンクがクリックされた瞬間

インスタンス

<!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>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックすると、オンラインインスタンスが表示されます

設定されている場合いくつかのリンク状態のスタイルにはいくつかの順序規則もあります:

  • a:hover は a:link および a:visited に従う必要があります

  • a:active は a:hover に従う必要があります

リンク スタイル

は、上記のリンク色の変更例に基づいて、どのような状態になっているかを確認します。

その他の一般的な方法でリンクのスタイルを設定してみましょう:

テキスト装飾

text-decoration 属性は主にリンク内の下線を削除するために使用されます:

インスタンス 

<!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>

インスタンスを実行 »

クリックオンライン インスタンスを表示するための [インスタンスの実行] ボタン

背景色

background-color 属性は、リンクの背景色を指定します:

インスタンス

<!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>

インスタンスの実行»

[インスタンスの実行] ボタンをクリックしますオンライン インスタンスを表示するには

その他の例

例: さまざまなスタイルのハイパーリンクを追加します

<!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>

実行例»

オンライン例を表示するには、[例を実行] ボタンをクリックしてください

これ例では、ハイパーリンクのその他のスタイルを追加する方法を示します。

例: 高度な - リンク ボックスを作成します

<!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>

例の実行»

オンラインの例を表示するには、[例の実行] ボタンをクリックしてください

この例では、複数の CSS プロパティを組み合わせる、より高度な例を示します。ボックスとして表示されます。