CSS 链接
異なるリンクはそれぞれ異なるスタイルを持つことができます。
链接样式
リンクのスタイルは、あらゆるCSSプロパティ(色、フォント、背景など)を使用できます。
特別なリンクは、その状態に応じて異なるスタイルを持つことができます。
この4つのリンク状態は:
- a:link - 通常の、未訪問のリンク
- a:visited - ユーザーが訪問済みのリンク
- a:hover - ユーザーのマウスがリンク上にあるとき
- a:active - リンクがクリックされた瞬間
实例
a:link {color:#000000;} /*未访问链接*/
a:visited {color:#0080FF;} /*已访问链接*/
a:hover {color:#FF00FF;} /*鼠标移动到链接上*/
a:active {color:#0000FF;} /*鼠标点击时*/
尝试一下 »
複数のリンク状態のスタイルを設定する場合、いくつかの順序規則もあります:
- a:hover は a:link と a:visited の後に続く必要があります
- a:active は a:hover の後に続く必要があります
よくあるリンクスタイル
上記のリンクの色変化の例に従って、それがどの状態にあるかを確認してください。
他の一般的な方法を通して、リンクスタイルに移りましょう:
文本修饰
text-decoration プロパティは主にリンクの下線を削除するために使用されます:
实例
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
尝试一下 »
背景颜色
背景色プロパティはリンクの背景色を指定します:
实例
a:link {background-color:#8CC6FF;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
尝试一下 »
更多实例
異なるスタイルのハイパーリンクを追加
この例は、ハイパーリンクに他のスタイルを追加する方法を示しています。
高级 - 创建链接框
この例は、いくつかのCSSプロパティを組み合わせてボックスとして表示する、より高度な例を示しています。