こんな例を考えてみよう:
SPAN.glow {
background: white;
color: white;
text-shadow: black 0px 0px 5px;
}
この例では'background'と'color'が同じ色の値を持っており、'text-shadow'プロパティは日食(solar eclipse)の様な文字効果を創り出すのに用いられている:
目次
以下の章では文字とその間隔、単語、そして段落など、視覚的体裁に影響を与えるプロパティを定義する。
| Value: | <length> | <percentage> | inherit |
|---|---|
| Initial: | 0 |
| Applies to: | block-level elements |
| Inherited: | yes |
| Percentages: | refer to width of containing block |
| Media: | visual |
このプロパティは、ブロックの中にあるテキストの1行目のインデントを指定する。 厳密に言うと、ブロックの最初の行ボックス先頭に流し込まれるボックスのインデントを指定する。 すなわちインデントは行ボックスの左辺に対して行われる（レイアウト方向が右から左の場合は右辺）。 UAはこのインデントを透明の領域として描画すべきである。
各値は以下の様な意味を持つ:
負の値は不正ではないが、実装上は値に特定の制限範囲が生じることもある。
次の例では'3em'分のインデントが生じる。
P { text-indent: 3em }
| Value: | left | right | center | justify | <string> | inherit |
|---|---|
| Initial: | depends on user agent and writing direction |
| Applies to: | block-level elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
このプロパティは、ブロックの中でインライン要素の内容をどのように揃えるかを指定する。
各値は以下のような意味を持つ:
テキストを含むブロックは行ボックスの積み重ねから成る。 このプロパティが'left'、'right'、'center'などの値を取る場合、それは各行ボックス内のインラインボックスを、その行ボックスの左端もしくは右端に対してどう揃えるのかを指定しているのである。 決して閲覧領域に対する揃え方を指定しているわけではない。 'justify'という値が指定された場合、UAはインラインボックスの位置を調整するだけでなく、ボックスを伸縮させてもかまわない。 詳細は'letter-spacing'、'word-spacing'なども参照のこと。
次のような例の場合、'text-align'は値継承を行うので、class属性がcenterであるDIV要素内のブロック要素は、インラインの内容を中央揃えすることになる。
DIV.center { text-align: center }
注。 実際に用いられる両端揃えのアルゴリズムは、UA及び使用言語に依存する。
適合UAは、'justify'という値を、当該要素のデフォルトの書字方向に従って'left'あるいは'right'として扱ってもよい。 そのことは不適合を意味しない。
| Value: | none | [ underline || overline || line-through || blink ] | inherit |
|---|---|
| Initial: | none |
| Applies to: | all elements |
| Inherited: | no (see prose) |
| Percentages: | N/A |
| Media: | visual |
このプロパティは、要素のテキストに付加する装飾を指定する。 このプロパティがブロック要素に設定された場合、その効果は当該要素の子孫部にあるすべてのインライン要素に及ぶ。 また、インライン要素に設定された場合、その要素によって生成されるすべてのボックスに効果が及ぶ。 当該要素が内容を持たない場合（たとえばHTMLにおけるIMG要素）、UAはこのプロパティを無視しなければならない。
各値は以下の様な意味を持つ:
テキスト装飾に必要な色は'color'プロパティ値と同じにすべきである。
このプロパティは継承を行わない。 しかし当該ブロックの子孫部に当たるボックスは、すべて同じ装飾を施されるべきである（たとえばすべて下線を施されるべきである）。 またその時、子孫部の要素が'color'プロパティに異なる値を持っていても装飾の色は同じにすべきである。
以下に示すHTMLの例において、ハイパーリンクとして機能するすべてのA要素のテキストには下線が施されるだろう。
A[href] { text-decoration: underline }
このプロパティには、当該要素のテキストに適用する影効果を、コンマで区切った値のリストで指定する。 影効果は指定された順序のまま適用されて各効果はお互い上から被さっていくが、テキスト自身が上塗りされる事はない。 また、影効果がボックスの大きさを変えることはないが、効果がボックスの領域外に及ぶことはある。 その時、影効果のスタックレベルは当該要素自身のスタックレベルと同じになる。
各影効果には影の位置を指定しなければならない。 一方影のぼかし範囲及び影の色は任意で指定できる。
影の位置指定は、テキスト本体からの距離を指し示す二つの長さの値<length>で行われる。 1つ目の値は、影をテキストの右側へずらす水平距離を示す。 負の値を指定すると、影をテキストの左側へずらす。 2つ目の値は、影をテキストの下側へずらす垂直距離を示す。 負の値を指定すると、影をテキストの上側へずらす。
影の位置指定の後に、影のぼかし範囲を指定してもよい。 ぼかしの範囲指定は、影の効果が及ぶ最外境界線までの距離を指し示す長さの値によって行われる。 ぼかしの効果を計算する正確なアルゴリズムについては規定しない。
以上に示した三つの長さの値の前もしくは後に、影の色を指定してもよい。 指定した色は影効果の色の基調として用いる。 この指定が無い場合は、代わりに'color'の値を用いる。
この影効果は :first-letter及び:first-line疑似要素と併用できる。
次の例では、テキスト本体の右下に影が付く。 色の指定が無いので影の色は当該要素のテキストと同じ色になり、ぼかしの範囲指定も無いので、テキストの影はぼかされない:
H1 { text-shadow: 0.2em 0.2em }
次の例では、テキストの右下に影が付く。 また、影の周囲5pxの範囲でぼかしが生じ、影の色は赤になる:
H2 { text-shadow: 3px 3px 5px red }
次の例では影効果を複数列挙している。 1つ目の影は色が赤、ぼかしが無しで、テキスト本体の右下に生じる。 2つ目の影は一つ目の影を上塗りし、色が黄色、ぼかしが有りで、テキスト本体の左下に生じる。 3つ目の影はテキスト本体の右上に生じる。 3つ目の影には色の指定が無いので、当該要素の'color'の値と同じ色が使われる:
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
こんな例を考えてみよう:
SPAN.glow {
background: white;
color: white;
text-shadow: black 0px 0px 5px;
}
この例では'background'と'color'が同じ色の値を持っており、'text-shadow'プロパティは日食(solar eclipse)の様な文字効果を創り出すのに用いられている:
注。 このプロパティはCSS1には定められていない。 効果の使い方によっては（たとえば最後の例の様な場合）、CSS1のみに対応したUAが不可視のテキストを描画する事もあり得る。
| Value: | normal | <length> | inherit |
|---|---|
| Initial: | normal |
| Applies to: | all elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
このプロパティはテキストの文字間隔を指定する。 各値は以下のような意味を持つ:
文字間隔算出のアルゴリズムはUA依存である。 また、文字間隔は両端揃えの影響を受ける事もある。 'text-align'プロパティを参照のこと。
次の例では、BLOCKQUOTE要素の文字間隔が'0.1em'分増加する。
BLOCKQUOTE { letter-spacing: 0.1em }
次の例では、UAによる文字間隔の変更を禁止している:
BLOCKQUOTE { letter-spacing: 0cm } /* Same as '0' */
文字間隔の計算結果がデフォルトの間隔と異なる場合、UAは合字(ligatures)を用いるべきではない。
適合するUAは、'letter-spacing'の値をすべて'normal'として扱ってもよい。 そのことは不適合を意味しない。
| Value: | normal | <length> | inherit |
|---|---|
| Initial: | normal |
| Applies to: | all elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
このプロパティは単語の間隔を指定する。 各値は以下のような意味を持つ:
単語間隔算出のアルゴリズムはUA依存である。 また、単語間隔は両端揃えの影響を受ける事もある。 'text-align'プロパティを参照のこと。
以下の例では、H1要素の各単語間隔が'1em'分増加する。
H1 { word-spacing: 1em }
適合UAは'word-spacing'の値をすべて'normal'として扱ってもよい。 そのことは不適合を意味しない。
| Value: | capitalize | uppercase | lowercase | none | inherit |
|---|---|
| Initial: | none |
| Applies to: | all elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
このプロパティは、要素のテキストを大文字化・小文字化する。 各値は以下のような意味を持つ:
大文字・小文字間で実際にどの様な変換が行われるかはテキストに使用される言語によって異なる。 要素単位での言語情報を認識する手段については[RFC2070]を参照の事。
対象となる文字列が西欧言語領域（Latin-1 repertoire）に含まれない場合、あるいは要素に含まれる言語の大小文字の変換方法が[ISO10646]の大小文字変換表と異なる場合、適合するUAは'text-transform'の値をすべて'none'として扱ってもよい。 そのことは不適合を意味しない。
この例ではH1要素の全テキストが大文字化される。
H1 { text-transform: uppercase }
| Value: | normal | pre | nowrap | inherit |
|---|---|
| Initial: | normal |
| Applies to: | block-level elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
このプロパティは当該要素内の空白類文字がどう処理されるかを宣言する。 各値は以下の様な意味を持つ:
次の例では、HTMLのPRE要素、P要素、及びnowrap属性に期待されている、空白類文字の扱いを示している。
PRE { white-space: pre }
P { white-space: normal }
TD[nowrap] { white-space: nowrap }
適合UAは文書作成者及びユーザのスタイルシートに指定された'white-space'プロパティを無視してもよい。 そのことは不適合を意味しない。 ただし、デフォルトスタイルシートには値を設定する必要がある。