リンク関係のレイアウトを指定する方法についての説明です。
未読リンクの指定：まだクリックしていないリンクの色指定です。a:link { color: 色名 } で指定します。
既読リンクの指定：すでにクリックしたリンクの色指定です。a:visited { color: 色名 } で指定します。
オンマウスの指定：リンクの上にマウスや指を乗せたときの色指定です。a:hover { color: 色名 } で指定します。
a:link { color: hotpink }
a:visited { color: red }
a:hover { color: green }
「text-decoration: none」で、リンク部分の下線を消すことができます。
下記の1つ目の例で、「.none」の部分に指定すると正しく反映されないので、かならず「.none a」もしくは「a」に対して指定してください。2つ目の例の「a class="none2"」のようにa要素に直接class名を当てることも可能です。
<p class="none"><a href="#">リンク部分の下線を消しています</a></p>
.none a {
color: hotpink;
text-decoration: none;
}
<a class="none2" href="#">リンク部分の下線を消去しています</a>
.none2 {
color: orchid;
text-decoration: none;
}
.button {
display: block;
text-decoration: none;
color: white;
background-color: yellowgreen;
padding: 20px;
text-align: center;
width: 150px;
}
<a class="button" href="#">ボタン</a>
.button {
display: inline-block;
text-decoration: none;
color: white;
background-color: yellowgreen;
padding: 20px;
text-align: center;
}