WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

擬似クラス

f:id:mmmmofu:20160728153527p:plain

http://efu.sakura.ne.jp/web/0326/

擬似クラス

aタグにつけることができる擬似クラスで
オンマウス等の時のスタイルを指定することができる。

link

未訪問のリンク

visited

訪問済み

hover

要素にカーソルが乗った状態(クリックはしてない)

focus

フォーカスされた状態

active

クリックされてから離れるまで あまり使わない。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<title>擬似クラスの練習</title>
<style>
body {
font-size: 24px;
line-height: 1.0;
}
ul {
list-style: none;
width: 300px;
}
li a {
display: block;
background: coral;
line-height: 48px;
color: #FFF;
margin-bottom: 5px;
padding-left: 24px;
}
a {
text-decoration: none;
background: coral;
}
a:link {
text-decoration: none;
background: coral;
}
a:visited {
background: turquoise;
}
a:hover {
text-decoration: underline;
background: skyblue;
}
a:active {
background: lawngreen;
}
</style>
</head>
<body>
<h1><a href="#">擬似クラスの練習</a></h1> 
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li> 
<li><a href="#">LINK-hover-skyblue</a></li>
</ul>
</body>
</html>

f:id:mmmmofu:20160728160304p:plain

link(未訪問)はcoral
visited(訪問済み)はturquoise
hover(カーソルが乗った状態)はskyblue
active(クリックされて離れるまでの間)はlawngreen