標準情報(TR)  TR X 0011:1998

段階スタイルシート 水準1(CSS1)

Cascading Style Sheets, level 1



序文

この標準情報(TR)は, 1996年12月にWorld Wide Web Consortium(W3C)から公表された Cascading Style Sheets, level 1 勧告を翻訳し, 技術的内容を変更することなく作成した標準情報(TR)である。

0    一般

0.1    適用範囲

この標準情報(TR)は,段階スタイルシート(CSS)の水準1(以降, CSS1)の機構を規定する。 CSS1は,簡単なスタイルシート機構であって,著者及び読者が,フォント,カラー,スペースなどのスタイルをHTML文書に付与することを可能にする。 CSS1言語は,人が読み書きでき,通常のデスクトップ出版用語によってスタイルを表記する。

CSSの基本的な特徴の一つは,スタイルシートが段階的であることにある。つまり,著者は希望するスタイルシートを付与できるが,読者は,人的又は技術的ハンディキャップを調整するために個人的なスタイルシートをもってもよい。異なるスタイルシート間の競合を解決するための規則を,この標準情報(TR)が規定する。

この標準情報(TR)の原規定は,スタイルシート分野のW3Cの活動によって作成された。スタイルシートの背景情報については,[1]を参照されたい。

0.2    定義

属性(attribute)
HTMLの属性。
著者(author)
HTML文書を作成する人。
ブロックレベル要素(block-level element)
前後に改行をもつ要素。例えば, HTMLにおける'H1'。
描画面(canvas)
UAが描画する面の一部であって,そこに文書を可視化する。
子要素(child element)
SGML[5]用語における下位要素
文脈選択子(contextual selector)
文書構造の中での位置に基づいて要素との一致をとる選択子。文脈選択子は,幾つもの単純選択子から成る。例えば,文脈選択子'H1.initial B'は,二つの単純選択子'H1.initial'及び'B'から成る。
CSS
段階スタイルシート(Cascading Style Sheets)の短縮形。
CSS1
段階スタイルシート水準1(Cascading Style Sheets, level 1)の短縮形。この標準情報(TR)は,ウェブ用の簡単なスタイルシート機構であるCSS1を規定する。
CSS1上位機能(CSS1 advanced features)
この標準情報(TR)には規定されるが,CSS1コア機能には分類されない機能。
CSS1コア機能(CSS1 core features)
すべてのCSS1適合のUA(ユーザエージェント)に必要とされるCSS1の部分。
CSS1パーサ(CSS1 parser)
CSS1スタイルシートを読むUA(ユーザエージェント)。
宣言(declaration)
特性(例えば'font-size')及び対応する値(例えば'12pt')。
設計者(designer)
スタイルシートを設計する者。
文書(document)
HTML文書。
要素(element)
HTMLの要素。
要素型(element type)
SGML[5]用語における共通識別子(generic identifier)。
仮想タグ列(fictional tag sequence)
疑似クラス及び疑似要素の振舞いを記述するツール。
フォントサイズ(font size)
フォントの設計寸法。通常は,フォントのサイズは,ディセンダをもつ最も高さの低い字の下部から, アセンダをもち(オプションとして)ダイアクリティカルマークをもつ最も高さの高い字の上部までの距離に近似的に等しい。
HTML
ハイパテキストマーク付け言語(Hypertext Markup Language)[2]の短縮形であって, SGMLのアプリケーション。
HTML拡張(HTML extension)
多くの場合ある可視的効果をサポートするために,UAベンダが導入するマーク付け。HTML拡張の例として,"BGCOLOR"属性と同様に,"FONT"要素, "CENTER"要素及び"BLINK"要素がある。CSSの目的の一つは,別のHTML拡張を提供することにある。
行内要素(inline element)
前後に改行をもたない要素。例えば, HTMLにおける'STRONG'。
実寸法(intrinsic dimensions)
周囲に無関係に要素そのものによって定義される幅及び高さ。この標準情報(TR)は,すべての置換要素が(置換要素だけが)実寸法となることを前提とする。
親要素(parent element)
SGML[5]の用語における親要素(containing element)
疑似要素(pseudo-element)
構造的な要素ではなく表示上の項目(例えば,要素の最初の行)を指定するために, CSS選択子の中で用いる。
疑似クラス(pseudo-class)
HTMLソースに対する外部情報(例えば, アンカがたどったか否かという事実)を可能にして要素を分類するために, CSS選択子の中で用いる。
特性(property)
CSSによって影響を与えることができるスタイル上のパラメタ。この標準情報(TR)は, 特性及び対応する値のリストを定義する。
読者(reader)
文書を可視化する対象の人。
置換要素(replaced element)
CSSフォーマタだけがその実寸法を知る要素。HTMLにおいては, 'IMG', 'INPUT', 'TEXTAREA', 'SELECT'及び'OBJECT'の各要素が, 置換要素の例になり得る。例えば, 'IMG'要素の内容は, SRC属性が指定する画像によって置換されることが多い。CSS1は, 実寸法を知る方法については規定しない。
規則(rule)
宣言(例えば 'font-family: helvetica')及びその選択子(例えば 'H1')。
選択子(selector)
対応する規則をどの要素に適用するかを特定する文字列。選択子は, 単純選択子(例えば 'H1')であるか, 複数の単純選択子から成る文脈選択子(例えば 'H1 B')であるかのどちらかとする。
SGML
標準一般化マーク付け言語[5]のことであって, HTMLはそのアプリケーションとなる。
単純選択子(simple selector)
要素型及び/又は属性に基づいて要素との一致をとる選択子であり, 文書構造における要素の位置に基づくものではない。単純選択子の一例に, 'H1.initial'がある。
スタイルシート(style sheet)
規則の集まり。
UA
ユーザエージェント(User Agent)の短縮形であって, ウェブブラウザ又はウェブクライアントであることが多い。
ユーザ(user)
読者と同意。
重み(weight)
規則の優先権。

この標準情報(TR)においては, 一重引用符 ('...')は, HTML及びCSSの抜粋を引用する。

1    基本概念

簡単なスタイルシートを設計することは容易であり, HTMLを少し知っていて, 幾つかの基本的なデスクトップ出版用語を知っているだけでよい。例えば, 'H1'要素のテキストカラーを青にするには, 次のとおり記述すればよい。


  H1 { color: blue }

この例は, 簡単なCSS規則であって, 規則は二つの主要部分, つまり選択子('H1')及び宣言('color: blue')から成る。宣言は二つの部分, つまり特性('color')及び値('blue')をもつ。この例は, HTML文書を可視化するために必要な特性の一つだけに影響を与えようとするものであるが, それだけで一つのスタイルシートとして特徴付けられている。他のスタイルシートと組み合わせれば(CSSの基本的な特徴の一つが, スタイルシートを組み合わせること。), 文書の最終表示を決定する。

選択子は, HTML文書とスタイルシートとの間のリンクであり, すべてのHTML要素型は, 選択子になり得る。HTML要素型は, HTML規定[2]の中で定義される。

'color'特性は, HTML文書の表示を決定する約50個の特性の一つとする。この標準情報(TR)は, 特性及びそれがとる値のリストを定義する。

HTMLの著者は, その文書に固有のスタイルを推奨しようとする場合だけ, スタイルシートを書く必要がある。各UA("ウェブブラウザ"又は"ウェブクライアント"であることが多い。)は, 適当ではあるがありきたりの方法で文書を表示するデフォルトのスタイルシートをもっている。附属書Aは, HTML 2.0規定[3]が推奨するとおりにHTML文書を表示するスタイルシートの例を示す。

CSS1言語の形式文法については, 附属書Bが規定する。

1.1    HTMLへの組込み

スタイルシートが表示に影響を与えるためには, UAは, スタイルシートの存在を知らなければならない。HTML規定[2]が, どのようにしてHTMLをスタイルシートとをリンクさせるかを規定する。したがって1.1は, 参考であって規定ではない。


<HTML>

  <HEAD>

    <TITLE>title</TITLE>

    <LINK REL=STYLESHEET TYPE="text/css" 

      HREF="http://style.com/cool" TITLE="Cool">

    <STYLE TYPE="text/css">

      @import url(http://style.com/basic);

      H1 { color: blue }

    </STYLE>

  </HEAD>

  <BODY>

    <H1>Headline is blue</H1>

    <P STYLE="color: green">While the paragraph is green.

  </BODY>

</HTML>

この例は, スタイルとHTMLとを組み合わせる次の四つの方法を示す。

オプションd)は, スタイルを内容と混在させ, これまでのスタイルシートにあった利点を損ねる。

'LINK'要素は, 読者が選択できる別のスタイルシートを参照し, インポートしたスタイルシートは, スタイルシートの残りと自動的にマージされる。

従来より, UAは, 未知のタグに対しては何もせずに無視してきた。その結果, 古いUAは, 'STYLE'要素を無視するが, その内容は文書本体の部分として扱われ, そのまま可視化される。切り替えの際には, 'STYLE'要素を, SGMLコメントを用いて隠してもよい。


  <STYLE TYPE="text/css"><!--

    H1 { color: green }

  --></STYLE>

'STYLE'要素は, ([2]で定義するとおり)DTDの中で"CDATA"として宣言されるので, 適合SGMLパーサは, このスタイルシートを削除されるはずのコメントであるとは判断しない。

1.2    グループ化

スタイルシートのサイズを小さくするために, 選択子をコンマ区切りのリストでグループ化できる。


  H1, H2, H3 { font-family: helvetica }

同様に, 宣言もグループ化できる。


  H1 { 

    font-weight: bold; 

    font-size: 12pt;

    line-height: 14pt; 

    font-family: helvetica; 

    font-variant: normal;

    font-style: normal;

  }

固有のグループ化構文をもつ特性もある。


  H1 { font: bold 12pt/14pt helvetica }

この例は, その前の例に等価となる。

1.3    継承

最初の例(1の例)において, 'H1'要素のカラーは青に設定された。'H1'要素の中に強調要素があるとしよう。


  <H1>The headline <EM>is</EM> important!</H1>

'EM'要素にカラーが指定されていなければ, 強調された"is"は, 親要素のカラーを継承する。つまり, それも青く表示される。'font-family', 'font-size'などの他のスタイル特性も同様に継承される。

"デフォルト"のスタイル特性を文書に設定するために, すべての可視要素を下位にもつ要素に対して特性を設定できる。HTML文書では, 'BODY'要素がこの機能を果たす。


  BODY { 

    color: black;

    background: url(texture.gif) white;

  }

たとえ著者が'BODY'タグを省略しても(文法には違反しない), これは動作する。それは, HTMLパーサが欠けたタグを推定することによる。この例は, テキストカラーを黒に, 背景をある画像に設定する。もしその画像がなければ, 背景は白になる。(これに関する詳細は, 5.3を参照されたい。)

親要素から子要素に継承されないスタイル特性もある。ほとんどの場合, それは直感に基づく。例えば, 'background'特性は継承しないが, 親要素の背景はデフォルトで透けて見える。

特性の値が, 他の特性に対するパーセントの値になることも多い。


  P { font-size: 10pt }

  P { line-height: 120% }  /* relative to 'font-size', i.e. 12pt */

パーセントの値を使える各特性に関しては, それがどの特性を参照するかを定義する。'P'の子要素は, percentageではなく, 'line-height'の計算された値(つまり12pt)を継承する。

1.4    選択子としてのクラス

要素に対する制御の粒度を高めるために, 新しい属性'CLASS'がHTMLに追加された[2]。'BODY'要素の中のすべての要素はクラスに分類でき, スタイルシートの中でそのクラスを指定できる。


<HTML>

 <HEAD>

  <TITLE>Title</TITLE>

  <STYLE TYPE="text/css">

    H1.pastoral { color: #00FF00 }

  </STYLE>

 </HEAD>

 <BODY>

  <H1 CLASS=pastoral>Way too green</H1>

 </BODY>

</HTML>

通常の継承規則は, クラス分けされた要素に適用する。それらは, 文書構造の親要素から値を継承する。

選択子の中でタグ名を省略することによって, 同一クラスのすべての要素を指定できる。


  .pastoral { color: green }  /* all elements with CLASS pastoral */

選択子ごとに一つだけのクラスを指定できる。したがって 'P.pastoral.marine'は, CSS1では無効な選択子となる。(1.6に示す文脈選択子は, 単純選択子ごとに一つのクラスをもつことができる。)

CSSは, CLASS属性に大きな力を与えているので, 多くの場合, どのHTML要素にそのクラスが設定されているかはまったく問題でない。どの要素に対してもそれ以外の要素をエミュレートさせることができる。この力の引継ぎは推奨しない。それは, 普遍的な意味をもつ構造(HTML要素)の水準をそれが削除することによる。CLASSに基づく構造は, 制限付きドメインの中だけで有効であり, そこではクラスの意味は相互に承認されてきた。

1.5    選択子としてのID

HTML [2]は, 文書に関して一意な値をもつことが保証されている'ID'属性も導入している。したがってそれは, スタイルシートの選択子として特に重要であり得る。それは, '#'を前置して指定できる。


  #z98y { letter-spacing: 0.3em }

  H1#z98y { letter-spacing: 0.5em }



  <P ID=z98y>Wide text</P>

この例では, 最初の選択子は, 'ID'属性の値のために, 'P'要素と一致する。2番目の選択子は, 要素型('H1')及びID値の両方を指定し, その結果, 'P'要素とは一致しない。

ID属性を選択子として用いることによって, スタイル特性を要素ごとに設定できる。スタイルシートは文書構造を活用して設計されてきたが, この機能は, HTMLの構造要素の利点を用いることなく, 描画面にうまく表れる文書を, 著者が生成することを可能にする。スタイルシートのこの利用は, 推奨しない。

1.6    文脈選択子

継承は, CSS設計者のタイプ入力を削減する。すべてのスタイル特性を設定する代わりに, デフォルトを生成し, 例外をリストできる。'H1'の中の'EM'要素に別のカラーを与えるために, 次の指定を行える。


  H1 { color: blue }

  EM { color: red }

このスタイルシートが有効である場合, 'H1'の内外のすべての強調節は赤になる。'H1'の中の'EM'要素だけを赤にしたければ, 次の指定が可能になる。


  H1 EM { color: red }

選択子は開いている要素のスタック上での検査パターンであり, この形式の選択子は文脈選択子と呼ばれる。文脈選択子は, 空白によって分離された複数の単純選択子(これまでに記述した選択子は, すべて単純選択子であった。)から成る。最後の単純選択子に一致する要素(この場合, 'EM'要素)だけが, 検査パターンが一致する場合に限って, 指定される。CSS1の文脈選択子は, 先祖の関係を捜すが, 他の関係(例えば, 親子関係)は, 今後の改訂で導入するかもしれない。この例では, 'EM'が'H1'の子孫である場合, つまり'EM'が'H1'要素の内部にある場合に, 検査パターンが一致する。


  UL LI    { font-size: small }    

  UL UL LI { font-size: x-small }

ここでは, 最初の選択子は, 少なくても一つの先祖'UL'をもつ'LI'要素に一致する。2番目の選択子は, 最初の選択子のサブセット, つまり少なくても二つの先祖'UL'をもつ'LI'要素に一致する。その競合は, 2番目の選択子が, もっと長い検査パターンをもつので固有性がより高いことによって解決される。これに関する詳細は, 段階順序(3.2)を参照されたい。

文脈選択子は, 要素型, CLASS属性, ID属性又はこれらの組合せを探すことができる。


  DIV P           { font: small sans-serif }

  .reddish H1     { color: red }

  #x78y CODE      { background: blue }

  DIV.sidenote H1 { font-size: large }

最初の選択子は, 先祖の中に'DIV'をもつすべての'P'要素と一致する。2番目の選択子は, クラス'reddish'である先祖をもつすべての'H1'要素と一致する。3番目の選択子は, 'ID=x78y'をもつ要素の子孫であるすべての'CODE'要素と一致する。4番目の選択子は, クラス'sidenote'である先祖'DIV'をもつすべての'H1'要素と一致する。

幾つかの文脈選択子は, グループにまとめることができる。


  H1 B, H2 B, H1 EM, H2 EM { color: red }

これは, 次に等価となる。


  H1 B { color: red }

  H2 B { color: red }

  H1 EM { color: red }

  H2 EM { color: red }

1.7    コメント

CSSスタイルシートにおけるテキストのコメントは,Cプログラム言語[7]のコメントに類似している。


  EM { color: red }  /* red, really red!! */

コメントは, 入れ子にできない。CSS1パーサにとっては, コメントは空白に等価とする。

2    擬似クラス及び擬似要素

CSS1においては, スタイルは通常, 文書構造の中の要素位置に基づいて要素に付与される。多様なスタイルにもこの簡単なモデルで充分であるが, 幾つかのよく使う組み効果はカバーできない。疑似クラス及び疑似要素の概念は, CSS1での指定を拡張して, 外部情報がフォーマット化処理に影響を与えることを可能にする。

疑似クラス及び疑似要素は, CSS選択子で用いることができ, HTMLソースには存在しない。スタイルシートにおける指定に用いるために, 幾つかの条件のもとで, UAが疑似クラス及び疑似要素を"挿入"する。それらは"クラス"及び"要素"とよばれるが, それは, その振舞いを記述する便利な方法であることによる。もっと細かくは, 仮想タグ列がその振舞いを定義する。

疑似要素は, 要素の一部を指定するのに用い, 疑似クラスは, スタイルシートをいろいろな要素型の中で区別可能にする。

2.1    アンカ擬似クラス

UAは通常, 新しくたどられたアンカを古いものと区別して表示する。CSS1では, これを'A'要素の中の疑似クラスが扱う。


  A:link { color: red }       /* unvisited link */

  A:visited { color: blue }   /* visited links */

  A:active { color: lime }    /* active links */

'HREF'属性をもつすべての'A'要素は, これらのグループの一つ(一つだけ)に入る(つまり, 目標アンカは影響を受けない。)。UAは, 要素を'visited(たどり済み)'から'link(リンク)'に, ある時間の後に移ることを選択してよい。'active(活性)'リンクは, 現在読者が(例えば, マウスボタン押下によって)選択中であるものとする。

アンカ疑似クラスのフォーマット化は, クラスが手動で挿入された場合に類似している。UAは, アンカ疑似クラスの遷移によって現在表示している文書を, 再フォーマットする必要はない。例えば, スタイルシートは, 文法に違反せずに, 'active'リンクの'font-size'は'visited'リンクのそれより大きくすることを指定できるが, 読者が'visited'リンクを選択するとき, UAが動的に文書を再フォーマットする必要はない。

疑似クラス選択子は, 通常のクラスと一致せず, 逆も成り立つ。したがって, 次の例のスタイル規則はどんな影響も与えない。


  A:link { color: red }



  <A CLASS=link NAME=target5> ... </A>

CSS1では, アンカ疑似クラスは, 'A'以外の要素には影響を与えない。したがって, 要素型を選択子から省略できる。


  A:link { color: red }

  :link { color: red }

この二つの選択子は, CSS1の中の同一要素を選択する。

疑似クラスの名前では, 大文字・小文字を区別しない。

疑似クラスは, 文脈選択子の中で使用できる。


  A:link IMG { border: solid blue }

疑似クラスは, 通常のクラスと組合せることができる。


  A.external:visited { color: blue }



  <A CLASS=external HREF="http://out.side/">external link</A>

この例におけるリンクがたどられると, それは青に可視化される。通常クラスの名前は, 選択子の中で疑似クラスの前に置くことに注意されたい。

2.2    表示上の擬似要素

幾つかの表示上のよく使う組み効果は, 構造要素とは関連しないが, 描画面にフォーマットされる表示上の項目と関連する。CSS1においては, これらの二つの表示上の項目は, 疑似要素, つまり要素の最初の行及び最初の字, によって指定できる。

CSS1コア: UAは, 選択子の中の':first-line'又は':first-letter'をもつすべての規則を無視してよい。そうでなければ, これらの疑似要素の特性のサブセットをサポートするだけとする(7.参照)。

2.3    'first-line'擬似要素

'first-line'擬似要素は, 描画面にフォーマットされる最初の行に特別なスタイルを適用するために使用する。


  <STYLE TYPE="text/css">

    P:first-line { font-style: small-caps }

  </STYLE>



  <P>The first line of an article in Newsweek.

テキストベースのUAでは, これは次のとおりフォーマットされる。


  THE FIRST LINE OF AN

  article in Newsweek.

この例の仮想タグ列を, 次に示す。


  <P>

  <P:first-line>

  The first line of an 

  </P:first-line>

  article in Newsweek.

  </P>

'first-line'終了タグは, 描画面にフォーマットされる最初の行の行末に挿入される。

'first-line'疑似要素は, ブロックレベル要素だけに付与することができる。

'first-line'疑似要素は, 行内要素に類似しているが, 制限を伴う。次の特性だけが, 'first-line'要素に適用される。 フォント特性 (5.2), カラー及び背景特性 (5.3), 'word-spacing' (5.4.1), 'letter-spacing' (5.4.2), 'text-decoration' (5.4.3), 'vertical-align' (5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), 'clear' (5.5.26).

2.4    'first-letter'擬似要素

'first-letter'擬似要素は, 表示上のよく使う組み効果である"イニシャルキャップ"及び"ドロップキャップ"に使用する。それは, 'float'特性が'none'であれば, 行内要素に類似し, そうでなければ, 浮動要素に類似する。'first-letter'疑似要素に適用される特性を次に示す。 フォント特性 (5.2), カラー及び背景特性 (5.3), 'text-decoration' (5.4.3), 'vertical-align' ('float'が'none'の場合だけ, 5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), 余白特性 (5.5.1-5.5.5), パディング特性(5.5.6-5.5.10), 境界特性 (5.5.11-5.5.22), 'float' (5.5.25), 'clear' (5.5.26).

どのようにしてドロップキャップ頭文字を2行にわたらせるかを次に示す。


<HTML>

 <HEAD>

  <TITLE>Title</TITLE>

  <STYLE TYPE="text/css">

   P              { font-size: 12pt; line-height: 12pt }

   P:first-letter { font-size: 200%; float: left }

   SPAN           { text-transform: uppercase }

  </STYLE>

 </HEAD>

 <BODY>

  <P><SPAN>The first</SPAN> few words of an article in The Economist.</P>

 </BODY>

</HTML>

UAが'first-letter'疑似要素をサポートする場合(多くの場合サポートしないが), この例は次のとおりフォーマットされる。


  ___

   | HE FIRST few

   | words of an 

  article in the

  Economist.

仮想タグ列は,次のとおり。


  <P>

  <SPAN>

  <P:first-letter>

  T

  </P:first-letter>he first

  </SPAN> 

  few words of an article in the Economist.

  </P>

'first-line'疑似要素の開始タグは, それが付いている要素の開始タグの後の右に挿入されるが, 'first-letter'疑似要素は, 内容(つまり, 最初の文字)についてタグ付けすることに注意されたい。

UAは, どの文字が'first-letter'要素の中にあるかを定義する。通常は, 最初の文字に前置する引用が含まれなければならない。

段落が他の句読点(例えば, かっこ及び省略点), 又は通常は字としては扱われない他の文字(例えば, 小数点及び数学記号)で始まるとき, 'first-letter'疑似要素は通常無視される。

字の組合わせ(letter combination)の扱い方に関する固有の規則をもつ言語がある。例えばオランダ語では, 字の組合わせ"ij"が語の始めに現れると, それらはどちらも'first-letter'疑似要素として考慮される。

'first-letter'疑似要素は, ブロックレベル要素だけに付与される。

2.5    選択子中の擬似要素

文脈選択子において, 疑似要素は選択子の最後だけに置くことができる。


  BODY P:first-letter { color: purple }

疑似要素は, 選択子の中でクラスと組み合わせることができる。


  P.initial:first-letter { color: red }



  <P CLASS=initial>First paragraph</A>

この例は, 'CLASS=initial'であるすべての'P'要素の最初の字を赤にする。クラス又は疑似クラスと組み合わされるとき, 疑似要素は, 選択子の最後で指定されなければならない。選択子ごとに一つだけの疑似要素を指定できる。

2.6    複数疑似要素

疑似要素は幾つか組み合わせることができる。


  P { color: red; font-size: 12pt }

  P:first-letter { color: green; font-size: 200% }

  P:first-line { color: blue }



  <P>Some text that ends up on two lines</P>

この例では, 各'P'要素の最初の字は, 24ポイントのフォントサイズで緑になる。段落の残りは赤であるが, (描画面にフォーマットされる)最初の行の残り(最初の字以外)は青になる。語"ends"の前で改行する場合, 仮想タグ列は次のとおりとなる。


  <P>

  <P:first-line>

  <P:first-letter> 

  S 

  </P:first-letter>ome text that 

  </P:first-line> 

  ends up on two lines 

  </P>

'first-letter'要素は, 'first-line'要素の内部にあることに注意されたい。'first-line'に設定された特性は, 'first-letter'に継承されるが, 同じ特性が'first-letter'に設定されると上書きされる。

疑似要素が実要素を割るとき, 必要な追加タグを仮想タグ列に再生成しなければならない。例えば, SPAN要素が</P:first-line>タグをまたぐとき, SPAN終了タグ及びSPAN開始タグが再生成されて, 仮想タグ列は次のとおりとなる。


  <P>

  <P:first-line>

  <SPAN> 

  This text is inside a long 

  </SPAN>

  </P:first-line>

  <SPAN> 

  span element 

  </SPAN>

3    段階

CSSにおいては, 複数のスタイルシートが同時に表示に影響を与えることができる。この機能は, モジュール化, 及び著者と読者とのバランスという二つの主要な理由による。

モジュール化
スタイルシートの設計者は, 冗長性を小さくするために, 幾つかの(部分)スタイルシートを組み合わせることができる。

  @import url(http://www.style.org/pastoral);

  @import url(http://www.style.org/marine);



  H1 { color: red }     /* override imported sheets */

著者と読者とのバランス
著者及び読者のどちらも, スタイルシートによって表示に影響を与えることができる。それを行うために, 彼らは同じスタイルシート言語を用いて, だれもが出版者になれるというウェブの基本機能を反映する。UAは, 個人のスタイルシートを参照する機構を自由に選択できる。

表示に影響を与えるスタイルシートの間で競合が生じることが, 時々ある。競合は, 重みをもつ各スタイル規則に基づいて, 解決される。デフォルトでは, 読者の規則の重みは, 著者の文書における規則の重みより小さい。つまり, 受領文書のスタイルシートと読者の個人シートとの間で競合があると, 著者の規則が採用される。読者の規則及び著者の規則のどちらも, UAのデフォルト値を上書きする。

インポートしたスタイルシートも, インポートした順序に, 次に規定する段階規則に従って, 互いに段階的となる。スタイルシートそのものの中で指定された規則はすべて, インポートされたスタイルシートの規則を上書きする。つまり, インポートされたスタイルシートは, スタイルシートそのものの中の規則より, 段階順序が小さい。インポートされたスタイルシートは, 再帰的に他のスタイルシートをインポートし上書きすることができる。

CSS1においては, '@import'ステートメントは, スタイルシートの最初に, すべての宣言の前に現れなければならない。その結果, スタイルシートそのものの中の規則が, インポートされたスタイルシートの中の規則を上書きすることを容易に見ることができる。

3.1    'important'

スタイルシート設計者は, その宣言の重みを増加できる。


  H1 { color: black ! important; background: white ! important }

  P  { font-size: 12pt ! important; font-style: italic }

この例では, 最後の宣言は通常の重みをもつが, 最初の三つの宣言は増加した重みをもつ。

重要宣言をもつ読者の規則は, 通常宣言をもつ著者の規則を上書きする。重要宣言をもつ著者の規則は, 重要宣言をもつ読者の規則を上書きする。

3.2    段階順序

競合する規則は, CSS機構にとって本質的であり, 要素と特性との組合わせに関する値を見つけるために, 次のアルゴリズムに従わなければならない。

  1. 問題となっている要素と特性との組合わせに適用する宣言を見つける。問題の要素に選択子が一致すれば, 宣言が適用される。適用される宣言がなければ, 継承された値を用いる。継承された値がない場合('HTML'要素の場合及び継承しない特性の場合)は, 初期値を用いる。
  2. 明示的な重みによって宣言をソートする。'!important'のマークのある宣言は, マークなしの(通常の)宣言より重みが大きい。
  3. 出典によってソートする。著者のスタイルシートは読者のスタイルシートを上書きし, 読者のスタイルシートはUAのデフォルト値を上書きする。インポートされたスタイルシートは, インポート先のスタイルシートと同じ出典をもつ。
  4. 選択子の固有性によってソートする。固有性の高い選択子は, 一般の選択子を上書きする。固有性を見つけるために, 選択子の中のID属性の個数を数え(a), 選択子中のCLASS属性の個数を数え(b), 選択子中のタグ名の個数を数える(c)。(大きな基数をもつ数値表記システムで)これらの三つの個数を結合したものが, 固有性を与える。例を次に示す。
    
      LI            {...}  /* a=0 b=0 c=1 -> specificity =   1 */
    
      UL LI         {...}  /* a=0 b=0 c=2 -> specificity =   2 */
    
      UL OL LI      {...}  /* a=0 b=0 c=3 -> specificity =   3 */
    
      LI.red        {...}  /* a=0 b=1 c=1 -> specificity =  11 */
    
      UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity =  13 */ 
    
      #x34y         {...}  /* a=1 b=0 c=0 -> specificity = 100 */ 
    
    

    疑似要素及び疑似クラスは, それぞれ通常の要素及び通常のクラスとして数えられる。

  5. 指定された順序でソートする。二つの規則が同一の重みをもつ場合には, 後で指定されたものが勝つ。インポートされたスタイルシートにおける規則は, スタイルシートそのものにおけるどんな規則よりも前にあるとする。

一つの規則が, 同じ要素と特性との組合わせに適用される他の規則よりも大きい重みをもつときはいつでも, 特性の検査を終了できる。

この方策は, 著者のスタイルシートに, 読者のそれよりもかなり大きい重みを与える。したがって, 読者があるスタイルシートの影響を, 例えばプルダウンメニューによって遮断できるということが, 重要になる。

要素の'STYLE'属性の中の宣言は, スタイルシートの終わりに指定されるIDベースの選択子をもつ宣言と同じ重みをもつ。


<STYLE TYPE="text/css">

  #x97z { color: blue }

</STYLE>



<P ID=x97z STYLE="color: red">

この例において, 'P'要素のカラーは赤になる。固有性は両方の宣言について同一であるが, 'STYLE'属性における宣言は, 段階規則5.によって, 'STYLE'要素のそれを上書きする。

UAは, 他のHTMLスタイル属性, 例えば'ALIGN', を尊重することを選択してよい。その場合, これらの属性は, 1に等しい固有性をもって, 対応するCSS規則に翻訳される。その規則は, 著者のスタイルシートの開始点にあることを前提とし, 後続のスタイルシート規則によって上書きされ得る。遷移フェーズにおいては, この方策は, スタイル属性がスタイルシートと共存することを容易にする。

4    フォーマット化モデル

CSS1は, 簡単なボックス指向のフォーマット化モデルを前提とする。そのモデルでは, 各要素は, 1個以上のく(矩)形のボックスに帰着する。('display'値が'none'である要素は, フォーマットされず, したがってボックスには帰着しない。) すべてのボックスは, 一つのコア内容領域をもち, それにはオプションの周囲を囲むパディング領域, 境界領域及び余白領域を伴う。

図 4.1 フォーマット化モデル

余白, 境界及びパディングのサイズは, それぞれ余白特性 (5.5.1-5.5.5), パディング特性 (5.5.6-5.5.10), 及び境界特性 (5.5.11-5.5.22) を用いて設定される。 パディング領域は, その要素そのものと同じ背景を用いる(背景特性 5.3.2-5.3.7を設定する。)。 境界のカラー及びスタイルは, 境界特性を用いて設定される。余白は常に透明であり, 親要素が透けて見える。

ボックスのサイズは, 要素の幅(つまり, フォーマット済みのテキスト又は画像), パディング領域, 境界領域及び余白領域の合計になる。

フォーマタの観点では, 二つの主要な要素の型, つまりブロックレベル及び行内がある。

4.1    ブロックレベル要素

'display'値が'block'又は'list-item'である要素をブロックレベル要素とする。浮動要素('float'値が'none'ではない要素)も, ブロックレベル要素と見なせる。

次の例は, 余白及びパディングが, 二つの子をもつ'UL'要素をどのようにフォーマットするかを示す。図を簡単にするため, 境界はない。この例における一字の'constants'は, CSS1構文に文法的に合わないが, スタイルシートの値を図に結びつけるのにつごうがよい。


    <STYLE TYPE="text/css">

      UL { 

        background: red; 

        margin: A B C D;      

        padding: E F G H;

      }

      LI { 

        color: white;    

        background: blue;     /* so text is white on blue */ 

        margin: a b c d; 

        padding: e f g h;

      }

    </STYLE>

    ..

    <UL>

      <LI>1st element of list

      <LI>2nd element of list

    </UL>

図 4.2 二つの子をもつ'UL'要素のフォーマット

技術的には, パディング特性及び余白特性は継承されない。しかしこの例が示すとおり, 要素の配置は先祖及び兄弟に対して相対的であり, これらの要素のパディング特性及び余白特性はそれらの子に影響を与える。

もしこの例に境界があったら, それはパディングと余白との間に現れる。

次の図は, 幾つかのよく使う用語を導入している。

図 4.3 よく使う用語

左外辺は, パディング, 境界及び余白を考慮した要素の端とする。左内辺は, パディング, 境界又は余白のすべての内側にある内容だけの端とする。右側についても同様とする。上部は, パディング, 境界及び余白のすべてを含むオブジェクトの上端とする。それは, 行内要素及び浮動要素だけのために定義され, 非浮動のブロックレベル要素に対しては定義されない。内上部は, パディング, 境界又は余白の内側にある内容の上端とする。下部は, 要素の下端であって, パディング, 境界及び余白のすべての外側とする。それは, 行内要素及び浮動要素だけのために定義され, 非浮動のブロックレベル要素に対しては定義されない。内下部は, パディング, 境界及び余白のすべての内側にある要素の下端とする。

要素のは, 内容の幅であって, 左内辺と右内辺との間の距離とする。高さは, 内容の高さであって, 内上部と内下部との間の距離とする。

4.1.1    上下方向フォーマット化

非浮動ブロックレベル要素の余白の幅は, 周囲のボックスの端への最小距離を指定する。二つ以上の隣接する上下方向の余白(つまりそれらの間には, 境界, パディング又は内容はない。)は, 余白の最大値を使用すると, つぶれる。多くの場合, 上下方向の余白をつぶすと, 視覚的には好まれる結果となり, 設計者の期待するものに近づく。図4.2の例では, 最初のLI要素の'margin-bottom'及び2番目のLI要素の'margin-top'の最大値を使用することによって, 二つの'LI'要素の間の余白は, つぶされている。同様に, 'UL'要素と最初の'LI'要素('E'定数)との間のパディングがゼロだと, UL要素及び最初のLI要素の余白はつぶされる。

余白が負の場合, 負の隣接余白の絶対最大値は, 正の隣接余白の最大値から差し引かれる。正の余白がない場合には, 負の隣接余白の絶対最大値は, ゼロから差し引かれる。

4.1.2    左右方向フォーマット化

非浮動ブロックレベル要素の左右方向の位置及び大きさは,次の七つの特性で決定する。 七つの特性とは,'margin-left'(左余白),'border-left'(左境界),'padding-left'(左パディング), 'width'(幅),'padding-right'(右パディング),'border-right'(右境界)及び 'margin-right' (右余白)とする。これら七つの和は,常に,親要素の'width'に等しい。

デフォルトで,要素の'width'は,'auto'とする。 要素が置換要素でない場合には,このことは,'width'がUAによって計算され, 先の七つの特性の和が親の幅に等しくなることを意味する。 要素が置換要素の場合には,'width'に対する'auto'の値は,自動的に, その要素の基本幅によって置き換えられる。

七つの特性の内,'margin-left','width'及び'margin-right'の三つは,'auto'に設定できる。 置換要素に対しては,'width'についての'auto'の値は,基本の幅で置き換えられる。 そこで,置換要素に対しては,二つの'auto'値だけが存在できる。

'width'は,負でないUA定義の最小値をもつ。 (ただし,このUA定義の最小値は,要素ごとに変わってもよいし,他の特性に依存してもよい。) 'width'を明示的に設定した,又は'width'が'auto'であって以下の規則によって'width' が非常に小さくなった,のいずれかの理由のために,'width'がこの限界を下回った場合は, その値は,代わりに,最小値で置き換えられる。

'margin-left','width'又は'margin-right'の一つだけが'auto'の場合, UAは,その特性に,七つの特性の和を親の幅に等しくする値を割り当てる。

'margin-left','width'又は'margin-right'の一つも'auto'でない場合, 'margin-right'を'auto'に割り当てる。

'margin-left','width'又は'margin-right'の二つ以上が'auto'の場合であって, その一つが'width'の場合,'width'以外のもの('margin-left'及び/又は'margin-right')は, ゼロに設定し,'width'は,七つの和を親の幅に等しくするのに必要な値をとる。

そうでない場合であって,'margin-left'及び'margin-right'の両方が'auto'の場合, これらを等しい値に設定する。これによって,親の中で要素が中心に位置する。

行内又は浮動とする要素において,七つの特性の一つに対する値として,'auto' を設定する場合,ゼロと設定したものとして取り扱う。

上下方向の余白とは違い,左右方向の余白は,つぶれることはない。

4.1.3    リスト項目要素

'list-item'の'display'特性値をもつ要素は,ブロックレベル要素としてフォーマット化するが, リスト項目マーカが先行する。マーカの型は,'list-style'特性で決定する。 マーカは,'list-style' 特性の値に従って,位置づける。


  <STYLE TYPE="text/css">

    UL         { list-style: outside }

    UL.compact { list-style: inside }

  </STYLE>



  <UL>

    <LI>first list item comes first

    <LI>second list item comes second

  </UL>



  <UL CLASS=COMPACT>

    <LI>first list item comes first

    <LI>second list item comes second

  </UL>

この例は,次のとおりにフォーマット化される。


  * first list item 

    comes first

  * second list item

    comes second



  * first list

  item comes first

  * second list

  item comes second

左から右へと書く横書きのテキストでは,マーカは,ボックスの右側に存在する。

4.1.4    浮動要素

'float' 特性を使用して, 要素が,要素の正規フローの外側に存在する宣言を可能とする。 このとき,要素は,ブロックレベル要素としてフォーマット化される。 例えば,画像の'float'特性を'left'に設定することによって, 他のブロックレベル要素の余白,パディング又は境界に達するまで,その画像は左に移動する。 正規フローは,右側に巻き込まれる。要素それ自体の余白,境界及びパディングは,そのまま残り, 余白は,隣接する余白でつぶれることはない。

浮動要素は,次の制約に従って位置づけされる(用語の定義は, 4.1を参照。)。


  <STYLE TYPE="text/css">

    IMG { float: left }

    BODY, P, IMG { margin: 2em }

  </STYLE>



  <BODY>

    <P>

      <IMG SRC=img.gif>

      Some sample text that has no other...

  </BODY>

この例は,次のとおりにフォーマット化される。

図 4.4 浮動要素の表示例

'P'要素の余白は,浮動な'IMG'要素を囲い込むことに注意すること。

浮動要素が,他の要素の余白領域,境界領域及びパディング領域と重なることが可能な場合には, 次の二つの状況がある。

4.2    行内要素

ブロックレベル要素としてフォーマット化されない要素は,行内要素とする。 行内要素は,他の要素と行間を共有できる。次に例を示す。


  <P>Several <EM>emphasized</EM> words <STRONG>appear</STRONG>.</P>

'P'要素は,通常,ブロックレベルとなる。一方,'EM'及び'STRONG'は,行内要素となる。 'P'要素が,一つの行の全要素をフォーマット化するのに十分の幅をもつ場合, その行に二つの行内要素が存在することになる。


  Several emphasized words appear.

一つの行に十分な余地がない場合は,一つの行内要素がいくつかのボックスに分離する。


  <P>Several <EM>emphasized words</EM> appear here.</P>

この例は,次のとおりにフォーマット化される。


  Several emphasized

  words appear here.

行内要素が,余白,境界,パディング又は付加されたテキスト修飾をもつ場合, これらは,要素が分断された場所では,いかなる効果ももたない。

図 4.5 行内要素の表示例

(この "図" は,ASCIIによる図形を使用したために,多少ともゆがんでしまっている。 行の高さを計算する方法の規定に関しては,4.4を参照のこと。)

4.3    置換要素

置換要素は,その要素から指し示された要素で置き換えられた要素とする。 例えば,HTMLでは,'IMG'要素は,'SRC'属性によって指し示された画像で置換えられる。 置換要素は,それ自体の基本寸法をもってくると仮定できる。'width'特性の値が'auto'の場合, 要素の幅として基本幅を使用する。スタイルシートで,'auto'以外の値を指定している場合は, この値を使用し,置換要素は,それに従って,再度大きさを調整する。(この方法は,メディア型による。) 'height'特性も,同じ方法で使用する。

置換要素は,ブロックレベル又は行内の要素となることができる。

4.4    行の高さ

すべての要素は,原理的には,テキストの行の高さ全体を与える,'line-height'特性をもつ。 行の高さに達するために,行のテキストの上下に,スペースを追加する。例えば, テキストが12ポイントの高さをもち,'line-height'が'14pt'に設定されている場合, 2ポイントの余分なスペースを,通常は,行の上に1ポイント及び行の下に1ポイント, 追加する。空要素は,内容をもつ要素としてこの計算に影響する。

フォントサイズと'line-height'との差を,リーディング(leading)という。 リーディングの半分を,半リーディングという。フォーマット化の後では, 各行は,長方形の行ボックスを形成する。

(行にいくつかの行内要素が存在するために,)テキストの行が,違った'line-height' 値をもつセクションを含む場合,これらのセクションの各々は,それ自体の半リーディングを上下にもつ。 行ボックスの高さは,最も高さの高いセクションの上部から最も高さの低いセクションの下部までとする。 上部及び下部は必ずしも最も背の高い要素に対応するとは限らないことに注意すること。 これは,要素は,'vertical-align'特性で, 上下に位置づけできることによる。 段落を形成するために,各行ボックスは,その前の行のすぐ下に積み上げる。

非置換行内要素の上下の,パディング,境界又は余白のいかなるものも,行の高さには影響しないことに注意。 言い換えると,'line-height'が,選択したパディング又は境界に対して小さ過ぎる場合は, 他の行のテキストに重なる。

行における置換要素(例えば,画像)は,その置換要素の上部(つまり,そのパディング, 境界及び余白のすべてを含む。)が,最も背の高いテキストセクションの上にあるか, 下部が最も背の低いものの下にある場合には,行ボックスをより大きくすることができる。

通常の場合で,段落を通して'line-height'の値がただ一つだけ存在し,背の高い画像が存在しないときには, これまでの定義によって,続く行の基底線は,ちょうど'line-height'だけ離れることが確実になる。 これは,例えば表における,違ったフォントを使うテキストの行をそろえなければならないときに重要となる。

このことは,二つの隣接する行のテキストが,互いに重なり合わないことを排除するわけでは無いことに注意。 'line-height'は,テキストの高さよりも小さくともよい。この場合には,リーディングは,負となる。 これは,テキストが,(例えば,大文字だけを含むので,)下方に伸びる文字を含まない場合に役に立ち, 行を互いにより近づけることが可能となる。

4.5    描画面

描画面は,UAの,文書を可視化する描画の表面の一部とする。文書のいかなる構造的な要素も描画面には対応しない。 このことは,文書をフォーマット化するときに,次の二つの問題を生じる。

最初の問題に対する答は,合理的には,描画面の初期サイズはウィンドウサイズに基づくとするものになる。 しかし,CSS1では,この問題は,UAに決定を任せることとする。ウィンドウの大きさが変わった場合には, UAが描画面サイズを変えると期待するのも理にかなっている。しかし,これもCSS1の適用範囲外とする。

HTML拡張は,2番目の問題に対して優先度を設定する。すなわち,'BODY'要素の属性が, 描画面全体の背景を設定する。設計者の期待をサポートするために,CSS1では,描画面背景を見つけるために, 特別な規則を導入する。

'HTML'要素の'background'値が'transparent'と違う場合,その値を使用し,そうでない場合には, 'BODY'要素の'background'値を使用する。その結果の値が'transparent'のとき,描写は不定とする。

この規則は,次を許す。


  <HTML STYLE="background: url(http://style.com/marble.png)">

  <BODY STYLE="background: red">

この例では,描画面は,"marble" で覆われる。'BODY'要素の背景は,(描画面を完全に覆うかもしれないし, 覆わないかもしれないが,)赤となる。

描画面に情報を伝える他の方法が利用可能となるまで,描画面特性を'BODY'要素で設定することが望ましい。

4.6    'BR'要素

現在のCSS1特性及び値は,'BR'要素の振る舞いを示すことができない。 HTMLでは,'BR'要素は,語の間の行替えを指定する。実効的には,この要素は,行替えで置き換えられる。 CSSの将来の版では,追加内容及び置換内容を処理するかもしれない。しかし,CSS1に基づくフォーマッタは, 'BR'を特別に処理しなければならない。

5    CSS1特性

スタイルシートは,値をスタイル特性に割り当てることによって,文書の表示に影響する。 5.では,CSS1で定義済みのスタイル特性を示し,それら特性の可能な値の対応する一覧を示す。

5.1    特性値の記法

このテキストの以下では,各特性に対して許される値を次の構文で示す。

値: N | NW | NE
値: [ <length> | thick | thin ]{1,4}
値: [<family-name> , ]* <family-name>
値: <url>? <color> [ / <color> ]?
値: <url> || <color>

"<"と">"との間の語は,値の型を示す。最も共通の型は,<length>, <percentage>,<url>,<number>及び<color>とする。 これらは,6.で示す。より特殊な型(<font-family>及び <border-style>)は,対応する特性のもとで示す。

それ以外の語は,キーワードとし,引用符なしでそのまま出現しなければならない。 スラッシュ(/)及びコンマ(,)も,そのまま出現しなければならない。

いくつかの並置されたものは,それらすべてが,与えられた順番で出現しなければならないことを示す。 縦棒(|)は,選択肢を分離する。それらの一つが出現しなければならない。 2重縦棒(A || B)は,A若しくはB又は両方が,任意の順番で,出現しなければならないことを示す。 角かっこ([])は,グループ化のために使用する。並びは,2重縦棒よりも優先し,2重縦棒は, 縦棒よりも優先する。そこで, "a b | c || d e"は,"[ a b ] | [ c || [ d e ]]に等価になる。

型,キーワード又はかっこ付けしたグループのすべてに,次の修飾子の一つが続いてもよい。

5.2    フォント特性

フォント特性の設定は,スタイルシートを共通的に使用するときに使われる。 残念なことに,フォントを分類する,正しく定義され普遍的に受け入れられた分類学は,存在しない。 一つのフォントファミリに適用される用語が,他のフォントファミリには適切でないこともある。 例えば,'イタリック(italic)'は,傾斜したテキストをラベル付けするために,共通に使用するが, 傾斜したテキストは,Oblique,Slanted,Incline,Cursive又はKursivとして ラベル付けすることもできる。そこで,典型的なフォント選択特性を,特定のフォントに対応付けることは, 単純な問題ではない。

CSS1は,次の各特性,font-family'font-style''font-variant''font-weight''font-size'及び'font'を定義する。

5.2.1    フォント一致化

フォント特性についての普遍的に受け入れられた分類学は存在しないので, 書体に対する特性の一致化は,注意深く行わなければならない。 特性は,正しく定義された順番で一致化する。これによって,この一致化過程の結果を, UA間でできるだけ一貫性を保つことを保証する。 ただし,書体の同じライブラリを,UAの各々が所持していることを仮定する。

ステップ1
UAは、そのUAが知っているフォントすべての関連するCSS1特性データベースを作成 (又はアクセス)する。 UAは,あるフォントがローカルにインストールされている場合, 又は以前にウェブからダウンロードされた場合には,そのフォントを知っていることもある。 全く同じ特性をもつ二つのフォントが存在する場合は,どちらかを無視する。
ステップ2
要素が与えられると,その要素における各文字に対して,UAは, その要素に適用するフォント特性を組み立てる。 特性の完全な集合を使って,UAは,暫定的なフォントファミリを選択するために, 'font-family'特性を使用する。残りの特性は,各特性とともに示される一致化基準に従って, そのファミリに対して,試験する。残りの特性すべてが一致する場合は, その暫定的なフォントファミリを,与えられた要素に対する一致化書体とする。
ステップ3
ステップ2で処理される'font-family'内の一致化書体が存在せず, そのフォント集合にその次の代替'font-family'が存在する場合は,その代替'font-family' でステップ2を繰り返す。
ステップ4
ステップ2で選択した暫定的なフォントファミリの書体は存在するが, 着目している文字に対するグリフを含まず, フォント集合にその次の代替'font-family'が存在する場合は,その代替'font-family' でステップ2を繰り返す。フォント及び文字符号化の規定に関しては, 附属書Cを参照すること。
ステップ5
ステップ2で選択したフォントファミリ内にフォントが存在しない場合は, UAに依存するデフォルト'font-family'を使用し, デフォルトフォント内で取得可能な最も一致するものを使用して,ステップ2を繰り返す。

このアルゴリズムは,各文字に対するCSS1特性の再調査を回避する最適化を可能とする。

このステップ2からの特性ごとの一致化規則は,次による。

5.2.2    'font-family'

値: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
初期値: UA固有
適用対象: すべての要素
継承: yes
パーセント値: N/A

値は,フォントファミリ名及び/又は一般ファミリ名の優先度付けされたリストとする。 多くの他のCSS1特性とは違い,値はコンマで分離する。これは, 分離したものが選択肢となることを示す。


  BODY { font-family: gill, helvetica, sans-serif }

リストの値には,次の二つの型がある。

<family-name>
選択したフォントファミリの名前。例では,"gill"及び"helvetica"がフォントファミリとなる。
<generic-family>
例では,最後の値が一般ファミリ名となる。次の一般ファミリを定義する。
  • 'serif' (例えば,Times)
  • 'sans-serif' (例えば,Helvetica)
  • 'cursive' (例えば,Zapf-Chancery)
  • 'fantasy' (例えば,Western)
  • 'monospace' (例えば,Courier)

スタイルシートには,一般フォントファミリを最後の選択肢として提供するのがよい。

空白を含むフォント名は,引用符で囲むことが望ましい。


  BODY { font-family: "new century schoolbook", serif }



  <BODY STYLE="font-family: 'My own font', fantasy">

引用符を省略した場合には,フォント名の前後のいかなる空白文字も無視し, フォント名の中の空白文字の列は,一つのスペースに変換する。

5.2.3    'font-style'

値: normal | italic | oblique
初期値: normal
適用対象: すべての要素
継承: yes
パーセント値: N/A

'font-style'特性は,一つのフォントファミリ内での,本文書体(normal faceのこと。 "roman"又は"upright"として参照することがある。),イタリック体(italic faceのこと。) 及び斜体(oblique faceのこと。)のうちから選択する。

'normal'の値は,UAのフォントデータベースで'normal'と分類されるフォントを選択する。 一方,'oblique'は,'oblique'とラベル付けされたフォントを選択する。 'italic'の値は,'italic'とラベル付けされたフォントを選択するか,それが使用できない場合は, 'oblique'とラベル付けされたフォントを選択する。

UAのフォントデータベースで,'oblique'とラベル付けされたフォントは,実際には, 本文書体を電子的に傾斜することで生成してもよい。

名前に,Oblique,Slanted又はInclineをもつフォントは,UAのフォントデータベースでは, 通常は,'oblique'とラベル付けされている。名前に,Italic,Cursive 又はKursivをもつフォントは,通常は,'italic'とラベル付けされている。


  H1, H2, H3 { font-style: italic }

  H1 EM { font-style: normal }

この例では,'H1'内の強調されたテキストは,本文書体で現れる。

5.2.4    'font-variant'

値: normal | small-caps
初期値: normal
適用対象: すべての要素
継承: yes
パーセント値: N/A

フォントファミリ内の変化の型には,スモールキャップもある。 スモールキャップフォントでは,小文字が大文字と同じに見えるが,字の大きさが小さく, 字の比率が少し違う。'font-variant'特性が,そのフォントを選択する。

'normal'の値は,スモールキャップフォントではないフォントを選択する。'small-caps'は, スモールキャップフォントを選択する。CCS1では,通常フォントをとり, 大きさを変えた大文字で小文字を置き換えて生成し,スモールキャップとしている場合を 許容する。(ただし,これを要求するわけではない。) 最後の手段としては,大文字を,スモールキャップフォントの代わりとして使用する。

次の例は,斜体スモールキャップで強調した語をもつ,スモールキャップの'H3'要素を生じる。


  H3 { font-variant: small-caps }

  EM { font-style: oblique }

同様に,旧様式の数字,スモールキャップの数字,凝縮した字,拡張した字などをもつフォントの フォントファミリの他の変種が存在してもよい。CSS1は,これらを選択する特性はもたない。

CSS1コア: この特性によって,テキストの大文字への変換が生じる限りは, 'text-transform'に対するのと同じ考慮が必要となる。

5.2.5    'font-weight'

値: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初期値: normal
適用対象: すべての要素
継承: yes
パーセント値: N/A

'font-weight'特性は,フォントの重みを選択する。値'100'から'900'までは, 順番のある列を形成し,そこでは,各数は一つ前の数と少なくとも同じ暗さの重みを示す。 キーワード'normal'は,'400'の同意語とし,'bold'は,'700'の同意語とする。 'normal'及び'bold'以外のキーワードは,フォント名と混同することが多いことが知られており, そこで,九つの値のリストの数値化尺度を選択した。


  P { font-weight: normal }   /* 400 */

  H1 { font-weight: 700 }     /* bold */

'bolder'及び'lighter'の値は,親から継承する重みとの相対的なフォントの重みを選択する。


  STRONG { font-weight: bolder }

子要素は,結果として生ずる重みを継承し,キーワードの値を継承しない。

フォント(フォントデータ)は,通常は,フォントの "重み" を示す名前が値となる一つ以上の特性をもつ。 これらの重みの名前に対して,受け入れられた普遍的な意味は存在しない。これらの基本的な役割は, 一つのフォントファミリ内での違った暗さを区別することにある。フォントファミリ間での利用は, 全く一定しない。例えば,ボールド(Bold)と思われるフォントが, フォントの "本文" 書体を設計でどのくらい黒くするかに依存して,Regular-Bold,Roman-Bold, Book-Bold,Medium-Bold,Semi-Bold若しくはDemiBold,Bold又はBlack として記述されるかもしれない。名前の標準的な使用法が存在しないので,CSS1における重み特性値は, 数値化尺度で与えることとする。これによって,値'400'(又は'normal')は, そのファミリに対する "本文" 書体に対応する。その書体に関連する重みの名前は,通常は, Book,Regular,Roman又はNormal,時には,Mediumとなる。

一つのファミリ内での他の重みを数字の重み値に関連させるには, そのファミリ内での暗さの順番を保存することだけを意図することになる。 しかし,次の経験的な方法が,通常の場合の割当て方法を与える。

次の二つの例は,この処理過程を説明する。"Example1"ファミリには,明るい方から暗い方へと, 四つの重み,Regular,Medium,Bold及びHeavy が存在すると仮定する。 一方,"Example2"ファミリには,六つの重み,Book,Medium,Bold,Heavy,Black 及びExtraBlackが存在すると仮定する。2番目の例では,いかにして"Example2 ExtraBlack"を いずれにも割り当てないと決断したかに注意すること。

使用可能書体 割当て 穴の埋め方
"Example1 Regular" 400 100, 200, 300
"Example1 Medium" 500
"Example1 Bold" 700 600
"Example1 Heavy" 800 900

使用可能書体 割当て 穴の埋め方
"Example2 Book" 400 100, 200, 300
"Example2 Medium" 500
"Example2 Bold" 700 600
"Example2 Heavy" 800
"Example2 Black" 900
"Example2 ExtraBlack" (none)

相対的なキーワード'bolder'及び'lighter'の意図は, そのファミリ内の書体を暗く又は明るくすることにあり,ファミリは, すべての記号的な重み値とそろ(揃)う書体をもたなくともよいので, 'bolder'の一致化は,そのファミリ内のクライアント上で使用可能な次に暗い書体に対して行い, 'lighter'の一致化は,そのファミリ内の次に明るい書体に対して行う。 正確には,相対的なキーワード'bolder'及び'lighter'の意味は,次による。

'font-weight'値の各々に対して,より暗い書体が存在することは保証されない。 例えば,あるフォントは,本文書体及びボールド体だけをもち,他のフォントは, 八つの違った書体の重みをもつかもしれない。UAが,一つのファミリ内で, 書体を重み値に対応付ける方法についての保証はない。与えられた値の書体が, より明るい値の書体よりも暗くない,ということだけを保証する。

5.2.6    'font-size'

値: <absolute-size> | <relative-size> | <length> | <percentage>
初期値: medium
適用対象: すべての要素
継承: yes
パーセント値: 親要素のフォントサイズに相対的

<absolute-size>
<absolute-size>キーワードは,UAが計算し保持するフォントサイズの表へのインデクスとする。 可能な値は,[ xx-small | x-small | small | medium | large | x-large | xx-large ] とする。 コンピュータスクリーン上では,隣接するインデクス間は,1.5のスケール倍率が提案される。 すなわち,'medium'フォントが10ptの場合,'large'フォントは,15ptとなる。 違った媒体では,違ったスケール倍率を必要とするかもしれない。UAが表を計算するときには, フォントの品質及び利用可能性を考慮することも望ましい。表は,フォントファミリごとに違っていてもよい。
<relative-size>
<relative-size>キーワードは,フォントサイズの表及び親要素のフォントサイズに対して, 相対的に解釈する。可能な値は,[ larger | smaller ] とする。例えば,親要素が'medium' のフォントサイズをもつ場合,'larger'の値は,現在の要素のフォントサイズを'large'とする。 親要素のサイズが表エントリに近くない場合には,UAは,自由に表エントリの間を内挿するか, 最も近いエントリに丸めるかする。数値がキーワードを超える場合は,UAは, 表エントリを外挿しなければならないかもしれない。

要素のフォントサイズを計算する場合,長さ及びパーセントの値は,フォントサイズ表を考慮しないほうがよい。

負の値は,許されない。

すべての他の特性において,'em'及び'ex'の長さ値は,現在の要素のフォントサイズを参照する。 'font-size'特性において,これらの長さ単位は,親要素のフォントサイズを参照する。

アプリケーションは,その文脈に依存して,明示的なサイズを再度解釈し直してもよい。 例えば,VRシーンの内部では,フォントは,光景のゆがみのために,違ったサイズを取るかもしれない。

次に例を示す。


  P { font-size: 12pt; }

  BLOCKQUOTE { font-size: larger }

  EM { font-size: 150% }

  EM { font-size: 1.5em }

提案されたスケール倍率1.5を使用する場合は,最後の三つの宣言は,同じになる。

5.2.7    'font'

値: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
初期値: 短縮形の特性に対して定義されない
適用対象: すべての要素
継承: yes
パーセント値: <font-size>及び<line-height>で許される

'font'特性は,スタイルシート内の同じ位置での, 'font-style''font-variant''font-weight''font-size''line-height' 及び 'font-family' を設定するための,短縮形の特性とする。 この特性の構文は,フォントに関係した複数の特性を設定するための,既存の印刷上の短縮形記法に基づく。

可能な初期値の定義については,既に定義した特性を参照すること。 値を与えない特性は,それらの初期値に設定する。


  P { font: 12pt/14pt sans-serif }

  P { font: 80% sans-serif }

  P { font: x-large/110% "new century schoolbook", serif }

  P { font: bold italic large Palatino, serif }

  P { font: normal small-caps 120%/120% fantasy }

この内の2番目の規則では,フォントサイズパーセントの値('80%')が,親要素のフォントサイズを参照する。 3番目の規則では,行の高さのパーセントが,要素それ自体のフォントサイズを参照する。

最初の三つの規則では,'font-style','font-variant'及び'font-weight'を明示的に与えていない。 これは,これら三つすべてを,それらの初期値('normal')に設定することを意味する。 4番目の規則は,'font-weight'を'bold'に設定し,'font-style'を'italic'に設定し, 'font-variant'を暗黙的に'normal'に設定する。

5番目の規則は,'font-variant'(を,'small-caps'に),'font-size'(を,親のフォントの120%に), 'line-height'(を,フォントサイズの120%に)及び'font-family'を(,'fantasy'に,)設定する。 さらに,キーワード'normal'を,残りの二つの特性'font-style'及び'font-weight'に適用する。

5.3    カラー及び背景特性

これらの特性は,要素のカラー(前景の色ということが多い。)及び要素の背景 (つまり,内容を可視化する面)を記述する。背景色及び/又は背景画像を設定できる。 画像の位置,画像が繰り返されるかどうか,画像の繰返しの方法及び 画像が描画面に対して固定しているのか又はスクロールするのかも,設定できる。

'color'特性は,通常は継承する。背景特性は継承しないが,'background-color'の初期値は 'tansparent'なので,親要素の背景は,デフォルトで,透けて輝くことになる。

5.3.1    'color'

値: <color>
初期値: UA固有
適用対象: すべての要素
継承: yes
パーセント値: N/A

この特性は,要素のテキストカラー(前景の色として参照されることが多い。)を示す。 赤を指定するためのいくつかの方法がある。


  EM { color: red }              /* natural language */

  EM { color: rgb(255,0,0) }     /* RGB range 0-255   */

可能なカラーの値の記述に関しては,6.3を参照すること。

5.3.2    'background-color'

値: <color> | transparent
初期値: transparent
適用対象: すべての要素
継承: no
パーセント値: N/A

この特性は,要素の背景の色を設定する。


  H1 { background-color: #F00 }

5.3.3    'background-image'

値: <url> | none
初期値: none
適用対象: すべての要素
継承: no
パーセント値: N/A

この特性は,要素の背景画像を設定する。背景画像を設定するときには, その画像が使用不可能なときに使用する背景色も設定するほうがよい。 画像が使用可能なときには,背景色の上に画像を重ねる。


  BODY { background-image: url(marble.gif) }

  P { background-image: none }

5.3.4    'background-repeat'

値: repeat | repeat-x | repeat-y | no-repeat
初期値: repeat
適用対象: すべての要素
継承: no
パーセント値: N/A

背景画像を指定する場合は,'background-repeat'の値が,その画像を繰り返す方法又は その画像を繰り返すかどうかを決定する。

'repeat'の値は,画像が左右方向及び上下方向に繰り返されることを示す。 'repeat-x'(又は'repeat-y')の値は,画像を左右方向(又は上下方向)に繰り返し, 片側から他の片側へと続く画像の一つの帯を生成する。'no-repeat'の値を使うと, 画像は繰り返さない。


  BODY { 

    background: red url(pendant.gif);

    background-repeat: repeat-y;

  }

この例では,画像は上下方向にだけ繰り返す。

5.3.5    'background-attachment'

値: scroll | fixed
初期値: scroll
適用対象: すべての要素
継承: no
パーセント値: N/A

背景画像を指定する場合,'background-attachment'の値で,その画像が描画面に関して固定しているか, 又は内容に沿ってスクロールするかを決定する。


  BODY { 

    background: red url(pendant.gif);

    background-repeat: repeat-y;

    background-attachment: fixed;

  }

CSS1コア: UAは,'fixed'を'scroll'として扱ってもよい。 しかし,少なくともHTML要素及びBODY要素に関しては,'fixed'を正しく解釈することが望ましい。 これは,'fixed'をサポートするこれらブラウザに対してだけ,作成者が画像を提供する方法がないことによる。 (7.を参照。)

5.3.6    'background-position'

値: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
初期値: 0% 0%
適用対象: ブロックレベル要素及び置換要素
継承: no
パーセント値: 要素それ自体のサイズを参照

背景画像を指定した場合,'background-position'の値がその初期位置を指定する。

'0% 0%'の値の対で,画像の上左隅を,要素の内容を囲むボックス(つまり,パディング,境界 又は余白を囲むボックスではない。)の上左隅に置く。'100% 100%'の値の対で, 画像の下右隅を要素の下右隅に置く。'14% 84%'の値の対で,画像の右14%下84%の点を, 要素の右14%下84%の点に置く。

'2cm 2cm'の値の対で,画像の上左隅を,要素の上左隅から,2cm右及び2cm下に置く。

一つのパーセントの値又は一つの長さの値だけを与えた場合,左右方向の位置だけを設定し, 上下方向の位置は50%とする。二つの値を与えた場合には,左右方向の位置を最初とする。 長さの値及びパーセントの値の結合を許す。例えば,'50% 2cm'。負の位置を許す。

キーワードの値を使用し,背景画像の位置を指定することもできる。 キーワードは,パーセントの値又は長さの値と結合することはできない。キーワードの可能な結合及びその解釈は, 次による、

次に例を示す。


  BODY { background: url(banner.jpeg) right top }    /* 100%   0% */

  BODY { background: url(banner.jpeg) top center }   /*  50%   0% */

  BODY { background: url(banner.jpeg) center }       /*  50%  50% */

  BODY { background: url(banner.jpeg) bottom }       /*  50% 100% */

背景画像を描画面に関して固定した場合(5.3.5 'background-attachment'特性を参照), 要素の代わりに,その画像が,描画面に対して相対的に置かれる。次に例を示す。


  BODY { 

    background-image: url(logo.png);

    background-attachment: fixed;

    background-position: 100% 100%;

  } 

この例では,画像は,描画面の下右隅に位置する。

5.3.7    'background'

値: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
初期値: 短縮形特性に対しては定義しない
適用対象: すべての要素
継承: no
パーセント値: <background-position>に関して許される

'background'特性は,スタイルシート内の同じ位置で,個々の背景特性 (つまり,'background-color','background-image','background-repeat',   'background-attachment'及び'background-position')を設定するための短縮形特性とする。

'background'特性に関する可能な値は,個々の特性に関するすべての可能な値の集合とする。


  BODY { background: red }

  P { background: url(chess.png) gray 50% repeat fixed }

'backgroud'特性は,常に,個々の背景特性すべてを設定する。この例の最初の規則では, 'backgound-color'に対する値だけが与えられ,他の個々の特性は,それらの初期値を設定する。 2番目の規則では,すべての個々の特性を指定している。

5.4    テキスト特性

5.4.1    'word-spacing'

値: normal | <length>
初期値: normal
適用対象: すべての要素
継承: yes
パーセント値: N/A

length単位は, 語間のデフォルトスペースへの追加を示す。負の値も可能であるが, 実装固有の制限があってもよい。 UAは, 正確なスペース空けアルゴリズムを選択してもよい。語間スペースは, ('align'特性の値である)justification(均等割り)によって影響を受けることもある。


  H1 { word-spacing: 0.4em }

この場合, 'H1'要素の中の各語の語間スペースは, '0.4em'だけ増加する。

CSS1コア: UAは, どんな'word-spacing'の値も'normal'と解釈してよい。 (7を参照。)

5.4.2    'letter-spacing'

値: normal | <length>
初期値: normal
適用対象: すべての要素
継承: yes
パーセント値: N/A

length単位は, 文字間のデフォルトスペースへの追加を示す。負の値も可能であるが, 実装固有の制限があってもよい。 UAは, 正確なスペース空けアルゴリズムを選択してもよい。字間スペースは, ('align'特性の値である)justificationによって影響を受けることもある。


  BLOCKQUOTE { letter-spacing: 0.1em }

この場合, 'BLOCKQUOTE'要素の中の各文字の字間スペースは, '0.1em'だけ増加する。

値が'normal'のとき, UAは, テキストの均等割りを行うために字間スペースを変えてもよい。'letter-spacing'が明示的に<length>の値に設定される場合には, これが起きることはない。


  BLOCKQUOTE { letter-spacing: 0 }

  BLOCKQUOTE { letter-spacing: 0cm }

結果としての2字間のスペースがデフォルトスペースと同じでない場合, UAはリガチャを使用してはならない。

CSS1コア: UAは, どんな'letter-spacing'の値も'normal'と解釈してよい。(7を参照。)

5.4.3    'text-decoration'

値: none | [ underline || overline || line-through || blink ]
初期値: none
適用対象: すべての要素
継承: なし(次の詳細記述を参照)
パーセント値: N/A

この特性は, 要素のテキストに加える修飾を記述する。要素にテキストがない場合(HTMLの'IMG'要素など), 又は要素が空要素の場合(<EM></EM>など), この特性は効果をもたない。値'blink'は, テキストを点滅させる。

テキスト修飾に必要なカラーは, 'color'特性の値からもってくる。

この特性は, 継承されないが, 要素はその親と一致していなければならない。例えば, ある要素に下線が引かれていると, その線は子の要素にも及ぶ。下線のカラーは, 子孫の要素が別の'color'値をもっていたとしても, 同じとなる。


  A:link, A:visited, A:active { text-decoration: underline }

この例は, すべてのリンク(つまり, 'HREF'属性をもつすべての'A'要素)のテキストに下線を引く。

UAは, キーワード'blink'を認識できなければならないが, 点滅効果をサポートする必要はない。

5.4.4    'vertical-align'

値: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
初期値: baseline
適用対象: 行内要素
継承: no
パーセント値: 要素そのものの'line-height'に対する値

この特性は, 要素の上下方向の位置決めに影響を与える。次のキーワードの集合は, 親要素に対して相対とする。

'baseline'
要素のベースライン(要素がベースラインをもたない場合には, 下部)を, 親のベースラインにそろ(揃)える。
'middle'
要素(通常は, 画像)の上下方向の中点を, 親のベースラインにx-heightの半分を加えた位置にそろ(揃)える。
'sub'
要素を下付き添字にする。
'super'
要素を上付き添字にする。
'text-top'
要素の上部を親要素のフォントの上部にそろ(揃)える。
'text-bottom'
要素の下部を親要素のフォントの下部にそろ(揃)える。

もう一つの特性集合は, その要素を含むフォーマット済みの行に対して相対とする。

'top'
要素の上部を, 行の中の高さが最も高い要素にそろ(揃)える。
'bottom'
要素の下部を, 行の中の高さが最も低い要素にそろ(揃)える。

'top'及び'bottom'のそろ(揃)えを使用する場合, 要素の依存関係がループを形成して, 解決できない状態が起こる可能性がある。

パーセント値は, 要素そのそのの'line-height'特性の値に対するものとする。それは, 指定された量だけ親のベースラインよりも上に要素のベースライン(ベースラインがない場合には, 下部)を上げる。負の値も可能とする。例えば, -100%の値は, 次の行のベースラインがくるはずのところに要素のベースラインが帰着するまで, 要素を下げる。これによって, ベースラインをもたない要素(字の代わりに用いる画像など)の上下方向の位置を正確に制御可能にする。

CSSの将来の版では, この特性の値として<length>を使用可能にすることが期待される。

5.4.5    'text-transform'

値: capitalize | uppercase | lowercase | none
初期値: none
適用対象: すべての要素
継承: yes
パーセント値: N/A

'capitalize'
各語の最初の文字を大文字にする。
'uppercase'
要素のすべての字を大文字にする。
'lowercase'
要素のすべての字を小文字にする。
'none'
継承された値を無効にする。

それぞれの場合の実際の変換は, 自然言語依存とする。要素の言語を見つける方法については, [4]を参照されたい。


  H1 { text-transform: uppercase }

この例は, 'H1'要素を大文字のテキストにする。

CSS1コア: UAは, Latin-1レパートリには含まれない文字について, 及びUnicode[8]の大文字小文字変換表によって指定された変換とは異なる変換に関する言語の要素については, 'text-transform'を無視してよい(つまり, 'none'として扱う。)。

5.4.6    'text-align'

値: left | right | center | justify
初期値: UA specific
適用対象: ブロックレベル要素
継承: yes
パーセント値: N/A

この特性は, 要素内でのテキストのそろ(揃)え方を記述する。実際に用いる調整アルゴリズムは, UA及び自然言語に依存する。

例:


  DIV.center { text-align: center }

'text-align'は継承されるので, 'CLASS=center'が指定された'DIV'要素の中のすべてのブロックレベル要素は, 中央そろ(揃)えとなる。そろ(揃)えは, 描画面ではなく要素の幅に対しての相対指定であることに注意されたい。'justify'がサポートされていない場合, UAが代替を提供する。西洋言語では, これは'left'となることが多い。

CSS1コア: UAは, 要素のデフォルトの表記方向が右向きであるか左向きであるかに応じて, それぞれ'left'又は'right'として'justify'を扱ってよい。

5.4.7    'text-indent'

値: <length> | <percentage>
初期値: 0
適用対象: ブロックレベル要素
継承: yes
パーセント値: 親要素の幅に対する値

この特性は, フォーマット済みの最初の行の前に現れる字下げを指定する。'text-indent'の値は負であってよいが, 実装固有の制限があることもある。字下げは, 他のもの(HTMLの'BR'など)で分割された要素の中央には挿入されない。

例:


  P { text-indent: 3em }

5.4.8    'line-height'

値: normal | <number> | <length> | <percentage>
初期値: normal
適用対象: すべての要素
継承: yes
パーセント値: 要素そのもののフォントサイズに対する値

この特性は, 二つの隣接する行のベースラインの間の距離を設定する。

数値が指定された場合, 現在の要素のフォントサイズにその数値を乗算したものが, 行の高さとなる。これは, 継承の仕方において, パーセント値とは異なる。つまり数値が指定されると, 子供の要素は, (パーセント値及び他の単位の場合と同様の)結果の値ではなく, その係数そのものを継承する。

負の値は使用できない。

次の例の三つの規則は, 結果として同じ行の高さとなる。


  DIV { line-height: 1.2; font-size: 10pt }     /* number */

  DIV { line-height: 1.2em; font-size: 10pt }   /* length */

  DIV { line-height: 120%; font-size: 10pt }    /* percentage */

値'normal'は, 'line-height'を要素のフォントに関して適切な値に設定する。UAは, 'normal'値を1.0から1.2の範囲の数値にすることが, 提案される。

'line-height'が, ブロックレベル要素にどのように影響を与えるかの記述については, 4.7を参照されたい。

5.5   ボックス特性

ボックス特性は, 要素を表現するボックスのサイズ, 周囲及び位置を設定する。ボックス特性の使用法の例については, フォーマット化モデル(4)を参照されたい。

余白特性は, 要素の余白を設定する。'margin'特性は, 4辺すべての境界を設定する。他の余白特性は, 対応する辺の設定だけを行う。

パディング特性は, 境界と内容(テキスト又は画像)との間にどれほどのスペースを入れるかを記述する。'padding'特性は, 4辺すべてのパディングを設定する。他のパディング特性は, 対応する辺の設定だけを行う。

境界特性は, 要素の境界を設定する。各要素は, 四つ(各辺に一つ)の境界をもち, それは, 幅, カラー, スタイルによって定義される。

'width'特性及び'height'特性は, ボックスのサイズを設定する。'float'特性及び'clear'特性は, 要素の位置を変えることができる。

5.5.1    'margin-top'

値: <length> | <percentage> | auto
初期値: 0
適用対象: すべての要素
継承: no
パーセント値: 親要素の幅に対する値

この特性は, 要素の上部余白を設定する。


  H1 { margin-top: 2em }

負の値も指定可能であるが, 実装固有の制限があることがある。

5.5.2    'margin-right'

値: <length> | <percentage> | auto
初期値: 0
適用対象: すべての要素
継承: no
パーセント値: 親要素の幅に対する値

この特性は, 要素の右余白を設定する。


  H1 { margin-right: 12.3% }

負の値も指定可能であるが, 実装固有の制限があることがある。

5.5.3    'margin-bottom'

値: <length> | <percentage> | auto
初期値: 0
適用対象: すべての要素
継承: no
パーセント値: 親要素の幅に対する値

この特性は, 要素の下部余白を設定する。


  H1 { margin-bottom: 3px }

負の値も指定可能であるが, 実装固有の制限があることがある。

5.5.4    'margin-left'

値: <length> | <percentage> | auto
初期値: 0
適用対象: すべての要素
継承: no
パーセント値: 親要素の幅に対する値

この特性は, 要素の左余白を設定する。


  H1 { margin-left: 2em }

負の値も指定可能であるが, 実装固有の制限があることがある。

5.5.5    'margin'

値: [ <length> | <percentage> | auto ]{1,4}
初期値: 簡略表記特性については定義されない
適用対象: すべての要素
継承: no
パーセント値: 親要素の幅に対する値

'margin'特性は, 'margin-top', 'margin-right', 'margin-bottom'及び'margin-left'を, スタイルシートの同じ場所に設定するための簡略表記特性とする。

四つのlength値が指定されたると, それらは, それぞれ上部, 右, 下部及び左に適用される。値が一つだけの場合, それがすべての辺に適用される。二つ又は三つの場合, 指定のない値には, 反対側の辺の値を用いる。


  BODY { margin: 2em } /* all margins set to 2em */

  BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */

  BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

この例の最後の規則は, 次の例と同じとする。


  BODY {

    margin-top: 1em;

    margin-right: 2em;

    margin-bottom: 3em;

    margin-left: 2em;        /* copied from opposite side (right) */

  }

負の余白値も指定可能であるが, 実装固有の制限があることがある。

5.5.6    'padding-top'

値: <length> | <percentage>
初期値: 0
適用対象: すべての要素
継承: no
パーセント値: 親要素の幅に対する値

この特性は, 要素の上部パディングを設定する。


  BLOCKQUOTE { padding-top: 0.3em }

パディングの値は, 負に指定できない。

5.5.7    'padding-right'

値: <length> | <percentage>
初期値: 0
適用対象: すべての要素
継承: no
パーセント値: 親要素の幅に対する値

この特性は, 要素の右パディングを設定する。


  BLOCKQUOTE { padding-right: 10px }

パディングの値は, 負に指定できない。

5.5.8    'padding-bottom'

値: <length> | <percentage>
初期値: 0
適用対象: すべての要素
継承: no
パーセント値: 親要素の幅に対する値

この特性は, 要素の下部パディングを設定する。


  BLOCKQUOTE { padding-bottom: 2em }

パディングの値は, 負に指定できない。

5.5.9    'padding-left'

値: <length> | <percentage>
初期値: 0
適用対象: すべての要素
継承: no
パーセント値: 親要素の幅に対する値

この特性は, 要素の左パディングを設定する。


  BLOCKQUOTE { padding-left: 20% }

パディングの値は, 負に指定できない。

5.5.10    'padding'

値: [ <length> | <percentage> ]{1,4}
初期値: 0
適用対象: すべての要素
継承: no
パーセント値: 親要素の幅に対する値

'padding'特性は, 'padding-top', 'padding-right', 'padding-bottom'及び'padding-left'を, スタイルシートの同じ場所に設定するための簡略表記特性とする。

四つの値が指定されると, それらは, それぞれ上部, 右, 下部及び左に適用される。値が一つだけの場合, それがすべての辺に適用される。二つ又は三つの場合, 指定のない値には反対側の辺の値を用いる。

パディング領域の面は, 'background'特性で設定される。


  H1 { 

    background: white; 

    padding: 1em 2em;

  } 

この例は, '1em'のパディング('padding-top'及び'padding-bottom')を上下に設定し, '2em'のパディング('padding-right'及び'padding-left')を左右に設定する。'em'単位は, 要素のフォントサイズに対して相対とする。'1em'は, 使用しているフォントのサイズに等しい。

パディングの値は, 負に指定できない。

5.5.11    'border-top-width'

値: thin | medium | thick | <length>
初期値: 'medium'
適用対象: すべての要素
継承: no
パーセント値: N/A

この特性は, 要素の上部境界を設定する。キーワード値の幅はUA依存とするが, 'thin' <= 'medium'<= 'thick'の関係は保つ。

キーワードの幅は, 文書を通して一定とする。


  H1 { border: solid thick red }

  P  { border: solid thick blue }

この例では, 'H1'要素及び'P'要素は, フォントサイズに関係なく, 同じ境界の幅をもつ。相対的な幅を達成するために, 'em'単位を使用できる。


  H1 { border: solid 0.5em }

境界の幅は, 負に指定できない。

5.5.12    'border-right-width'

値: thin | medium | thick | <length>
初期値: 'medium'
適用対象: すべての要素
継承: no
パーセント値: N/A

この特性は, 要素の右境界の幅を設定する。それ以外は, 'border-top-width'と同じとする。

5.5.13    'border-bottom-width'

値: thin | medium | thick | <length>
初期値: 'medium'
適用対象: すべての要素
継承: no
パーセント値: N/A

この特性は, 要素の下部境界の幅を設定する。それ以外は, 'border-top-width'と同じとする。

5.5.14    'border-left-width'

値: thin | medium | thick | <length>
初期値: 'medium'
適用対象: すべての要素
継承: no
パーセント値: N/A

この特性は, 要素の左境界の幅を設定する。それ以外は, 'border-top-width'と同じとする。

5.5.15    'border-width'

値: [thin | medium | thick | <length>]{1,4}
初期値: not defined for shorthand properties
適用対象: すべての要素
継承: no
パーセント値: N/A

この特性は, 'border-width-top', 'border-width-right', 'border-width-bottom'及び'border-width-left'を, スタイルシートの同じ場所に設定するための簡略表記特性とする。

一つから四つまでの値を, 次の解釈で指定できる。

次の例では, コメントが上部, 右, 下部及び左の境界の結果としての幅を示す。


  H1 { border-width: thin }                   /* thin thin thin thin */

  H1 { border-width: thin thick }             /* thin thick thin thick */

  H1 { border-width: thin thick medium }      /* thin thick medium thin */

  H1 { border-width: thin thick medium none } /* thin thick medium none */

境界の幅は, 負の値に指定できない。

5.5.16    'border-color'

値: <color>{1,4}
初期値: 特性colorの値
適用対象: すべての要素
継承: no
パーセント値: N/A

'border-color'特性は, 四つの境界のカラーを設定する。'border-color'は, 一つから四つまでの値をもつことができ, その値は, 前述の'border-width'と同様に, 異なる辺に対して設定される。

カラーの値が指定されない場合, 要素そのものの'color'特性の値が代用される。


  P { 

    color: black; 

    background: white; 

    border: solid;

  }

この例では, 境界は黒い直線となる。

5.5.17    'border-style'

値: none | dotted | dashed | solid | double | groove | ridge | inset | outset
初期値: none
適用対象: すべての要素
継承: no
パーセント値: N/A

'border-style'特性は, 四つの境界のスタイルを設定する。この特性は, 一つから四つまでの値をもつことができ, その値は, 前述の'border-width'と同様に, 異なる辺に対して設定される。


  #xy34 { border-style: solid dotted }

この例では, 左右方向の境界が'solid'(直線)となり, 上下方向の境界が'dotted'(点線)となる。

境界のスタイルの初期値が'none'であるので, 境界のスタイルが設定されないと, 境界は見えない。

境界のスタイルの意味は, 次のとおりとする。

none
('border-width'値にかかわらず)境界を引かない。
dotted
要素の背景の上部に, 境界を点線で描く。
dashed
要素の背景の上部に, 境界を破線で描く。
solid
境界を直線とする。
double
要素の背景の上部に, 境界を二重線で描く。二つの単線と間のスペースとの合計が, <border-width>の値に等しい。
groove
3D groove(立体的な溝)を, <color>値に基くカラーで描く。
ridge
3D ridge(立体的な峰)を, <color>値に基くカラーで描く。
inset
3D inset(立体的な窪み)を, <color>値に基くカラーで描く。
outset
3D outset(立体的な出っ張り)を, <color>値に基くカラーで描く。

CSS1コア: UAは, 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset'及び'outset'をすべて'solid'と解釈してよい。

5.5.18    'border-top'

値: <border-top-width> || <border-style> || <color>
初期値: 簡略表記特性については定義されない
適用対象: すべての要素
継承: no
パーセント値: N/A

これは, 要素の上部境界の幅, スタイル及びカラーを設定するための簡略表記特性とする。


  H1 { border-bottom: thick solid red }

この規則は, H1要素の下の境界の幅, スタイル及びカラーを設定する。省略された値は, 初期値に設定される。


  H1 { border-bottom: thick solid }

この例では, カラー値が省略されているので, 境界のカラーは, 要素そのものの'color'値と同じになる。

'border-style'特性は, 四つの値まで受けとるが, この特性は一つのスタイル値だけを受けとることに留意されたい。

5.5.19    'border-right'

値: <border-right-width> || <border-style> || <color>
初期値: 簡略表記特性については定義されない
適用対象: すべての要素
継承: no
パーセント値: N/A

これは, 要素の右境界の幅, スタイル及びカラーを設定するための簡略表記特性とする。それ以外は, 'border-top'と同じとする。

5.5.20    'border-bottom'

値: <border-bottom-width> || <border-style> || <color>
初期値: 簡略表記特性については定義されない
適用対象: すべての要素
継承: no
パーセント値: N/A

これは, 要素の下部境界の幅, スタイル及びカラーを設定するための簡略表記特性とする。それ以外は, 'border-top'と同じとする。

5.5.21    'border-left'

値: <border-left-width> || <border-style> || <color>
初期値: not defined for shorthand properties
適用対象: すべての要素
継承: no
パーセント値: N/A

これは, 要素の左境界の幅, スタイル及びカラーを設定するための簡略表記特性とする。それ以外は, 'border-top'と同じとする。

5.5.22    'border'

値: <border-width> || <border-style> || <color>
初期値: 簡略表記特性については定義されない
適用対象: すべての要素
継承: no
パーセント値: N/A

'border'特性は, 要素の四つの境界すべてに同じ幅, 同じスタイル及び同じカラーを設定するための簡略表記特性とする。例えば, 次の最初の規則は, その後に示す四つの規則の集合と等価となる。


  P { border: solid red }

  P {

    border-top: solid red;

    border-right: solid red;

    border-bottom: solid red;

    border-left: solid red

  }

簡略表記特性'margin'及び'padding'とは異なり, 'border'特性は, 四つの境界に異なる値を設定することはできない。それを行うためには, 一つ以上の他の境界特性を使用する必要がある。

特性は, ある程度重なった機能をもつので, 規則が指定される順序が重要になる。次の例を考えてみる。


  BLOCKQUOTE {

    border-color: red;

    border-left: double

    color: black;

  }

この例では, 左境界のカラーは黒であり, 他の境界は赤となる。これは, 幅, スタイル及びカラーを設定する'border-left'による。'border-left'特性では, カラー値が指定されないので, 'color'特性の値が使用される。'color'特性が'border-left'特性の後に設定されることとは, 関係ない。

'border-width'特性は, 四つのlength値までを受けとるが, この特性は, 一つだけを受けとることに注意されたい。

5.5.23    'width'

値: <length> | <percentage> | auto
初期値: auto
適用対象: ブロックレベル要素及び置換要素
継承: no
パーセント値: 親要素の幅に対する値

この特性は, テキスト要素に対して適用できるが, 画像のような置換要素と共に最も有効に用いられる。幅は, 必要であれば画像のスケーリング(変倍)によって強制される。スケーリングに際しては, 'height'特性が'auto'であると, 画像の縦横比が保存される。

例:


  IMG.icon { width: 100px }

置換要素の'width'及び'height'が両方とも'auto'であれば, これらの特性は, 要素の基本寸法に設定される。

負の値は, 指定できない。

この特性, 余白及びパディングの関係の記述については, フォーマット化モデル(4)を参照されたい。

5.5.24    'height'

値: <length> | auto
初期値: auto
適用対象: ブロックレベル要素及び置換要素
継承: no
パーセント値: N/A

この特性は, テキスト要素に対して適用できるが, 画像のような置換要素と共に最も有効に用いられる。幅は, 必要であれば画像のスケーリング(変倍)によって強制される。スケーリングに際しては, 'width'特性が'auto'であると, 画像の縦横比が保存される。

例:


  IMG.icon { height: 100px }

置換要素の'width'及び'height'が両方とも'auto'であれば, これらの特性は, 要素の基本寸法に設定される。

テキスト要素に適用される場合, その高さは, 例えばスクロールバーを用いて強制される。

負の値は, 指定できない。

CSS1コア: 要素が置換要素でない場合, UAは, 'height'特性を無視してよい(つまり, それを'auto'として扱う。)。

5.5.25    'float'

値: left | right | none
初期値: none
適用対象: すべての要素
継承: no
パーセント値: N/A

値が'none'の場合, 要素は, それがテキストの中に現れる場所に表示される。値が'left'('right')の場合, 要素は左(右)に移動し, テキストが要素の右(左)側で折り返す。値が'left'又は'right'の場合, 要素はブロックレベルとして扱われる(つまり, 'display'特性は無視される。)。全規定については, 4.1.4を参照されたい。


  IMG.icon { 

    float: left;

    margin-left: 0;

  }

この例は, 親要素の左側に沿って, 'CLASS=icon'をもつすべてのIMG要素を配置する。

この特性は, 行内画像と共に最も頻繁に用いられるが, テキスト要素にも適用できる。

5.5.26    'clear'

値: none | left | right | both
初期値: none
適用対象: すべての要素
継承: no
パーセント値: N/A

この特性は, 要素の横に浮動要素を置いてよいかどうかを指定する。もっと詳しく言うと, この特性の値は, 浮動要素が許されない側を列挙する。'left'に設定された'clear'の場合, 要素は左側のすべての浮動要素の下に移動する。'None'に設定された'clear'の場合, 浮動要素がすべての側で許可される。例を次に示す。


  H1 { clear: left }

5.6    分類特性

これらの特性は, 固有の可視化パラメータを設定し, さらに要素を分類する。

list-style特性は, リスト項目(つまり, 'list-item'の'display'値をもつ要素)がフォーマットされる方法を記述する。list-style特性は, どんな要素にも設定でき, 通常はトリーの下方向に継承される。しかし, 'list-item'の'display'値をもつ要素だけに効果をもつ。HTMLでは通常, LI要素に対して効果をもつ。

5.6.1    'display'

値: block | inline | list-item | none
初期値: block
適用対象: すべての要素
継承: no
パーセント値: N/A

この特性は, 描画面(印刷ページ, コンピュータ画面など)上に, 要素が表示されるかどうか, どのように表示されるかを記述する。

'block'の'display'値をもつ要素は, 新規のボックスを開く。ボックスは, CSSのフォーマットモデルに従い, 隣接するボックスに相対的に位置付けされる。通常, 'H1'及び'P'などの要素が型'block'をもつ。'list-item'の値は, list-itemマーカが追加されることを除いて'block'に類似している。HTMLでは, 'LI'が通常この値をもつ。

'inline'の'display'値をもつ要素は, その前の内容と同じ行の新規の行内ボックスとなる。そのボックスは, 内容のフォーマット済みサイズに従って, 大きさが決る。内容がテキストであれば, それが数行に及ぶこともある。余白, 境界及びパディングの特性は, 'inline'要素に対して適用されるが, 改行に際して効果はない。

値'none'は, 子要素及び周囲のボックスを含んで, 要素の表示を消す。


  P { display: block }

  EM { display: inline }

  LI { display: list-item }

  IMG { display: none }

最後の規則は, 画像の表示を消す。

'display'の初期値は'block'とするが, 通常, UAは, HTML規定[2]において提案されている要素の可視化に従って, すべてのHTML要素に関するデフォルト値をもつ。

CSS1コア: UAは, 'display'を無視し, UAのデフォルト値だけを使用してよい(7を参照)。

5.6.2    'white-space'

値: normal | pre | nowrap
初期値: normal
適用対象: ブロックレベル要素
継承: yes
パーセント値: N/A

この特性は, 要素内の空白が扱われる方法を宣言する。つまり, 'normal'(空白はつぶれる), 'pre'(HTMLにおける'PRE'要素に似た振舞いをする), 又は'nowrap'(BR要素だけによって折り返す)とする。


  PRE { white-space: pre }

  P   { white-space: normal }

'white-space'の初期値は'normal'とするが, 通常, UAは, HTML規定[2]において提案されている要素の可視化に従って, すべてのHTML要素に関するデフォルト値をもつ。

CSS1コア: UAは, 著者及び読者のスタイルシートにおける'white-space'特性を無視し, その代わりにUAのデフォルト値を使用してよい(7を参照)。

5.6.3    'list-style-type'

値: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初期値: disc
適用対象: 'list-item'の'display'値をもつ要素
継承: yes
パーセント値: N/A

この特性は, 'list-style-image'が'none'である場合, 又はURLによって指定された画像が表示できない場合に, 'list-item'マーカの出現を決定するために用いる。


  OL { list-style-type: decimal }       /* 1 2 3 4 5 etc. */

  OL { list-style-type: lower-alpha }   /* a b c d e etc. */

  OL { list-style-type: lower-roman }   /* i ii iii iv v etc. */

5.6.4    'list-style-image'

値: <url> | none
初期値: none
適用対象: 'list-item'の'display'値をもつ要素
継承: yes
パーセント値: N/A

この特性は, list-itemマーカとして使いる画像を設定する。画像が利用可能な場合, それは, マーカ集合を'list-style-type'マーカで置き換える。


  UL { list-style-image: url(http://png.com/ellipse.png) }

5.6.5    'list-style-position'

値: inside | outside
初期値: outside
適用対象: 'list-item'の'display'値をもつ要素
継承: yes
パーセント値: N/A

'list-style-position'の値は, 内容に関してlist-itemマーカがどのように描かれるかを決定する。フォーマット化の例については, 4.1.3を参照されたい。

5.6.6    'list-style'

値: <keyword> || <position> || <url>
初期値: 簡略表記特性については定義されない
適用対象: 'list-item'の'display'値をもつ要素
継承: yes
パーセント値: N/A

'list-style'特性は, 三つの特性'list-style-type', 'list-style-image'及び'list-style-position'を, スタイルシートの同じ場所に設定するための簡略表記記法とする。


  UL { list-style: upper-roman inside }

  UL UL { list-style: circle outside }

  LI.square { list-style: square }

'LI'要素に直接'list-style'を設定すると, 予期しない結果が生じ得る。次の場合を考えてみる。


  <STYLE TYPE="text/css">

    OL.alpha LI  { list-style: lower-alpha }

    UL LI        { list-style: disc }

  </STYLE>

  <BODY>

    <OL CLASS=alpha>

      <LI>level 1

      <UL>

         <LI>level 2

      </UL>

    </OL>

  </BODY>

この例では, スタイルシートの最初の規則に関して, (段階順序で指定された)固有性が高いので, それが, すべての'LI'要素に関する2番目の規則を上書きし, 'lower-alpha'のリストスタイルのだけが使用される。したがって, リスト型要素だけに'list-style'を設定することが推奨される。


  OL.alpha  { list-style: lower-alpha }

  UL        { list-style: disc }

この例では, 継承が, 'OL'要素及び'UL'要素から'LI'要素に対して'list-style'の値を転送する。

URLの値は, 他のどんな値とも組み合わせることができる。


  UL { list-style: url(http://png.com/ellipse.png) disc }

この例では, 画像が入手できない場合に'disc'が使用される。

6    単位

6.1    長さの単位

長さの値のフォーマットは,オプションの符号文字('+'又は'-'で,'+'がデフォルト。)の直後に数字 (小数点付き又は小数点なし)が続き,さらにその直後に単位識別子(2字の短縮形)が続く。 '0'の数字の後の単位識別子はオプションとする。

幾つかの特性は,負の長さの単位を許す。しかしこれは,フォーマット化モデルを複雑にすることがあり, 実装固有の制限が存在するかもしれない。負の長さの値をサポートできない場合は,サポート可能な最も近い値に丸める。

長さの単位には,相対的及び絶対的の2種類がある。相対単位は,他の長さ特性に相対的な長さを指定する。 相対単位を用いたスタイルシートでは,あるメディアから他のメディアへの(例えば,コンピュータディスプレイからレーザプリンタへの) スケール化が可能となる。 パーセント単位(6.2に示す。)及びキーワード値(例えば,'x-large')も,同様の利点を提供する。

次の相対単位をサポートする。


  H1 { margin: 0.5em }      /* ems, the height of the element's font */

  H1 { margin: 1ex }        /* x-height, ~ the height of the letter 'x' */

  P  { font-size: 12px }    /* pixels, relative to canvas */

相対単位'em'及び'ex'は,要素それ自体のフォントサイズに対して相対的とする。 CSS1におけるこの規則の例外は'font-style'特性であって,'em'及び'ex'の値は,親要素のフォントサイズを参照する。

画素単位は,この例外規則を用い,通常はコンピュータディスプレイとなる描画面の解像度に対して相対的とする。 出力装置の画素密度が典型的なコンピュータディスプレイの密度と大きく違う場合,UAは,画素値を再スケール化するのが望ましい。 推奨参照画素は,90dpiの画素密度をもつ読者の腕の長さ離れた装置上の一画素の視角とする。 通常の腕の長さ28インチに対して,視角は約0.0227度となる。

子要素は,相対値ではなく,計算した値を継承する。


  BODY {

    font-size: 12pt;

    text-indent: 3em;  /* i.e. 36pt */

  }

  H1 { font-size: 15pt }

この例では,要素'H1'の'text-indent'値は36ptであって,45ptではない。

絶対長さ単位は,出力媒体の物理特性が分かっている場合にだけ有効となる。 次の絶対単位をサポートする。


  H1 { margin: 0.5in }      /* inches, 1in = 2.54cm */

  H2 { line-height: 3cm }   /* centimeters */

  H3 { word-spacing: 4mm }  /* millimeters */

  H4 { font-size: 12pt }    /* points, 1pt = 1/72 in */

  H4 { font-size: 1pc }     /* picas, 1pc = 12pt */

指定された長さをサポートできない場合,UAは近似値を試すのがよい。すべてのCSS1特性について,それ以降の計算及び継承は, その近似値を基にすることが望ましい。

6.2    パーセント単位

パーセント値のフォーマットは,オプションの符号文字('+'又は'-'で,'+'がデフォルト。)の直後に数字 (小数点付き又は小数点なし)が続き,さらにその直後に'%'が続く。

パーセント値は,長さ単位など他の値に対して常に相対的とする。パーセント単位を許す各特性は, パーセント値が何を参照するかも定義する。これを,要素それ自体のフォントサイズとすることが多い。


  P { line-height: 120% }   /* 120% of the element's 'font-size' */

すべての継承されたCSS1特性では,値がパーセントとして指定された場合,子要素は結果としての値を継承し,パーセント値を継承しない。

6.3    カラー単位

カラーは,キーワード又は数値的なRGB規定とする。

カラー名のキーワードの与えられたリストは,aqua(淡緑青),black(黒),blue(青),fuchsia(赤紫色),gray(グレイ), green(緑),lime(ライム),maroon(えび茶),navy(ネービー),olive(オリーブ),purple(紫),red(赤),silver(銀), teal(青緑),white(白)及びyellow(黄)とする。これらの16色は,Windows VGAパレットから取られたが, そのRGB値は,この規定では定義しない。


  BODY {color: black; background: white }

  H1 { color: maroon }

  H2 { color: olive }

RGBカラーモデルは,数値カラー規定を用いる。次の例は,すべて同じ色を指定する。


  EM { color: #f00 }              /* #rgb */

  EM { color: #ff0000 }           /* #rrggbb */

  EM { color: rgb(255,0,0) }      /* integer range 0 - 255 */

  EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

16進記法でのRGBのフォーマットは,'#'の直後に3個又は6個の16進の文字が続く。 3桁のRGB記法(#rgb)は,0を追加することではなく数字を複製することで,6桁の数字の型式(#rrggbb)に変換する。 例えば,#fb0は,#ffbb00に拡張する。これによって,white(#ffffff)は,確実に短い記法(#fff)で指定でき, ディスプレイの色の深さの依存性を取り除くことができる。

関数的記法のRGB値のフォーマットは,'rgb('の後にカンマで区切られた三つの数値(0〜255の範囲の三つの整数値, 又は0.0%〜100.0%の範囲の三つのパーセント値)のリストが続き,さらに')'が続く。空白文字を,数値の前後に入れてもよい。

範囲外の数値は,(範囲内の最も近い値に)丸めるのがよい。そこで,次の三つの規則は等価となる。


  EM { color: rgb(255,0,0) }       /* integer range 0 - 255 */

  EM { color: rgb(300,0,0) }       /* clipped to 255 */

  EM { color: rgb(110%, 0%, 0%) }  /* clipped to 100% */

RGBカラーは,sRGB色空間[9]で指定する。 UAは,これらの色を表現する際に正確さを犠牲にすることになるかもしれない。しかし,sRGBを用いることで, 国際規格[10]と関連可能な,その色が何かという,あいまい性のない客観的に測定可能な定義ができる。

UAは,ガンマ補正の実行に対して,色表示の努力を制限してもよい。sRGBは,指定された視覚条件下で,表示ガンマを2.2と規定する。 UAは,出力装置の"自然な"表示ガンマとの組合せで,実効表示ガンマ2.2を生成するものとしてCSS内で与えられた色を調整する。 この詳細は,附属書 Dに示す。CSSで規定する色だけが,影響することに注意。 例えば,画像は,それ自体の色情報をもち運ぶことを期待する。

6.4    URL

URL(Uniform Resource Locator)は,関数的記法で識別する。


  BODY { background: url(http://www.bg.com/pinkish.gif) }

URL値のフォーマットは,'url('の後にオプションの空白が続き,オプションの一重引用符(')又は二重引用符(")が続き, URL自体([11]で定義)が続き,オプションの一重引用符(')又は二重引用符(")が続き, オプションの空白が続き,さらに')'が続く。引用符文字は,URL自体の部分ではないが,対になっていなければならない。

URLに出現する,かっこ,コンマ,空白文字,一重引用符(')及び二重引用符(")は,¥記号で, '¥(','¥)','¥,'などとしてエスケープしなければならない。

部分的なURLは,文書に対してではなく,スタイルシートのソースに対して相対的に解釈する。


  BODY { background: url(yellow) }

7    CSS1適合性

文書を表示するためにCSS1を用いるUAは,次を満たす場合に,CSS1規定に適合する。

CSS1スタイルシートを出力するUAは,次を満たす場合に,CSS1規定に適合する。

文書を表示するためにCSS1を用い,さらにCSS1スタイルシートを出力するUAは,これら二つの適合性要件を共に満たす場合に, CSS1規定に適合する。

UAは,すべてのCSS1機能を実装する必要はない。コア機能を実装することで,CSS1に適合できる。 コア機能は,明示的に除外された部分を除くCSS1規定の全体で構成する。この標準情報(TR)では,この部分は"CSS1コア:" として記されており,それに続いてコア機能以外の機能を示す。コア機能から除外された機能の集合を,CSS1上位機能と呼ぶ。

7.では,CSS1への適合性だけを定義する。将来,他の水準のCSSが存在するようになった場合には, 適合性のために他の機能集合の実装をUAに要求するかもしれない。

表現媒体の制約の例としては,資源の限定(フォント,カラーなど)及び解像度の限定(このために,余白は不正確となるかもしれない。) がある。これらの場合,UAは,スタイルシートの値を近似することが望ましい。異なるユーザインタフェースでは, それ自体の制約があるかもしれない。VRブラウザは,ユーザからの"距離"に基づいて文書を再スケール化するかもしれない。

UAは,読者に,表現に関する付加的な選択を提供してもよい。例えば,UAは,視覚損傷のある読者にオプションを提供したり, ブリンクを不可能とする選択を提供したりしてもよい。

CSS1は,フォーマット化のすべての様相を規定しているわけではないことに注意すること。例えば,UAは, 自由に字間スペース化のアルゴリズムを選択する。

この標準情報(TR)は,UAが次を許容することを推奨するが,要求はしない。

適合規則は,機能だけを示すものであって,ユーザインタフェースを示さない。

7.1    上位互換の構文解析

この標準情報(TR)は,CSS水準1を定義する。付加機能をもつ上位水準のCSSを将来定義することが期待される。 CSS1だけをサポートするUAが,確実に上位水準の機能を含むスタイルシートを読むことができるために, 7.1では,CSS水準1で有効でない上位水準の構成に出会った場合,UAは何をするかを定義する。

より詳細には,次のとおり。

CSSの任意の版に対して,CSSスタイルシートは,のリストから構成される。文には,@規則 及び規則集合の2種類がある。空白(スペース,タブ及び行換え)が,文の前後に存在してもよい。

 CSSスタイルシートは, HTML文書に埋め込まれることが多いが,より古いUAからスタイルシートを隠すことができるためには, HTMLのコメントの中にスタイルシートを置くのが便利となる。 HTMLのコメントトークン"<!--"及び"-->"が, 文の前,後及び中に出現してもよい。その前後に空白があってもよい。  

@規則は,@キーワードで開始する。@キーワードとは,先頭が'@'で始まる識別子とする (例えば,'@import','@page'など。)。識別子は,字,数字,ダッシュ及びエスケープ文字(後で定義する。)から成る。

@規則は,最初に来る次のセミコロン又は次のブロック(すぐ後で定義する。)まで及びこれを含むすべてから構成される。 '@import'以外の@キーワードで始まる@規則に出会ったCSS1 UAは,@規則全体を無視し,その後,構文解析を続ける。 '@import'で始まる@規則であっても,それがスタイルシートの最初にない場合には,つまり,他の規則 (たとえそれが無視される規則であっても)の後に出現する場合には,無視される。次に例を示す。

CSS1パーサが次のスタイルシートに出会ったと仮定する。


  @import "subs.css";

  H1 { color: blue }

  @import "list.css";

CSS1に従うと,2番目の@importは不正となる。CSS1パーサは,その@規則全体をスキップし,実効的には, スタイルシートを次のとおりに縮退する。


  @import "subs.css";

  H1 {color: blue}

ブロックは,左波かっこ({)で始まり,対応する右波かっこ(})で終わる。 その間に,任意の文字が存在してもよい。ただし,丸かっこ(()),角かっこ([])及び波かっこ({})は,常に対応する対で出現し, 入れ子になっていてもよい。一重引用符(')及び二重引用符(")も対応する対で出現し,その間の文字は, 文字列として構文解析される。 (文字列の定義については,附属書 Bのトークン化子を参照。) 次にブロックの例を示す。この例で,引用符の間の右波かっこは,ブロックの開き波かっことは合致しないこと, 2番目の一重引用符はエスケープ文字となること,そこで開き引用符とは合致しないこと,に注意。


  { causta: "}" + ({7} * '¥'') }

規則集合は,選択子文字列とそれに続く宣言ブロックとから成る。 選択子文字列は,最初の左波かっこ({)まで(ただし,これを含まない。)のすべてから構成される。 妥当なCSS1でない,選択子文字列で始まる規則集合は,スキップされる。

例えば,CSS1パーサが次のスタイルシートに出会うと仮定する。


  H1 { color: blue }

  P[align], UL { color: red; font-size: large }

  P EM { font-weight: bold }

2行目は,CSS1では不正な選択子文字列を含む。CSS1 UAは,規則集合をスキップし,スタイルシートを次のとおりに縮退する。


  H1 { color: blue }

  P EM { font-weight: bold }

宣言ブロックは,左波かっこ({)で開始し,対応する右波かっこ(})で終了する。 この間に,セミコロン(;)で分離された0個以上の宣言のリストが一つ存在する。

宣言は,特性,コロン(:)及びで構成される。これらの前後に空白があってもよい。 特性は,先に定義した識別子とする。あらゆる文字が値に出現するが,丸かっこ(()),角かっこ ([]),波かっこ({}), 一重引用符(')及び二重引用符(")は,対で出現しなければならない。 丸かっこ,角かっこ及び波かっこは,入れ子になっていてもよい。引用符の中では,文字は,文字列として構文解析される。

新たな特性及び既存の特性に対する新たな値を,将来,追加可能とするため, UAは不正な特性名又は不正な値をもつ宣言をスキップしなければならない。 すべてのCSS1特性は,それが受容する値について,それ自体の構文及び意味の制約をもつ。

例えば,CSS1パーサが次のスタイルシートに出会うとする。


  H1 { color: red; font-style: 12pt }

  P { color: blue;  font-vendor: any;  font-variant: small-caps }

  EM EM { font-style: normal }

最初の行の2番目の宣言は,不正な'12pt'をもつ。2行目の2番目の宣言は,未定義の特性'font-vendor'を含む。 CSS1パーサは,これらの宣言をスキップし,スタイルシートを次のとおりに縮退する。


  H1 { color: red; }

  P { color: blue;  font-variant: small-caps }

  EM EM { font-style: normal }

コメント(1.7参照)は,空白が出現できるすべての箇所に出現できる。 CSS1は,(値の内部などの)空白が出現できる付加的な位置を定義する。同様に,コメントもそこに書いてよい。

 次の規則は,常に成立する。

備考: HTMLのCLASS属性は,選択子のために許容される集合以外の多くの文字をクラス名として許す。 CSS1では,これらの文字は,エスケープされるか,又はUnicode番号として記述されなければならない。 "B&W?"は,"B¥&W¥?"又は"B¥26W¥3F"として,"κουροσ" (ギリシャ語の"kouros")は,"¥3BA¥3BF¥3C5¥3C1¥3BF¥3C2"として記述されなければならない。 CSSの今後の版では,より多くの文字を直接入力できることが期待される。

附属書 Bに,CSS1の文法を示す。

8    引用規格及びその他の文献

[1] W3C resource page on web style sheets (http://www.w3.org/pub/WWW/Style)。

[2] 1997年中にスタイルシート及び国際化をサポートした単一のHTML規定が登場することを期待する。 この分野の作業の進展については,"HTML3 and Style Sheets" (http://www.w3.org/pub/WWW/TR/WD-style)及び"Cougar DTD" (http://www.w3.org/pub/WWW/MarkUp/Cougar/HTML.dtd)に存在する。

[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0", RFC 1866, MIT/W3C, November 1995. この規定は,ハイパテキスト形式 (http://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_toc.html)でも得られる。

[4] F Yergeau, G Nicol, G Adams, M Dürst: "Internationalization of the Hypertext Markup Language" (ftp://ietf.org/internet-drafts/draft-ietf-html-i18n-05.txt).

[5] ISO 8879:1986. Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML)

[6] ISO/IEC 10179:1996 Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL). この規定は,ハイパテキスト形式 (http://occam.sjf.novell.com:8080/dsssl/dsssl96)でも得られる。

[7] ISO/IEC 9899:1990 Programming languages -- C.

[8] The Unicode Consortium, "The Unicode Standard -- Worldwide Character Encoding -- Version 1.0", Addison-Wesley, Volume 1, 1991, Volume 2, 1992.

[9] M Anderson, R Motta, S Chandrasekar, M Stokes: "Proposal for a Standard Color Space for the Internet - sRGB" (http://www.hpl.hp.com/personal/Michael_Stokes/srgb.htm)

[10] CIE Publication 15.2-1986, "Colorimetry, Second Edition", ISBN 3-900-734-00-3 (http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html)

[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)", RFC 1738, CERN, Xerox Corporation, University of Minnesota, December 1994

[12] "PNG (Portable Network Graphics) Specification, Version 1.0 specification" (http://www.w3.org/pub/WWW/TR/REC-png-multi.html)

[13] Charles A. Poynton: "Gamma correction on the Macintosh Platform" (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)

[14] International Color Consortium: "ICC Profile Format Specification, version 3.2", 1995 (ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)

[15] S C Johnson: "YACC - Yet another compiler compiler", Technical Report, Murray Hill, 1975

[16] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213

9    CSS1開発貢献者

HTMLの短い歴史の中で,これまでに幾つかのスタイルシート提案 が行われた。この提案も,これらに負っている。 特に Robert Raisch,Joe English及びPei Weiの提案からは影響を受けた。

多くの人々が,CSS1の開発に貢献した。特に,次の方々に感謝する。

Terry Allen, Murray Altheim, Glenn Adams, Walter Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello, Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich, Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony Jebson, William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton, Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, Cécile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irène Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood and Stephen Zilles 

次の3名には特に触れておきたい。 Dave Raggettからは,HTML3に関する助力及び作業を, Chris Lilley からは,継続した貢献,特にカラー及びフォント分野での貢献を, Steven Pembertonからは,彼の組織力及び創造的な能力に関して, 特に協力を頂いた。