目次
2012-11-29
擬似クラスと背景画像
-
マウスで反応させる
- 順番に・・・
- 「link（未訪問）」
- 「visited（訪問済み）」
- 「hover（カーソルがリンクに重なったとき）」
- 「active（リンクに対してアクティブな瞬間）」
- activeは押した瞬間。なので今となってはほとんど使われない。
- 順番に・・・
-
疑似クラスの練習（文字リンクの色を変える）
- 「ul」はリセットする
- 文字の色を指定する
li {
font-size: 2.0em;
font-weght: bold;
margin: 0 0 10px 0;
}
li a:link {
color: #00F;
}
li a:visited {
color: #60f;
}
li a:hover {
color: #f60;
}
li a:active {
color: #f00;
}
- 文字リンクのアンダーラインを消す
li a:link {
color: #00F;
text-decoration: none;
}
- 文字の周りもリンクに指定する
li a {
display: block;
padding: 5px 1em;
width: 300px;
}
- 横帯リンクに変える
li {
font-size: 1.5em;
font-weght: bold;
margin: 0 0 10px 0;
float: left;
}
- 「li」にpaddingやmarginを持って行っても意味が無い
- 枠に色を付けてhoverで色の変化を付ける
疑似クラスの練習
- フォントを指定する、適切なフォントファミリー
body {
font-family:
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3",
Meirio,
"メイリオ",
Osaka,
"MS P Gothic",
"ＭＳ Ｐゴシック"
}
backgroundの設定
background-color
background-colorの設定
見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。
-
背景画像を設定
-
背景画像を設定（水平方向に繰り返し）
-
背景画像を設定（垂直方向に繰り返し）
-
背景画像と枠線
-
背景画像（繰り返さない）
