|
HTML HTML5 HTMLタグ スマートフォン |
CSS CSSプロパティ CSS・HTML便利ツール |
HTML色見本 配色組み合わせツール 特殊文字 |
JAVA Android |
PHP Smarty修飾子 EXCEL |
WEB技術の辞書・解説・使用例
CSSは後に記述されたものが優先して適用されます。a:linkの指定を最後に記述しないように注意してください。
書式
(例) a:active {color:#cc0000; background-color:pink;}リンクに関するそのほかのクラス。
:link未訪問リンクのスタイルを設定。
:visited訪問済みリンクのスタイルを設定。
:hoverマウスオーバー時のスタイルを設定。
:activeクリックされてから離されるまでの間のスタイルを設定。
CSSファイル
a:link {color:#0000ff;} /*未訪問のリンクの色*/a:visited {color:#00ccff;} /*訪問済みのリンクの色*/
a:hover {color:#ffffff; background:#0000cc;} /*カーソルが乗っているリンクの色*/
a:active {color:#ffff00;} /*クリック中のリンクの色*/
.sample a:link {color:#ff0000;font-weight:bold;}
.sample a:visited {color:#ffcc00;}
.sample a:hover {color:#ffffff; background:#cc0000;}
.sample a:active {color:#cc0000;}
.sample p:hover {background-color:pink;}
HTML
<a href="/">①TOPにリンクしています。選択してみてください</a><div class="sample"><a href="/">②TOPにリンクしています。選択してみてください</a></div>
<div class="sample"><p>③p:hoverです。選択してみてください</p></div>