CSSにおけるリンクの各種状態説明
1200 ワード
特定の事前定義されたクラスのセットを擬似クラスと呼び、主にハイパーリンクの状態を処理するために使用されます.ハイパーリンク文字の状態は、擬似クラス選択子+スタイル規則で制御できます.疑似クラスの選択子は次のとおりです.
合計:aは、a{color:red}のようなすべての状態でのリンクを表す
①a:link:a:link{color:blue}などの未アクセスリンク
②a:visited:a:visited{color:blue}などのアクセス済みリンク
③a:active:(マウスクリックとリリースの間に発生したイベント)リンクがアクティブになったとき、すなわちリンクが押されたとき、例えばa:active{color:blue}
④a:hover:マウスをリンクに移動した場合、例えばa:hover{color:blue}
次のようになります.
ヒント:CSS定義では、a:hoverはa:linkおよびa:visitedの後に配置する必要があります.
ヒント:CSS定義では、a:activeはa:hoverの後に置かなければ有効ではありません.
ヒント:擬似クラス名は大文字と小文字に敏感ではありません.
CSSでa:active/a:link/a:visited/a:hoverの順序を定義するには:
a:link、a:visited、a:hover、a:active
記憶しやすい「愛憎の原則」(LoVe/HAte)、すなわち4種類の偽類の頭文字:LVHA.
参考資料: w 3 cshoolオンラインチュートリアル http://jeoff.blog.51cto.com/186264/43116 http://www.jz123.cn/text/0214505.html
合計:aは、a{color:red}のようなすべての状態でのリンクを表す
①a:link:a:link{color:blue}などの未アクセスリンク
②a:visited:a:visited{color:blue}などのアクセス済みリンク
③a:active:(マウスクリックとリリースの間に発生したイベント)リンクがアクティブになったとき、すなわちリンクが押されたとき、例えばa:active{color:blue}
④a:hover:マウスをリンクに移動した場合、例えばa:hover{color:blue}
次のようになります.
<style type="text/css">
a {font-size:16px}
a:link {color: blue; text-decoration:none;}
a:visited {color:green;text-decoration:none;}
a:hover {color: red; text-decoration:underline;}
a:active {color: yellow; text-decoration:none;}
</style>
ヒント:CSS定義では、a:hoverはa:linkおよびa:visitedの後に配置する必要があります.
ヒント:CSS定義では、a:activeはa:hoverの後に置かなければ有効ではありません.
ヒント:擬似クラス名は大文字と小文字に敏感ではありません.
CSSでa:active/a:link/a:visited/a:hoverの順序を定義するには:
a:link、a:visited、a:hover、a:active
記憶しやすい「愛憎の原則」(LoVe/HAte)、すなわち4種類の偽類の頭文字:LVHA.
参考資料: