文字の装飾

説明

text-decoration: decoration; C1- ie3- N4-

値:	none \| [ underline \|\| overline \|\| line-through \|\| blink ] \| inherit

初期値：none、適用要素：すべて、継承：しない、%値：なし、メディア：ビジュアル

このプロパティは、テキストの装飾を指定します。値を半角スペース[ ]で区切って複数指定することもできます。

このプロパティは継承を行いませんが、ブロック要素に適用されたとき、内容インライン要素のテキストに装飾が施されます。

*1 線の種類を選んで文字に装飾を施す際にはborderプロパティを用います。　

ボーダーの一括指定

使用例


a { text-decoration: underline }

文字の装飾の値

none	C1- ie3- N4- 装飾を施しません。初期値。
underline	C1- ie3- N4- 下線を引きます。
overline	C1- ie4- N6- 上線を引きます。
line-through	C1- ie3- N4- 削除線を引きます。
blink	C1- N4- 点滅させます。

文字の装飾のレンダリング

文字の装飾

マウスが乗ったら下線と背景を表示

リンクのスタイルを指定するセレクタの例

リンクのスタイルを指定する際によく利用されるセレクタの例を紹介します。リンクに使用する擬似クラスには決められた順序があります。link、visited、hover、acriveの順です。


ページ全体のリンクを設定

a:link    {...}   /* リンク */

a:visited {...}   /* 訪問済みリンク */

a:hover   {...}   /* ポイント時のリンク */

a:active  {...}   /* アクティブなリンク */



特定クラスが指定されているリンクの設定

a.クラス:link    {...}

a.クラス:visited {...}

a.クラス:hover   {...}

a.クラス:active  {...}



特定クラスが指定された要素に含まれるリンクの設定

.クラス a:link    {...}

.クラス a:visited {...}

.クラス a:hover   {...}

.クラス a:active  {...}



マウスが乗ったら下線と背景を表示

a:link    {color:#0000ff; text-decoration:none}

a:visited {color:#0000ff; text-decoration:none}

a:hover   {color:#006699; text-decoration:underline; background:#ddeeff}

a:active  {color:#006699; text-decoration:underline; background:#ddeeff}

リンクに関する疑似クラス

文字の装飾 (Underlining, overlining, striking, and blinking)

説明

使用例

文字の装飾の値

文字の装飾のレンダリング

リンクのスタイルを指定するセレクタの例