CSSリンクス

❮前次の章の❯

CSSで、リンクは、様々な方法でスタイルすることができます。

テキストリンクテキストリンクリンクボタンのリンクボタン

スタイリングリンク

リンクは、任意のCSSプロパティ（たとえばでスタイリングすることができcolor 、 font-family 、 background 、など）。

例

a {
color: hotpink;
}

»それを自分で試してみてください

また、リンクは、彼らが何であるかの状態に応じて異なるスタイルを設定することができます。

4つのリンクの状態は以下のとおりです。

a:link -ノーマル、未訪問のリンク
a:visited -ユーザーが訪問したリンクを
a:hover -リンクが上にあるとき、ユーザーマウスを置い
a:active -リンクがクリックされた瞬間

例

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

»それを自分で試してみてください

いくつかのリンク状態のスタイルを設定する場合、いくつかのためのルールがあります。

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

»それを自分で試してみてください

背景色

background-colorプロパティは、リンクの背景色を指定するために使用することができます。

例

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

»それを自分で試してみてください

[詳細] - [リンクボタン

この例では、我々はボックス/ボタンなどのリンクを表示するには、いくつかのCSSプロパティを組み合わせて、より高度な例を示しています。

例

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

»それを自分で試してみてください