CSSでハイパーリンクのスタイルを設定するにはどうすればよいですか? CSSでハイパーリンクのスタイルを設定する方法（コード例）-CSSチュートリアル-php.cn

CSSでハイパーリンクのスタイルを設定するにはどうすればよいですか? CSSでハイパーリンクのスタイルを設定する方法（コード例）

青灯夜游

リリース： 2018-10-27 14:18:53

オリジナル

21070 人が閲覧しました

フロントエンド Web サイトの開発では、ハイパーリンクは重要なコンポーネントであり、見栄えの良いハイパーリンクスタイルはフロントエンドページにポイントを追加することができます。では、ハイパーリンクのスタイルを設定するにはどうすればよいでしょうか?この記事では、CSSでハイパーリンクのスタイルを設定する方法を簡単に紹介します。困っている友人は参考にしていただければ幸いです。

まず、ブラウザ上の最初のハイパーリンクスタイルを見てみましょう:

CSSでハイパーリンクのスタイルを設定するにはどうすればよいですか? CSSでハイパーリンクのスタイルを設定する方法（コード例）

フォントの色が青だと思いませんか? . ページ上にこのように下線が表示されると、非常に唐突になり、ページが美しくなくなります。では、ハイパーリンクのフォントの色を変更したり、ハイパーリンクの下線を削除したりするにはどうすればよいでしょうか?次にcssを使ってハイパーリンクのスタイルを設定する方法を紹介します。

css はハイパーリンクのテキストスタイルを設定します

簡単なコード例を通して、CSS でハイパーリンクのテキストスタイルを設定するメソッドについて学びましょう。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接样式</title>
		<style>
			.demo {
				width: 300px;
				height: 300px;
				margin: 100px auto;
			}
			.demo .a{
				text-decoration:none;  /*清除下划线  */
				font-family: "楷体";/*设置字体种类*/
				color: red;/*设置字体颜色*/
				font-size: 30px;/*设置字体大小*/
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<a href="#">php中文网</a><br /><br />
			<a href="#" class="a">php中文网</a>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSでハイパーリンクのスタイルを設定するにはどうすればよいですか? CSSでハイパーリンクのスタイルを設定する方法（コード例）

説明:

text-decoration:none;: ハイパーリンクの下線をクリアします

font-*: フォントの種類、サイズ、スタイル (斜体、テキスト斜体など)、太さなどのフォントスタイルを設定します。

動的ハイパーリンクスタイルを設定するための css 疑似クラス

:link: 未訪問のリンクを選択し、そのスタイルを設定します。通常の (訪問されていない) リンクのスタイル。

:hover: マウスポインターが浮いている要素を選択し、そのスタイルを設定します。つまり、マウスがリンク上にあるときのスタイルを定義します。

:active: アクティブなリンクを選択し、そのスタイルを設定します。つまり、マウスがリンクをクリックしたときのスタイルを定義します。

:visited: 訪問先リンクを選択し、そのスタイルを設定します。つまり、訪問先リンクのスタイルを定義します。

簡単なコード例を通して、CSS 疑似クラスを使用して動的ハイパーリンクスタイルを設定する方法について学びましょう

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>超链接样式</title>
		<style>
			.demo a {

				font-size: 30px;
				/*设置字体大小*/
			}
			
			a:link {
				color: #000000;
				text-decoration: none;
			}
			
			a:visited {
				color: #00FF00;
				text-decoration: none;
			}
			
			a:hover {
				color: #FF0000;
				text-decoration: underline;
			}
			
			a:active {
				color: #0081EF;
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<a href="#" class="a">php中文网</a>
		</div>
	</body>

</html>

ログイン後にコピー

上の例で定義されているリンクの色は黒で、訪問先リンクは緑。リンク上にマウスを置くとリンクが赤になり、クリックすると青になります。ご自身で試してみて効果を確認してください。 CSS 疑似クラスを使用してスタイルを設定するには、特定の順序に従う必要があります。見てみましょう。

CSS 疑似クラス設定スタイルの順序:

CSS 疑似クラス設定リンクスタイルにもルールがあります。少し間違っていると、リンクの効果に影響が出る可能性があります。リンクスタイルを定義するたびに、link--visited--hover-active という順序を必ず確認してください。これは私たちがよく行うことです。 LoVeに電話してください HAte原則（大文字は頭文字）。

まとめ: 以上が CSS でハイパーリンクのスタイルを設定する方法の全内容です。注意する必要があるのは、疑似クラスを使用してスタイルを設定するときの順序です。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、 CSS 基本ビデオチュートリアル、 HTML ビデオチュートリアル、bootstrap ビデオチュートリアルをご覧ください。

以上がCSSでハイパーリンクのスタイルを設定するにはどうすればよいですか? CSSでハイパーリンクのスタイルを設定する方法（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。