擬似クラス

Home »  擬似クラス

「擬似クラス」を使用する

a タグを使って指定したりンク先が訪問済みか 未訪問かによってスタイルを変えるには、「綴似 クラス」と呼ばれる特別な書式を使用します。 未訪問のリンクは 「a:link」、訪問済みのリン クは 「a:visited」 としてスタイルを指定します。 ここでは未訪問のときは緑、訪問済みのとき はグレーになるようにスタイルを設定していま す。

「a:hover 」 擬似クラスを使用し、リンク部分にマウスポイ ンタを合わせたときにスタイルを変更することができます。サンプルでは、マウスポインタを合わせたときに背 景色が黄色になるように設定しています。

「a:active」 擬似クラスを使用するとリンクが選択されて いる間だけスタイルを設定することができます。サンプルでは、アクティブな間色を赤色に設定しています。

border-styleプロパティで 種類を指定する

枠線を付けるには border-style プロパティで枠 線の種類を指定します。CSS の仕様上、このプロパティを指定しないと、枠線の太さを指定 する border-width プロパティ、色を指定する border-color プロパティなどは指定できないことになっています。 border-style プロパティに 指定できる値は下衰の 9 種類です。サンプルではh1 タグに solid、h2 タグに double、h3 タグに dotted を指定してみました。

1つの要素について、上下左右の枠線のスタイルを変更することができます。 border-styleプロパティに値を1つだけ設定すると、上下左右の枠線のスタイルがみな同じになりますが、値を2つ、3つ、4つの場合でそれぞれ異なる設定ができます。値を 4 つ列挙 (それぞれの値の間は半角スペースを空ける) すると、先頭から順に上、右、下、左の枠線のスタイルを指定します。値を3つ列挙した場合は、上、左右、下、 2 つ列挙した場合は上下、左右のスタイルの設定になります。

枠線の色は border-color プロパティで指定します 。 色の指定については colorプロパティ、 background-colorプロパティなどと同じです。 サンプルでは border-style プロパティを dashed に指定した枠線の色を青色にしています。なお、枠線の色を特に指定しない場合は、 colorプロパティと同じ色になります。

1つの要素について、上下左右の枠線のそれぞれに別の色を設定するこができます。 border-colorプロパティに値を 1 つだけ設定すると、上下左右の枠線の色がみな同じになりますが、値を2つ、3つ、4つの場合でそれぞれ異なる設定ができます。値を4つ列挙 (それぞれの値の問は半角スペースを空ける) すると、先頭から順に上、右、下、左の色のスタイルを指定します。値を3つ列挙した場合は、上、左右、下、 2 つ列挙した場合は上下、左右の色の設定になります。

Comments are closed.