<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="description" content="CSSのダイナミック疑似クラスを確認するためのサンプルです">
<title>リンク疑似クラス</title>
<style>
header{
text-align: center;
background-color: skyblue;
}
#contents{
text-align: center;
}
/* リンク疑似クラス */
a{ /* リンク部分の設定 */
color: blue;
background-color: orange;
padding: 1em;
border-radius: 10px;
}
a:link{ /* リンク先に未訪問 */
color: black;
}
a:visited{ /* リンク先が訪問済み*/
color: gray;
}
a:focus{ /* 選択状態 */
}
a:hover{ /* マウスボタンがのっている */
color: pink;
}
a:active{ /* マウスを押した */
color: white;
position: relative;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<header>
<h1>リンク疑似クラス</h1>
</header>
<div id="contents">
<p><a href="#" target="_blank">押してね</a></p>
</div>
</body>
</html>
コメント