◆疑似クラス(教科書/辞典 P160)
擬似クラスとは要素が特定の状態にある場合にスタイルを指定するものである
○要素名:link まだ訪問していないページへのリンク ※ほとんど使わない(aタグのみで指定する時と同じ)
○要素名:visited すでに見たページへのリンク
○要素名:hover マウスオンしている状態
○要素名:active 要素を選択したとき
○要素名:focus 要素にフォーカスが移ったとき
CSSで使用する例
a:link { color: #0000ff; } /* 未訪問のリンク */
a:visited { color: #000080; } /* 訪問済みのリンク */
a:hover { color: #ff0000; } /* ポイント時のリンク */
a:active { color: #ff8000; } /* 選択中のリンク */
このlink → visited →hover →active の順番で指定する。順番が違うとCSSがきかない。
設定をしたくない物がある場合は、飛ばしてもかまわないが、順番は守る。
例えばvisitedの設定をしたくない時は、次のhoverの指定をしてあげる。
◆本日使用したプロパティと値
cssプロパティ
◎display:block インラインレベル要素をブロックレベル要素に変換するプロパティ(p.328) ◎list-style-position:inside リストマーク(黒丸など)をliの要素の中に入れる。「outside」はデフォルト設定。(P.268) ◎list-style-type:none リスト項目の先頭に表示されるマークの種類を設定する。(noneは、リストマーク無し)(p.262) ◎text-indent 文章の段落などの一行目のインデント幅を指定する際に使用する。インデントには負の値を指定することも可能(p.199)
◆CSSスプライト
「テキストを非表示にしたところに背景画像を忍ばせる」という技術
一枚画像をbackground-positionで、画像置換と呼ばれるCSSの小技を応用で作られる。
>>詳しくはこちら http://lopan.jp/css-sprites/