この例では、常にリンクスイッチに下線が表示されなくなります。
|
<STYLE type="text/css"> <!-- a { text-decoration: none; } --> </STYLE> |
←CSSの指定開始 ←CSSが無効である場合に、指示を読み込ませないようにするための指定−開始 ←全ての状態で、リンクの下線を表示しない ←CSSが無効である場合に、指示を読み込ませないようにするための指定−閉じ ←CSSの指定終了 |
|
<body> <a>下線を消したリンク</a> </body> |
|
リンクの下線を表示しないと、その文字列がリンクなのかどうかがわかりにくくなるので、下線が無くてもリンクであることが伝わるように工夫する必要があります。
リンク表示前を赤に、リンク表示後を茶色に、カーソルを合わせたときは緑に、クリック中は黄色に
例では全て別の色にしていますが、一部の状態で同じ色を指定することも可能です。
全て同じ色にするのであれば、a { color: lawngreen; }というように、a{ }を利用します。
|
<STYLE type="text/css"> <!-- a:link { color: red; } a:visited { color: saddlebrown; } a:hover { color: lawngreen; } a:active { color: gold; } --> </STYLE> |
←CSSの指定開始 ←CSSが無効である場合に、指示を読み込ませないようにするための指定−開始 ←リンク先表示前の色を指定 ←リンク先表示後の色を指定 ←カーソルを合わせた時の色を指定 ←クリックした時の色を指定 ←CSSが無効である場合に、指示を読み込ませないようにするための指定−閉じ |
|
<body> <a>色の変わるリンク</a> </body> | |