CSS -リンクデザイン-
疑似クラス
a要素に疑似クラスを設定することで、リンクの色を替えたり、背景色を加えたりすることができます。
指定順序 | 疑似クラス | 説明 |
---|---|---|
1 | link | 訪問していないリンク先 |
2 | visited | 一度でも訪問したことのあるリンク先 |
3 | hover | マウスカーソルがa要素の領域内にある場合 |
4 | active | アクディブなリンク先 |
指定には、セレクタ名のあとに:(コロン)つけます。
使用例
a {
text-decoration:none;
}
a:link{
color:#333333;
}
a:visited{
color:#cdcdcd;
}
a:active{
text-decoration:underline;
}
疑似クラスの指定順序を誤ると正しく適応されません。
リンクの下線を消す
リンクを指定するとデフォルトつく下線をtext-decorationプロパティを使用すると消すことができます。
使用例
a {text-decoration : none;}