CSSで文字リンクの色を変更

文字リンクの色もCSSで設定できます。設定するセレクタの順番があるようなので気をつけましょう。

文字リンクの色を設定する方法

①画面右中段CSSスタイルパネルで「新規CSSルール」をクリック
②「新規CSSルールダイアログ」で「セレクタータイプ」を複合、「セレクタ名」をa:link、ルール定義を新規スタイルシートファイルにし(既存のスタイルシートファイルに追加したい時は既存のファイルを指定)、「OK」ボタンを押す
③「スタイルシートファイルの別名で保存」ダイアログでCSSファイルに新しく名前を付けて作成・保存する。
④カテゴリ「タイプ」で文字色を「Color」で指定します。
⑤設定が終わったらOKを押します。

設定する順番

a:link(まだ見ていないリンク)
a:visit(既に見たリンク)
a:hover(リンクにマウスカーソルを重ねた時)
a:active(リンクをクリックした瞬間)
の順番が正しいようです。
もしプロパティの順番が前後したらCSSスタイルパネルの一覧からマウスでセレクタ項目をつかんで順番を上下できるのでやってみましょう。

下線を消すのも簡単

下線を消すのはtext-decorationプロパティをnoneにするだけです。

背景色も設定すると効果的

a:hoverセレクタに背景色を設定するとリンクが目立って効果的です。背景カテゴリのbackground-colorで設定します。

設定するなら4つのセレクタを指定しよう

4つ設定していないために、リンクがある状態になった時にデフォルトの挙動になり、見た目が良くない事がたまにあります。リンクがブロック要素になったり、インライン要素になったりする時も、動作を良くチェックしましょう。

広告

関連コンテンツ