CSSリンク疑似クラスサンプル

HTML
<!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>

コメント