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;}

尝试一下 »


Examples

更多实例

異なるスタイルのハイパーリンクを追加
この例は、ハイパーリンクに他のスタイルを追加する方法を示しています。

高级 - 创建链接框
この例は、いくつかのCSSプロパティを組み合わせてボックスとして表示する、より高度な例を示しています。

其他扩展