ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでハイパーリンクのスタイルを設定するにはどうすればよいですか? CSSでハイパーリンクのスタイルを設定する方法（コード例）
CSSでハイパーリンクのスタイルを設定するにはどうすればよいですか? CSSでハイパーリンクのスタイルを設定する方法（コード例）
- 青灯夜游オリジナル
- 2018-10-27 14:16:4121069ブラウズ
フロントエンド Web サイトの開発では、ハイパーリンクは重要なコンポーネントであり、見栄えの良いハイパーリンク スタイルはフロントエンド ページにポイントを追加することができます。では、ハイパーリンクのスタイルを設定するにはどうすればよいでしょうか?この記事では、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>レンダリング:
説明:
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 サイトの他の関連記事を参照してください。