cssでリンクカラーを変更する方法

Posted on by

CSSでリンクのカラー設定

リンクのカラー設定について記載いたします。

基本的な設定

    a{/*リンクされた文字*/
    color:#000;
    text-decoration:none;
}
a:link {/*未訪問のリンク*/
    color:#000;
    text-decoration:none;
}
a:visited {/*訪問後のリンク*/
    color:#000;
    text-decoration:none;
}
a:hover {/*マウスをのせたとき*/
    color:#ff0000;
    text-decoration:underline;
}
a:active {/*クリック中*/
    color:#000;
    text-decoration:none;
}

クラスで設定する際の指定

 a.クラス名 {/*リンクされた文字*/
    color:#000;
    text-decoration:none;
}
a:link.クラス名 {/*未訪問のリンク*/
    color:#000;
    text-decoration:none;
}
a:visited.クラス名 {/*訪問後のリンク*/
    color:#000;
    text-decoration:none;
}
a:hover.クラス名 {/*マウスをのせたとき*/
    color:#ff0000;
    text-decoration:underline;
}
a:active.クラス名 {/*クリック中*/
    color:#000;
    text-decoration:none;
}

ul.クラス名 li a {/*リンクされた文字*/
    color:#000;
    text-decoration:none;
}
ul.クラス名 li a:link {/*未訪問のリンク*/
    color:#000;
    text-decoration:none;
}
ul.クラス名 li a:visited {/*訪問後のリンク*/
    color:#000;
    text-decoration:none;
}
ul.クラス名 li a:hover {/*マウスをのせたとき*/
    color:#ff0000;
    text-decoration:underline;
}
ul.クラス名 li a:active {/*クリック中*/
    color:#000;
    text-decoration:none;
}