REC-CSS1-19990111

カスケーディング・スタイル・シート、レベル１

W3C推薦(W3C Recommendation) 1996年12月17日、1999年1月11日改訂

現在のバージョン:	http://www.w3.org/TR/1999/REC-CSS1-19990111
最新のバージョン(邦訳原文):	http://www.w3.org/TR/REC-CSS1
前のバージョン:	http://www.w3.org/TR/REC-CSS1-961217
著者:	Håon Wium Lie (howcome@w3.org) Bert Bos (bert@w3.org)

このドキュメントの位置付け

この文書は、個人的な学習を目的に、W3Cのドキュメントを翻訳したものですが、出来るだけ原文に近いように、極端な意訳を避け、原文に近い表現になるように心がけたつもりです。また、原文の記述に関して、明らかにエラーがある部分については、原著者に問い合わせて修正しました。また、出来るだけわかり易くするため、ところどころに "翻訳注" として注釈を追加しました。この仕様書の標準は、W３Cの英語のパージョンです。なお、蛇足ですが、'table'に対するより詳細な視覚的フォーマットは、[CSSレベル２]で定義してあります。誤訳や意味の取り違え等の可能性は十分あり得ます。お気づきの点等ありましたら、山下宛メール(yamashita_t@infoseek.jp)でお知らせ下さい。

以下のものは原文を翻訳したもので、この翻訳文書についてのものではありません。

このドキュメントはW3Cの推奨(Recommendation)です。これは、W3C(http://www.w3.org/)メンバーおよび総体的な合意によって再審理され、この仕様書が、使用に適当であるという結論に達しました。これは、永続性のあるドキュメントであり、参照資料として使用されるか、別のドキュメントからの標準の参照として引用されるかもしれません。 W3Cは、この推薦の広範囲の展開を奨励します。

現在のW3C推薦(W3C Recommendations)および他の技術文書リストは http://www.w3.org/TR/ で見出せます。

このドキュメントは1996年12月17日に最初に公表されたドキュメントの改訂されたバージョンです。オリジナル版からの変更は付録F(Appendix F) 内に記載されています。この仕様書における既知のエラーリストは、 http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata で得られます。

概略

このドキュメントは、カスケーディング・スタイル・シート・メカニズムのレベル1(CSS1)について明記してあります。 CSS1は、単純なスタイル・シート・メカニズムで、著者と読者が、HTMLドキュメントにスタイル(例:フォント、色および間隔)を付けることを可能しています。 CSS1言語は、人間が読み易く書き易いものです。また、共通のデスクトップ・パブリッシング用語内のスタイルを表現します。

CSSの基本的な特徴の1つに、スタイル・シート･カスケードがあります; 著者は、同時に、読者が、人か技術的なハンディキャップを調節する為に個人のスタイル・シートを持っていても、好ましいスタイル・シートを付けることができます。異なるスタイル・シートの対立を解決するための規則は、この仕様書に定義されています。

この推薦規則は、スタイル・シート(Style Sheets) エリア内のW3Cの活動に起因しています。スタイル・シート上の背景的事項に関しては、 [1] を、参照してください。

概略
 用語

 1         基本概念
 1.1         HTML内への組込み
 1.2         グループ分け
 1.3         継承
 1.4         セレクターとしてクラス
 1.5         セレクターとしてID
1.6         文脈上のセレクター
 1.7         コメント
 2         擬似クラスおよび擬似要素
 2.1         アンカーの擬似クラス
 2.2         印刷上の擬似要素
 2.3         'first-line'擬似要素
 2.4         'first-letter'擬似要素
 2.5         セレクターとして擬似要素
 2.6         並列擬似要素
 3         カスケード
 3.1         'important'
3.2         カスケード順序
 4         フォーマット・モデル
 4.1         ブロックレベル要素
 4.1.1         垂直のフォーマット
 4.1.2         水平のフォーマット
 4.1.3         リスト項目の要素
 4.1.4         フローしている要素
 4.2         インライン要素
 4.3         交換された要素
 4.4         行の高さ
 4.5         キャンバス
 4.6         'BR'要素
 5         CSS1のプロパティ
 5.1         プロパティ値用の表記法
 5.2         フォントプロパティ
 5.2.1         フォントの一致
 5.2.2         'font-family'
5.2.3         'font-style'
5.2.4         'font-variant'
5.2.5         'font-weight'
5.2.6         'font-size'
5.2.7         'font'
5.3         色および背景
 5.3.1         'color'
5.3.2         'background-color'
5.3.3         'background-image'
5.3.4         'background-repeat'
5.3.5         'background-attachment'
5.3.6         'background-position'
5.3.7         'background'
5.4         テキストプロパティ
 5.4.1         'word-spacing'
5.4.2         'letter-spacing'
5.4.3         'text-decoration'
5.4.4         'vertical-align'
5.4.5         'text-transform'
5.4.6         'text-align'
5.4.7         'text-indent'
5.4.8         'line-height'
5.5         ボックス･プロパティ
 5.5.1         'margin-top'
5.5.2         'margin-right'
5.5.3         'margin-bottom'
5.5.4         'margin-left'
5.5.5         'margin'
5.5.6         'padding-top'
5.5.7         'padding-right'
5.5.8         'padding-bottom'
5.5.9         'padding-left'
5.5.10         'padding'
5.5.11         'border-top-width'
5.5.12         'border-right-width'
5.5.13         'border-bottom-width'
5.5.14         'border-left-width'
5.5.15         'border-width'
5.5.16         'border-color'
5.5.17         'border-style'
5.5.18         'border-top'
5.5.19         'border-right'
5.5.20         'border-bottom'
5.5.21         'border-left'
5.5.22         'border'
5.5.23         'width'
5.5.24         'height'
5.5.25         'float'
5.5.26         'clear'
5.6         格付けプロパティ
 5.6.1         'display'
5.6.2         'white-space'
5.6.3         'list-style-type'
5.6.4         'list-style-image'
5.6.5         'list-style-position'
5.6.6         'list-style'
6         構成単位
 6.1         長さの構成単位
 6.2         パーセンテージの構成単位
 6.3         色の構成単位
 6.4         URL
7         CSS1 適合
 7.1         前互換性をもつ解析
 8         参照
 9         謝辞

 付録A(Appendix A):HTML 2.0のためのサンプル・スタイル・シート
 付録B(Appendix B):CSS1文法
 付録C(Appendix C):符号づけ
 付録D(Appendix D):ガンマ修正
 付録E(Appendix E):CSS1の適用可能性および拡張性
 付録F(Appendix F):1996年12月17日のバージョンからの変更

用語

属性: HTMLの属性
著者: HTMLドキュメントの作成者･著者
ブロックレベル要素: 前後に改行を持っている要素(例：HTMLの'H1')
キャンバス: ドキュメントが描写されるUA(ユーザー･エージェント;プラウザ等)の描画面の一部
child element 子供要素: SGML [5] 用語内のサブ要素
文脈上のセレクター: 文書構造内の位置に基づいた要素と、符号するセレクター。文脈上のセレクターは、いくつかの単純なセレクターから成ります。例：文脈上のセレクター 'H1.initial B' は、単純な2つのセレクター、'H1.initial' と 'B' から成ります。
CSS: カスケーディング・スタイル・シート
CSS1: カスケーディング・スタイル・シートレベル1。このドキュメントは、ウェブ用の単純なスタイル・シート・メカニズムであるCSS1を定義しています。
CSS1の高度な特徴 advanced features: CSS1 core features と分類していませんが、この仕様書内に記述してあります。
CSS1の中心的特徴 core features: CSS1の一部で、UAを適合させるCSS1内全体で必要とされます。
CSS1パーザ parser: UA(ユーザー･エージェント)、CSS1スタイル・シートを読解します。
宣言: プロパティ特性 (例：'font-size')、および対応する値(例：'12pt')
デザイナー: スタイル・シートのデザイナー
ドキュメント: HTMLの文書
要素: HTMLの要素
要素タイプ: SGML[5]用語内で、包括的に同一なもの
虚構タグ順序 fictional tag sequence: 擬似クラスおよび擬似要素の振る舞いについて記述する為の手段。
フォント・サイズ: フォントが設計されているサイズ。一般的に、フォントのサイズは、ディセント(翻訳注:DTP用語フォントの下部部分)を備えた最も低い位置にある文字の底から、アセント(翻訳注:DTP用語)を備え、(任意の)分音符号を備えた最も高い文字の上部への間隔とぼぼ等しい。
HTML: ハイパーテキスト・マークアップ言語 [2]。SGMLの適用。
HTMLの拡張: マーク付けは、UAベンダーによって、最もよくある、ある程度の視覚的な効果をサポートする為、広められました。 "FONT"と、 "CENTER" 及び "BLINK" 要素は、HTMLが拡張された例です。同様の例に "BGCOLOR"属性があります。 CSSのゴールの内の1つは、HTMLの拡張に代案を提供することです。
インラインの要素: 前後に改行を持っていない要素(例：HTMLの'STRONG')
組込み範囲 intrinsic dimensions: 周囲によって組み付けられていない、要素それ自身によって定義されるような幅および高さ。この仕様書では、全ての交換された要素 --および単に交換された要素-- が、組込み範囲に付属することを仮定しています。
親要素 parent element: SGML[5]用語内の包含要素(containing element)。
擬似要素 pseudo-element: 擬似要素は、構造の要素ではなく、印刷上の項目(例：要素の１行目)をアドレス(翻訳注：個々のデータの位置を区別)するために、CSSセレクター内で使用されます。
擬似クラス pseudo-class: 擬似クラスは、要素を分類することで、HTMLのソース(例：アンカーが訪問されたかどうかという事実)へ外観を通知可能にするために、 CSSセレクターの中で使用されます。
プロパティ property: CSSによって影響を及ぼすことができるスタイルのパラメーター。この仕様書は、プロパティおよびそれらの対応する値のリストを定義しています。
読者: ドキュメントが与えられる人
交換された要素 replaced element: CSSの型で、単に組み込み範囲である要素。 HTMLでの、'IMG', 'INPUT', 'TEXTAREA', 'SELECT', 'OBJECT' 要素は、交換された要素の例になることが出来ます。例えば、'IMG' 要素の内容は、多くの場合、SRC属性が指すイメージと取り替えられます。 CSS1は、組込み範囲をどう見つけるか定義しません。
規定 rule: 宣言(例：'font-family: helvetica')、およびそのセレクター(例；'H1')
セレクター･選別するもの selector: 対応する規定が、どの要素に適用されるか識別する文字列。単純なセレクター(例：'H1')か、いくつかの単純なセレクターから成る文脈上のセレクター(例：'H1 B')の、どちらか一方でありえます。
SGML: Standard Generalized Markup Language [5]。 HTMLはSGMLの応用です。
単純なセレクター: このセレクターは、タイプおよび(または)属性に基づいた要素と一致するもので、ドキュメント構造内のその要素の位置ではありません。例えば、'H1.initial' は単純なセレクターです。
スタイル・シート: 規定のコレクション
UA: ユーザー･エージェント(User Agent)、多くの場合、ウェブ・ブラウザまたはウェブのクライアントです。
ユーザ: 読者と同義です。
重み weight: 規定の優先順位
フローしている要素 floating element: 'float'値が、'none'以外の要素 (翻訳注：原文にはありませんが、よく出てくる語なので追加しました)
非フロートのブロックレベル要素 non-floating block-level element: 'float'値が、'none'の要素 (翻訳注：原文にはありませんが、よく出てくる語なので追加しました)
ホワイトスペース whitespace: スペース、タブ、行区切 (翻訳注：原文にはありませんが、よく出てくる語なので追加しました)

この仕様書のテキストでは、シングルクォート('...')が、HTMLとCSSの抜粋を意味しています。

1 基本概念

単純なスタイル・シートの設計は容易です。その一つとして、少しのHTMLと若干の基礎的なデスクトップ・パブリッシング用語についての知識だけを必要とします。例えば、'H1'要素のテキストの色を青に設定するために、それは次のように表せます。

H1 { color: blue }

上記の例は単純なCSSの規定です。規定は2つのメイン部分から成ります:セレクター('H1') および宣言('color: blue')。宣言は2つの部分を持っています:プロパティ('color') および値('blue')。同時に、プロパティのほんの1つに影響を及ぼす試みである上記の例では、HTMLドキュメントの描画が必要とされ、描画により、それ自身に基づくスタイル・シートとしての資格を得ます。さらに、他のスタイルシートと結び付ける(CSSの基本特徴の１つは、スタイル・シートが組み合わせられるということです) ことで、最終的なドキュメントのプレゼンテーションを決定します。

セレクターは、HTMLドキュメントとスタイル・シートの間のリンクで、全てのHTMLの要素タイプは、セレクターが可能です。 HTMLの要素タイプは、HTML仕様書[2]の中で定義されています。

'color'プロパティは、 HTMLドキュメントのプレゼンテーションを決定する約50のプロパティのうちの1つです。プロパティおよびそれらの可能な値のリストは、この仕様書に定義されています。

HTML著者は、ドキュメント用に特定のスタイルを提案したい場合のみ、スタイル・シートを書く必要があります。各ユーザー･エージェント(UA、多くの場合"ウェブ・ブラウザ"あるいは"ウェブ・クライアント")は、合理的な -- しかし十分論証できるほどに普通の -- 方法で、ドキュメントを提示するデフォルトのスタイルシートを持ちます。付録A(Appendix A)は、HTML 2.0仕様書 [3]に提案されるようなHTMLドキュメントを示すサンプル・スタイル・シートを含んでいます。

CSS1言語用の公式の文法は、付録B(Appendix B) に定義されています。

1.1 HTML内への組込み

プレゼンテーションに影響を及ぼすスタイル・シートの順番については、UAがそれらの存在を知っていなければなりません。 HTML仕様書[2]では、スタイル・シートとHTMLをリンクする方法を定義しています。従って、このセクションは有益ですが、標準ではありません(翻訳注：HTML仕様書が標準)：

<HTML>
  <HEAD>
    <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>見出しは青(blue)です</H1>
    <P STYLE="color: green">一方、段落は緑(green)です。
  </BODY>
</HTML>

例では、スタイルとHTMLをリンクさせる4つの方法を示しています: 外部スタイル・シートをリンクする'LINK'要素の使用、 'HEAD'要素内部の'STYLE'要素、 CSSの'@import'記法を使用してスタイルシートを導入、および、'BODY'内部の要素上での'STYLE'属性。後者のオプションは、内容とスタイルを混合し、従来のスタイル・シートの利点に対応するものを失います。

'LINK'要素は、読者が選択できる代案のスタイルシートを参照します。同時に、スタイルシートの導入は、自動的に、スタイルシートの残りの部分と併合されます。

慣例上、UAは暗黙の内に未知のタグを無視します。その結果、古いUAは、'STYLE'要素を無視しますが、'STYLE'要素の内容は、ドキュメントのボディーの一部として扱われ、描画されます。過渡期の段階(翻訳注：STYLE要素を認識しないUAが存在する可能性がある場合)では、 'STYLE'要素の内容を、SGMLのコメントを使用して隠してもさしつかえありません；

<STYLE TYPE="text/css"><!--
  H1 { color: green }
--></STYLE>

'STYLE'要素が、DTD( [2] の中での定義として)の中で、"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 継承

最初の例において、'H1'要素の色が、青く(blue)なるように指定しました。次のものは、要素の内部を強調(翻訳注：'EM'要素をもっている)した'H1'要素があると仮定します:

<H1>見出しは、<EM>重要!</EM> です</H1>

色が'EM'要素に割り当てられていない場合、強調した"重要!"は、親要素の色を継承します。つまり、それは、さらに青で表現されます。他のスタイルプロパティ('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% }  /* 'font-size'に相対的、つまり 12pt */

パーセンテージの値を認める各プロパティについては、それがどのプロパティを参照するかが定義されます。さらに言うと、'P'の子供要素は、パーセンテージではなく、 'line-height' (つまり、12pt)の計算された値を継承します。

1.4 セレクターとしてのクラス

要素に対する制御の顆粒性を増加させるために、新しい属性'CLASS'が、HTML [2] に加えられました。すべての'BODY'要素内部の要素は、クラス付けすることができ、クラスは、スタイル・シート内でアドレス(個々のデータの位置を区別)することができます:

<HTML>
 <HEAD>
  <TITLE>タイトル</TITLE>
  <STYLE TYPE="text/css">
    H1.pastoral { color: #00FF00 }
  </STYLE>
 </HEAD>
 <BODY>
  <H1 CLASS=pastoral>緑にする方法</H1>
 </BODY>
</HTML>

標準の継承規定は、クラス付けされた要素に適用され、ドキュメント構造内で親からの値を継承します。

その一つとして、セレクター内でのタグ名の省略により、同じクラスに属するすべての要素を、アドレス(個々のデータの位置を区別)することが出来ます：

.pastoral { color: green }  /* pastoralクラスを備えた全ての要素が対象 */

1つのクラスは、1つのセレクターごとにだけ指定することができます。従って、'P.pastoral.marine'は、CSS1において無効なセレクターです。 (下に記述された文脈上のセレクターは、単純なセレクターごとに、1つのクラスを持つことができます。)

CSSは、CLASS属性にこの程度の能力しか提供しませんが、多くの場合において、クラスが設定されるどのようなHTML要素でも問題にすらなりません -- 任意の要素に、ほとんどすべてのそれ以外のものをエミュレートさせることができます。この能力に依存する事は、推奨されません。それは、普遍的な意味を持っている構造のレベル(HTML要素)を取り去るからです(翻訳注:例えば全ての要素に斜体とボールドをかけたら、EM要素やSTRONG要素が用をなさなくなります)。クラスに基づいた構造は、クラスの意味が相互に一致したところの制限された領域内において非常に有用です。

1.5 セレクターとしてのID

HTML[2]では、さらにドキュメント上にユニークな値を持つことを保証する'ID'属性を導入しています。それは、したがってスタイル・シート・セレクターとして特に重要になりえ、先行する'#'でアドレス(個々のデータの位置を区別)することができます:

#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }

<P ID=z98y>幅広のテキスト</P>

上記の例において、１番目のセレクターは、'ID'属性値により、'P'要素と一致します。２番目のセレクターは、要素タイプ('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 }

ここでは、１番目のセレクターは少なくとも１つの'UI'先祖を含んだ'LI'要素に一致します。２番目のセレクターは、１番目のものの部分集合と一致します。すなわち、少なくとも２つの'UI'先祖を含んだ'LI'要素です。 (翻訳注：検索引当順序によっては、１番目のセレクターが優先されて、２番目のセレクターが無視される可能性がある) この矛盾は、より長い探索パターンのために、多くの指示がある２番目のセレクターによって解決されます。これについての詳細に関しては、カスケード順序(セクション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'要素とすべて一致します。２番目のセレクターは、'reddish'クラスの先祖を持っている'H1'要素とすべて一致します。３番目のセレクターは、'ID=x78y'を備えた要素の子孫である'CODE'要素とすべて一致します。４番目のセレクターは、'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 }  /* 赤, 本当に赤!! */

コメントは入れ子にすることができません。 CSS1パーザにとって、コメントはホワイトスペースと等価です。

2 擬似クラスおよび擬似要素

CSS1では、スタイルが、通常、ドキュメント構造中の位置に基づいた要素に加えられます。この単純なモデルは、種々様々なスタイルに十分ですが、いくつかの共通の効果をカバーしません。擬似クラスと擬似要素の概念は、対外的な情報が構成処理に影響するのを可能にするために、 CSS1においてアドレスすることを拡張します。

擬似クラスと擬似要素は、CSSセレクターの中で使用することができますが、HTMLソース中では存在しません。それどころか、スタイル・シート中でアドレス目的の使用のために、一定の条件下のUAによって"挿入"されます。擬似クラスと擬似要素が、これらの作用について記述する便利な方法なので、 "クラス"および"要素"として引き合いに出されます。より具体的には、それらの作用は、虚構タグ順序(fictional tag sequence)によって定義されます。

擬似要素は、要素のサブ部分をアドレスするために使用され、擬似クラスは、スタイルシートが異なる要素タイプを区別する事を可能にします。 (翻訳注：擬似要素｢'first-line'要素の１行目、'first-letter'要素内の最初の文字｣は、ともに要素の一部分に対する効果です)

2.1 アンカーの擬似クラス

ユーザー･エージェントは、通例、新しい訪問アンカーを、古いものとは異なって表示します。 CSS1では、これが'A'要素上の擬似クラスによって扱われます:

A:link { color: red }       /* 訪問を受けてないリンク */
A:visited { color: blue }   /* 訪問されたリンク */
A:active { color: lime }    /* アクティブなリンク */

(翻訳注：この原文のドキュメントにも使用し、W3Cのドキュメントにも使用されている、とっても良く使う'hover'は、CSS2の機能です。CSS1では上記の３つのみなのですが、よく使うので下記に追加しておきます。なお、IE3がこの擬似クラスを認識すると誤動作するので、'@media screen'で囲んでIE3に認識されないようにします。ちなみに、'@media'もCSS2の機能です)

@media screen {  /* hide from IE3 */
A:hover { background: #FFA } /* マウスが上に来た時のリンク */
}

'HREF'属性を備えた'A'要素はすべて、これらのグループに属する唯一のものに当てはまります(つまり、目標アンカーは影響されません) (翻訳注：目標アンカーは、'NAME'属性を備えた'A'要素です)。 UAは、ある瞬間の後に、'visited'から'link'へ、要素を変更することを選択し得ます。 'active'リンクは、読者によって現在選択されている(例：マウスボタンの押し下げによって)ものです。

アンカーの擬似クラスの構成は、あたかもクラスが手動で挿入されたかのようです。 UAは、アンカー擬似クラスの推移により、現在表示されたドキュメントを再構成する事は必要とされません。例えば、スタイル・シートは、'active'リンクの'font-size'が、 'visited'リンクより大きいことを合法的に明示できますが、 UAは、読者が'visited'リンクを選択した場合に、動的にドキュメントを再構成する事を必要とされません。

擬似クラスのセレクターは、標準のクラスと一致せず、その逆も一致しません。下記の例におけるスタイル規定は、したがっていかなる効果もありません:

A:link { color: red }

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

CSS1では、アンカーの擬似クラスは、'A'以外の要素に効果がありません。したがって、要素タイプはセレクターから省略することができます:

A:link { color: red }
:link { color: red }

上記の2つのセレクターは、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では、２つあるこのような印刷上の項目(要素の１行目'first-line'と最初の文字'first-letter')は、擬似要素によってアドレスする事ができます。

CSS1 core: UAは、セレクター中の ':first-line' か、':first-letter' に対して、全ての規定を無視し得ます。言い換えれば、代りに、これらの擬似要素上のプロパティの部分集合をサポートするだけです。 (セクション 7を参照)

2.3 'first-line'擬似要素

'first-line'擬似要素は、キャンパス面に構成される最初の行に、特別なスタイルを適用するために使用されます:

<STYLE TYPE="text/css">
  P:first-line { font-variant: 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), marginのプロパティ (5.5.1-5.5.5), paddingのプロパティ (5.5.6-5.5.10), borderのプロパティ (5.5.11-5.5.22), 'float' (5.5.25), 'clear' (5.5.26).

次のような仕方で、ドロップキャップの最初の文字を、２行の間にわたらせることが出来ます:

<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-letter'擬似要素のタグは、内容(つまり最初の文字)と隣接します、ところが一方、'first-line'擬似要素の開始タグは、付随する要素の開始タグの後ろに続く右に挿入されることに注意してください。

UAは、どの文字が'first-letter'要素の内部であるか定義しています。通常は、最初の文字に先行するクォートは、含めて考えます(翻訳注：下の例では２重引用符):

||   /\    bird in 
    /  \   the hand
   /----\  is worth
  /      \ two in
the bush," says an 
old proverb.

段落の開始が、通常の文字と考えられない、他の句読(例：括弧と省略記号)か、あるいは他の文字で始まる場合(例：数字と数学記号)、 'first-letter'擬似要素は、通例的に無視されます。

いくつかの言語は、ある文字の組合せを扱う方法に関して特定のルールを持ち得ます。オランダ語においては、例えば、"ij"の組合せが単語の開始として現れる場合、 'first-letter'擬似要素内で、その両方を考慮すべきです。

'first-letter'擬似要素はブロックレベル要素だけに添えられます。

2.5 セレクター中の擬似要素

文脈上のセレクターでは、擬似要素がセレクターの終わりに許可されるだけです:

BODY P:first-letter { color: purple }

擬似要素は、セレクター中のクラスと結合することができます:

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

<P CLASS=initial>最初の段落</A>

上記の例は、'CLASS=initial'のあるすべての'P'要素の最初の文字を赤(red)くします。クラスまたは擬似クラスと組合せた時は、擬似要素はセレクターの終わりに指定されなければなりません。擬似要素は、セレクター毎に１つだけ指定することができます。

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'要素の最初の文字は、24ptのフォント･サイズで緑(green)になります。 (キャンパス面に構成された)最初の行の残りは青(blue)になり、それ以外の段落の残りは赤(red)になります。改行が単語の"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'の終了と開始タグのセットは、必ず再生成されて虚構タグ順番となします:

<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 }     /* 導入(import)されたスタイルシートに優先します */

著者/読者バランス

読者および著者の両方は、スタイル・シートをとおしてプレゼンテーションに影響を及ぼすことができます。そうするためには、ウェブの基本特徴を反映させる同じスタイルシート言語を使用します：全ての人々が出版に携わることになります。 UAは、個人のスタイルシートを参照する方法を自由に選択します。

時々、矛盾が、プレゼンテーションに影響を及ぼすスタイル・シート間に発生します。矛盾解決は、重みを持っている各スタイルの規定に基づきます。デフォルトによって、読者の規定の重みは、著者のドキュメント内の規定の重みより小さく、入って来るドキュメントのスタイル・シートと読者個人のシートの間に矛盾がある場合、著者の規定が使用されます。読者および著者の規定の両方は、UAのデフォルト値に優先します。

導入されたスタイル・シートは、さらにお互いにカスケードされ、下に定義されたカスケードの規則に従って整列されて導入されます。スタイル・シートそれ自身内で指定されたすべての規定は、導入されたスタイル・シート中の規定に優先します。すなわち、導入されたスタイル・シートは、カスケード順番がスタイル・シートそれ自身内の規定より低くなっています。導入されたスタイル・シートは、それ自身が導入したその他のスタイルシートに再帰的に優先します。

CSS1では、'@import'ステートメントは、すべて、スタイル・シートの最初(任意な宣言の前)に存在しなければなりません。これは、スタイル・シートそれ自身中の規定が、導入されたスタイル・シート中の規定に優先することの理解を容易にしています。

3.1 'important'

スタイル・シート・デザイナーは、宣言の重みを増加させることができます:

H1 { color: black ! important; background: white ! important }
P  { font-size: 12pt ! important; font-style: italic }

上記の例において、最初の３つの宣言は増加された重みを持ち、最後の宣言は正常な重みを持っています。

'important'宣言を備えた読者の規定は、正常な宣言を備えた著者の規定に優先します。 'important'宣言を備えた著者の規定は、'important'宣言を備えた読者の規定に優先します。

3.2 カスケード順序

対立する規定は、CSSの仕組みに本質的です。要素/プロパティの組合せに見合う値を見つけるために、次のアルゴリズムに従い得ます:

問題の要素/プロパティに当てはまる宣言をすべて見つけてください。セレクターが、問題の要素と一致する場合、宣言が適用されます。宣言が当てはまらない場合、継承された値が使用されます。継承された値がない(これは'HTML'要素および継承されないプロパティに対するケース)場合、初期値が使用されます。
明示的な重みにより宣言をソートする: '!important'付けされた宣言は、無指定の(標準)宣言より多くの重みを持ちます。
起源によりソートする:著者のスタイルシートは、読者のスタイルシートに優先し、同時にUAのデフォルト値に優先します。導入されたスタイルシートは、それを導入したスタイルシートと同じ起源を持ちます。
セレクターの特異性によりソートする:より特異なセレクターは、より一般的なものに優先します。特異性を見つけるために、セレクター中のID属性の数(a)、セレクター中のCLASS属性の数(b)、および、セレクター中のタグ名の数(c)を数えます。３つの数の連結は(大きな基準を用いる数の体系内で)、特異性を与えます。いくつかの例:
```
LI            {...}  /* a=0 b=0 c=1 -> 特異性 =   1 */
UL LI         {...}  /* a=0 b=0 c=2 -> 特異性 =   2 */
UL OL LI      {...}  /* a=0 b=0 c=3 -> 特異性 =   3 */
LI.red        {...}  /* a=0 b=1 c=1 -> 特異性 =  11 */
UL OL LI.red  {...}  /* a=0 b=1 c=3 -> 特異性 =  13 */ 
#x34y         {...}  /* a=1 b=0 c=0 -> 特異性 = 100 */ 
```
擬似要素および擬似クラスは、正常な要素およびクラスとしてそれぞれ数えられます。
順番指定によりソートする:2つの規定が同じ重みを持っている場合、後に指定されたものが勝ちます。導入されたスタイル・シート内の規定は、スタイル・シートそれ自身内のどんな規定でも、前にあると考えられます。

プロパティ値の検索は、ある規定が、同じ要素/プロパティ組合せに適用され、他の規定より高い重みを持っている時にはいつでも終了することができます。

この方策は、著者のスタイル・シートに読者のものより相当に高い重みを与えます。それゆえに、読者が、あるスタイルシートの影響を止めることができる能力(例：プルダウンメニューの中で)を持つことは重要です。

要素の'STYLE'属性(例に関してはセクション 1.1参照)内の宣言は、スタイルシートの最後に指定される、IDペースのセレクターによる宣言と同じ重みを持っています:

<STYLE TYPE="text/css">
  #x97z { color: blue }
</STYLE>

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

上記の例において、'P'要素の色は赤(red)です。特異性は両方の宣言に対して同じですが、 'STYLE'属性内の宣言は、カスケードの規則５(翻訳注：上記のアルゴリズムの５｢順番指定によりソート｣)のために 'STYLE'要素内のものより優先されます。

UAは、他のスタイルのHTML属性(例：'ALIGN')を選択し得ます。もしそうなら、これらの属性は、１に等しい特異性を備えたCSSの規定に対応するものとして訳されます。規定は、著者のスタイルシートの始まりにあると仮定され、その後のスタイル・シートの規定によって無効にされます。過渡期では、このポリシーが、スタイルの属性がスタイル・シートと共存することをより容易にします。

4 フォーマット・モデル

CSS1では、箱型に方向付けられた単純なフォーマット・モデルを仮定した場合に、各構成された要素は、長方形の1箱以上の箱に帰着します ('none'の'display'値を持っている要素は構成されず、したがって箱に帰着しません)。箱はすべて、任意のpadding、border(境界)、margin(余白)の領域に囲まれた中心の内容領域を持っています。

 _______________________________________
|                                       |
|           margin (transparent)        |
|   _________________________________   |
|  |                                 |  |
|  |        border                   |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     padding               |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  content            |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

          |    element width    |
|               box width               |

翻訳注：この図に日本語を入れると、形が崩れる為、原文をそのまま引用しました。
transparent=透明、content=内容、 element width=要素の幅、box width=箱の幅

margin(余白)のサイズ、padding、border(境界)は、 margin (5.5.1-5.5.5), padding (5.5.6-5.5.10), border (5.5.11-5.5.22) プロパティに対してそれぞれセットします。 paddingの領域は、要素それ自身と同じ背景を使用します (背景のプロパティに設定する (5.3.2-5.3.7)を参照)。 border(境界)のための色とスタイルは、border(境界)に対してセットします。 margin(余白)は、つねに透明で、親要素が通り抜けて照ります。

箱のサイズは、要素幅(つまり構成されたテキストあるいはイメージ)とpadding、 border(境界)とmargin(余白)領域の合計です。

構成するものの視点から見て、要素の2つの主なタイプは、ブロックとインラインです。

4.1 ブロックレベル要素

'block'の'display'値を備えた要素あるいは'list-item'は、ブロック要素です。さらに、フローしている要素 ('none'以外の'float'値を備えた要素)は、ブロックレベル要素であるとみなします。

次の例は、margin(余白)とpaddingが、２つの子供を備えた'UL'要素をどのように構成するか示します。図形を単純化するために、border(境界)はありません。さらに、この例における単一文字の"定数"は、合法的なCSS1の構文ではありませんが、図にスタイル・シートの値を結び付ける都合が良いやり方です。 (翻訳注:下記例文中の'A', 'B', 'C', 'D'等の定数は、値がどう結び付けられているか例を示す為に便宜的に定義されたもので、 CSS1構文では、定数を使うことはできません。)

<STYLE TYPE="text/css">
  UL { 
    background: red; 
    margin: A B C D;      
    padding: E F G H;
  }
  LI { 
    color: white;    
    background: blue;     /* これにより、テキストは青地に白になります */ 
    margin: a b c d; 
    padding: e f g h;
  }
</STYLE>
..
<UL>
  <LI>1st element of list
  <LI>2nd element of list
</UL>

 _______________________________________________________
|                                                       |
|    A      UL margin (transparent)                     |
|    _______________________________________________    |
| D |                                               | B |
|   |    E   UL padding (red)                       |   |
|   |    _______________________________________    |   |
|   | H |                                       | F |   |
|   |   |    a   LI margin (transparent,        |   |   |
|   |   |        so red shines through)         |   |   |
|   |   |    _______________________________    |   |   |
|   |   | d |                               | b |   |   |
|   |   |   |    e    LI padding (blue)     |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   | h  1st element of list      f |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   |    g                          |   |   |   |
|   |   |   |_______________________________|   |   |   |
|   |   |                                       |   |   |
|   |   |     max(a, c)                         |   |   | <- note the max
|   |   |    _______________________________    |   |   |
|   |   |   |                               |   |   |   |
|   |   | d |    e    LI padding (blue)     |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   | h  2nd element of list      f |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   |    g                          |   |   |   |
|   |   |   |_______________________________|   |   |   |
|   |   |                                       |   |   |
|   |   |   c    LI margin (transparent,        |   |   |
|   |   |        so red shines through)         |   |   |
|   |   |_______________________________________|   |   |
|   |                                               |   |
|   |    G                                          |   |
|   |_______________________________________________|   |
|                                                       |
|   C                                                   |
|_______________________________________________________|

翻訳注：この部分に日本語を入れると、プラウザ毎に形が異なる為、原文のまま引用しました。
transparent＝透明、note the max＝最大であることに注意、 red shines through＝赤が通過して映える

技術的に、paddingとmargin(余白)のプロパティは継承されませんが、例が示すように、要素の配置は、先祖と兄弟に関連しているので、これらの要素のpaddingとmargin(余白)プロパティは、子供上に影響があります。

もし上記の例においてborder(境界)があったならば、border(境界)は、paddingとmargin(余白)の間に現われます。

次の図表は、いくつかの有用な用語を導入しています:

                           --------------- <-- top
                             top margin
                           ---------------
                             top border
                           ---------------
                            top padding
                           +-------------+ <-- inner top
|        |        |        |             |         |         |         |
|--left--|--left--|--left--|-- content --|--right--|--right--|--right--|
| margin | border | padding|             | padding | border  | margin  |
|        |        |        |             |         |         |         |
                           +-------------+ <-- inner bottom
^                          ^             ^                             ^
left         left inner edge             right inner edge          right
outer                                                              outer
edge                        bottom padding                          edge
                           ---------------
                             bottom border
                           ---------------
                             bottom margin
                           --------------- <-- bottom

翻訳注: この図に日本語を入れると、形が崩れる為、原文をそのまま引用しました。
　　　　inner top=内部のトップ、inner bottom=内部の底、content=内容、
　　　　left outer edge=左の外部の縁、right outer edge=右の外部の縁、
　　　　left inner edge=左の内部の縁、right inner edge=右の内部の縁、

左の外部の縁(left outer edge)は、そのpadding、border(境界)、margin(余白)を考慮に入れたものを含んだ要素の縁です。 左の内部の縁(left inner edge)は、任意のpaddingか、border(境界)か、margin(余白)の内側にある内容のみの縁です。右に対するものは同様です。 トップ(top)は、任意のpaddingか、border(境界)か、margin(余白)を含んだ、要素のトップで、非フロートなブロックレベル要素のためにではなく、インラインの要素およびフローしている要素のためにだけ定義されます。 内部のトップ(inner top)は、任意のpaddingか、border(境界)か、margin(余白))の内側にある内容のトップです。 底(bottom)は、任意のpadding、border(境界)、margin(余白) の外側にある要素の底で、インラインとフローしている要素のためだけに定義され、非フロートなブロックレベル要素のためではありません。 内部の底(inner bottom)は、任意のpadding、border(境界)、margin(余白)の内側にある要素の底です。

要素の幅(width)は、内容の幅(つまり左の内部の縁と右の内部の縁の間の間隔)です。 高さ(height)は、内容の高さ(つまり内部のトップから内部の底までの間隔)です。

4.1.1 垂直のフォーマット

非フロートなブロックレベル要素上のmargin(余白)の幅は、箱を囲んでいる縁への最小の間隔を明示します。隣接した垂直の2つ以上のmargin (borderも、paddingも、それらの間の内容も存在しない)は、最大のmargin値を使用するために収縮されます。ほとんどの場合、垂直のmarginを収縮した後の結果は、視覚的により多くの満足と、デザイナーが期待するものにより接近します。上記の例において、2つの'LI'要素間のmarginは、１番目のLI要素 'margin-bottom'と２番目のLI要素 'margin-top'の最大値の使用により収縮しています。同様に、もし'UL'のpadding、および１番目の'LI'要素の間('E'定数)が、0だったならば、 ULと１番目のLI要素のmarginは収縮します。

マイナスのmarginの場合には、隣接するマイナスの最大の絶対値は、隣接するプラスの最大値から差し引かれます。 (翻訳注:絶対値で比較して、プラスの方が大きい場合は、プラスの方の値が採用され、マイナスが大きい場合は、 "プラス値-マイナス値の絶対値"の演算により値を求めます。) プラスのmargin(余白)がない場合、 margin(余白)に隣接するマイナスの最大の絶対値は、0から差し引かれます。

4.1.2 水平のフォーマット

非フロートおよびブロックレベル要素の水平の位置とサイズは、 7つのプロパティ('margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right', 'margin-right')によって決定され、これらの7つの合計は、親要素の'width'と常に等しくなります。

デフォルトによって、要素の'width'は、'auto'です。要素が交換された要素でない場合、これは上に言及された7つのプロパティの合計が、親の幅と等しいように'width'が、UAによって計算されることを意味します。要素が交換された要素である場合、 'width'に対する'auto'の値は、要素の組込み幅と自動的に取り替えられます。

7つのプロパティのうちの3つ('margin-left', 'width', 'margin-right')は、'auto' にセットすることができます。交換された要素については、'width' 上の'auto' の値が組込み幅と取り替えられますので、交換された要素については、2つの'auto'値のみです。

'width'は、非マイナスのUAに定義された最小値 (それは要素から要素までで変わり得、別のプロパティにすら依存し得ます) を持っています。もし'width' が、設定限界を下回ったなら、または、明示的に最小値がセットされるか、'auto' であるかのどちらかの場合、および、規定が小さ過ぎる場合、値はその代りとして最小値と置き換えられます。

'margin-left'か,'width' あるいは'margin-right' のまさに1つが、'auto'である場合、 UAは7つの合計を親の幅と等しくする値を、そのプロパティに割り当でます。

プロパティのどれも'auto'でない場合、'margin-right' の値は、'auto' を割り当てられます。

3つの内(翻訳注：'margin-left', 'width', 'margin-right')2つ以上が'auto'の場合で、そのうちの1つが'width' なら、その時には、それ以外のもの('margin-left' および/または 'margin-right') が、0にセットされ、 'width' には、７つの合計を親の幅と等しくする為に必要な値が与えられます。

その他の点で、'margin-left'と'margin-right'の両方が、'auto'である場合、それらは等価値にセットされます。これは、その親の内側の要素を中央に位置させます。

'auto'がインラインかフローしている要素中で、7つのプロパティの1つに対する値としてセットされる場合、 0にセットされたものと仮定してみなされます。

垂直のmarginと異なり、水平のmarginは収縮しません。

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>１番目のリスト項目は最初に来ます。
  <LI>２番目のリスト項目は次に来ます。
</UL>

<UL CLASS=COMPACT>
  <LI>１番目のリスト項目は、最初に来ます。
  <LI>２番目のリスト項目は、次に来ます。
</UL>

上記の例は次のように構成され得ます:

* １番目のリスト項目は、
  最初に来ます。

* ２番目のリスト項目は、
  次に来ます。

  * １番目のリスト
  項目は、最初に来ます。

  * ２番目のリスト
  項目は、次に来ます。

右から左方向のテキストでは、マーカーは箱の右側上に存在します。

4.1.4 フローしている要素

'float'プロパティを使用すると、要素は、要素の標準フロー以外であると宣言することができ、ブロックレベル要素として構成されます。例えば、イメージの'float'プロパティを'left'にセットする事により、イメージは、別のブロックレベル要素のmarginか、paddingか、borderに達するまで左に移動されます。標準のフローは、右側上を取り囲んでおおいます。要素それ自身のmargin、border、paddingは、特権を与えられ、 marginは、隣接した要素のmarginで収縮しません。

フローしている要素は、次の制約を用いて主題を位置します(用語の説明に関してはセクション4.1を参照):

フローしている要素の左側の外部の縁は、親要素の内の左側の縁の左に存在し得ません。フローしている要素の右側も類似。
フローしている要素の左側の外部の縁は、 (HTMLソース内で)すべて以前に左に位置するフローしている要素の右側の外側の縁の右に存在しなけらばなりません。あるいは、前者のトップは、後者(翻訳注:以前に左に位置するフローしている要素)の底より低くなければなりません。フローしている要素の右側も類似。
左に位置するフローしている要素の右側の外側の縁は、その右側にあるすべてのフローしている要素の左側の外側の縁の右には存在し得ません (翻訳注:要素の占める領域が、重複することはないという事)。フローしている要素の右側も類似。
フローしている要素のトップは、その親の内側のトップより高くなることはあり得ません。
フローしている要素のトップは、すべての以前のフローティングか、ブロックレベル要素のトップより高くなることはあり得ません。
フローしている要素のトップは、 HTMLソース中のフローしている要素に先行する内容で、すべてのline-box(セクション4.4を参照)のトップより高くなることはあり得ません。
フローしている要素は、できるだけ高く置かれなければなりません。
左に位置するフローしている要素は、可能な限り左側に置かれなければならない、右に位置するフローしている要素も、可能な限り右側にする。より高い位置のものとしては、左/右側に最も寄ったものの上方を採用します。

<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>

上記の例は、次のように構成することができます:

 ________________________________________
|
|          max(BODY margin, P margin)
|          ______________________________
|    |    |             Some sample text
| B  | P  | IMG margins that has no other
| O  |    |    _____    purpose than to 
| D  | m  |   |     |   show how floating
| Y  | a  |   | IMG |   elements are moved
|    | r  |   |     |   to the side of the
| m  | g  |   |_____|   parent element
| a  | i  |             while honoring
| r  | n  |             margins, borders
| g  |    |             and padding. Note
| i  |    |how adjacent vertical margins  
| n  |    |are collapsed between non-
|    |    |floating block-level elements.

'P'要素のmargin(余白)は、フローしている'IMG'要素を囲んでいることに注意して下さい。

フローしている要素が、他の要素のmargin(余白)、border(境界)、paddingの領域で、かち合うかもしれない、２つの状況があります:

フローしている要素が、マイナスのmargin(余白)を持つ時: フローしている要素上のマイナスのmargin(余白)は、他のブロックレベル要素同様に特権を持ちます。
フローしている要素が、それがある要素より広いかより高い時。

4.2 インラインの要素

ブロックレベル要素として構成されていない要素は、インライン要素です。インラインの要素は、他の要素とライン・スペースを共有することができます(翻訳注：同じ行上にあるという事)。この例を考えて見て下さい

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

'EM'と'STRONG'がインラインの要素である一方、'P'要素は通常のブロックです。 'P'要素が、１行ですべての要素を構成するのに十分な幅がある場合、行上にインラインの2つの要素は存在します:

Several emphasized words appear.

1行の行上に十分な余地がない場合、インラインの要素はいくつかの箱へ分離されます:

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

上記の例は、次のように構成されます:

Several emphasized
words appear here.

If the inline element has margins, borders, padding or text decorations attached, these will have no effect where the element is broken:
(翻訳注:上記の原文の説明は、次に続く図と矛盾があるように思えます。一応訳すと次のようになります。インラインの要素が、margin(余白)か、border(境界)か、paddingか、テキストの装飾を付属させる場合、これらは、要素が分割される時には効果がありません:)

         ----------
Several |emphasized
         ----------
-----
words| appear here.
-----

(上記の'図'は、ASCIIグラフィックスの使用によりわずかにゆがみます。行の高さを計算する方法の記述に関しては、セクション4.4 を参照してください。)

4.3 交換された要素

交換された要素とは、要素によって指し示された内容と取り替えられる要素です。例えば、HTMLでは、'IMG'要素が、'SRC'属性によって指し示されたイメージに取り替えられます。これは、交換された要素が、それら自身の組込み範囲を含んで生じると仮定することができます。 'width'プロパティの値が、'auto'である場合、組込み幅は要素の幅として使用されます。 'auto'以外の値がスタイル・シート中で指定される場合、この値が使用され、交換された要素は、指定値に応じてサイズ変更されます(サイズ変更する方法はメディア・タイプに依存します)。 'height'プロパティは同様の方法の中で使用されます。

交換された要素は、ブロックレベルか、インラインのどちらか一方であることができます。

4.4 行の高さ

全ての要素は、原則的に、テキストに属する行の全体の高さを与える'line-height'プロパティを持っています。間隔は、行の高さに達するためにテキスト行の上下に加えられます。例えば、テキストが、12ptの高さで、'line-height'が'14pt'にセットされた場合、行の上に1ptと、下に1ptの、2ptの余分な間隔が加えられます。空の要素は、内容を備えた要素同様に、これらの計算結果に影響を及ぼします。

フォント・サイズと'line-height'の間の差は、leadingと呼ばれます。半分のleadingは、half-leadingと呼ばれます。構成後、各行は、長方形のline-boxを形成します。

テキストの行が、異なる'line-height'値を備えた部分を含んでいる(行上にインライン要素がある)場合、それらの部分の個々は、それ自身のhalf-leadingを上下に持ちます。 line-boxの高さは、最も高い部分のトップから、最も低い部分の底になります。トップと底は、最も背の高い要素と必ずしも一致しませんので注意して下さい。それは、要素が、 'vertical-align'プロパティで、垂直の位置を決めることができるからです。段落を形成するために、各line-boxは、前の行の下に直接積み重ねられます。

交換されないインライン要素より高いか低い、任意のpaddingか、border(境界)か、margin(余白)は、行の高さに影響しないことに注意して下さい。言いかえれば:'line-height'が、paddingかborder(境界)を決めるには小さすぎる場合、それは他の行上のテキストに重なります。

交換された要素のトップが、最も背の高いテキストの部分より高くある場合、あるいは、底が最も低いテキストの部分より低くある場合、行上の交換された要素(例：イメージ)は、より大きなline-boxを作る事ができます (つまり、全てのpadding、border(境界)、margin(余白)を含みます)。

通常の場合、段落全体にわたる'line-height'の値が１つだけで、背の高いイメージを含まない時は、上述の定義は、連続したベースラインの行が、正確に別々の'line-height'であることを保証します。このことは、異なるフォントでテキストの列が整列しなければならない(例えばテーブル内で)時、重要になります。

このことが、隣接した２行のテキストが、お互いを重ねる事を排除しない事に注意して下さい。 'line-height'は、liadingがマイナス値である場合、最も高いテキストより小さい事もあり得ます。テキストが子孫を含まないことも知っておくと有用です(例えば、それが大文字だけを含んでいるので)。したがって、行は、より詰め合わせて置くことができます。

4.5 キャンバス

キャンバスは、ドキュメントが描画されるUAの図画表面の一部です。ドキュメントの構造の要素はキャンバスに相当しません。また、ドキュメントを構成する場合、これは2つの問題を提出します:

どこから、キャンパスの範囲が、セットされなければならないのか？
ドキュメントが全体のキャンパスをカバーしない場合、どのように、この領域の描画をすべきであるか？

１番目の質問への合理的な答えは、最初のキャンパスの幅が、ウィンドーのサイズに基づくですが、 CSS1では、この問題を決めることをUAのために保留します。さらに、ウィンドーのサイズが変更された時、キャンパスの幅を変更することを予測する事は、道理にかなった事ですが、CSS1の適用範囲外です。

HTMLの拡張は、２番目の質問のために先例を作りました:'BODY'要素上の属性は、全体のキャンバスの背景をセットしています。デザイナーの期待をサポートする為に、CSS1は、キャンバス背景を見つける特別のルールを導入しています:

'HTML'要素の'background'値が、'transparent'(透明)と異なっている場合、それを使用し、その他の場合は、BODY'要素の'background'値を使用します。もし生じる値が'transparent'なら、描画は確定されません。

この規則は、次のものを許可します:

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

上記の例において、キャンバスは、"marble.png"で覆われます。 'BODY'要素の背景(それは完全にキャンバスをカバーするか、カバーしないかもしれない)は、赤くなります。

キャンバスをアドレスする他の手段が利用可能になるまで、キャンバスのプロパティが、'BODY'要素上でセットされることを推奨します。

4.6 'BR'要素

現在のCSS1プロパティおよび値は、'BR'要素の振る舞いについて記述することができません。 HTMLでは、'BR'要素が、言葉の間の行区切を指定します。要するに、要素は、行区切と取り替えられます。 CSSの将来のバージョンは追加変更された内容を扱うかもしれませんが、 CSS1ベースの構成を行うものは、'BR'を特に注意して扱わなければなりません。

5 CSS1プロパティ

スタイル・シートは、スタイルのプロパティに値を割り当てることにより、ドキュメントのプレゼンテーションに影響を及ぼします。このセクションは、定義されたスタイルのプロパティ、および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>)は、対応するプロパティの中で説明してあります。

これ以外のクォート(引用符)なしの言葉は、文字通りに出なければならないキーワードです。さらに、スラッシュ(/)およびコンマ(,)は、文字通りに出なければなりません。

並置のいくつかのものは、それらがすべて与えられた順に、生じなければならないことを意味しています。棒(|)は代案を分離しています:それらのうちの1つは生じなければなりません。複縦線(A || B)は、AあるいはBか、両方のいずれかが任意の順に、生じなければならないことを意味しています。ブラケット([ ])はグループ分けのためにあります。並置は、複縦線より強く、複縦線は棒より強い存在です。したがって、'a b | c || d e'は、"[ a b ] | [ c || [ d e ]]"に等価です。

全てのタイプか、キーワードか、ブラケット([ ])グループは、次の修飾語句の１つを備えて伴い得ます。：

アスタリスク(*)は、先行するタイプか、単語か、グループが、0あるいはより多く繰り返されることを示しています。
プラス(+)は、先行するタイプか、単語か、グループが、1回以上繰り返されることを示しています。
疑問符(?)は、先行するタイプか、単語か、グループが、任意であることを示しています。
カール状の括弧({A,B})内の一組の数は、先行するタイプか、単語か、グループが、最低A回および最大B回、繰り返されることを示しています。

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の各々に提示されると仮定して)から、生じた結果を保証して一致させます。

ユーザー･エージェント(User Agent)は、 UAが知っているすべてのフォントの、CSS1プロパティに関連するデータ・ベースを作ります(あるいは接続)。 UAは、フォントを知る為に、データベースを、ローカルにインストールするか、ウェブから前もってダウンロードします。ぴったり同じプロパティを備えたフォントがある場合、それらのうちの１つは無視されます。
定められた要素、およびその要素中の各文字符号については、 UAが、その要素に適用可能なフォントプロパティを組み立てます。プロパティの完全なセットを使用して、 UAは、一時的なフォント・ファミリーを選ぶために'font-family'プロパティを使用します。残りのプロパティは、それぞれのプロパティで記述された、対応する基準によるファミリーに対してテストされます。すべての残ったプロパティに対応するものがある場合、それは、定められた要素のために一致するフォント･フェイスです。
ステップ2によって処理されている'font-family'内のフォント･フェイスと一致せず、フォント・セットの中に次の代案の'font-family'がある場合、次の代案の'font-family'に対して、ステップ2を繰り返します。
一致するフォント･フェイスがあるが、それが、現在の文字符号用のグリフを含まず、フォント・セットの中に次の代案の'font-family'がある場合、次の代案の'font-family'に対して、ステップ2を繰り返します。フォントおよび文字符号づけの説明に関しては、付録C を参照してください。
ステップ2で選択されたファミリー内にフォントがない場合、 UAに含まれるデフォルトの'font-family'(デフォルト･フォントの範囲内で得ることができるベストマッチ)を使用して、ステップ2を繰り返します。

(上記のアルゴリズムは、各文字符号のCSS1プロパティを再訪しなければならないことを回避するために、最適化することができます。)

上記の(2)から、プロパティごとに一致する規則は、以下のとおりです:

'font-style' は、最初に試みられます。 UAのフォント･データベース内に、CSS1のキーワード 'italic'《優先》か、 'oblique'(斜め) に対するラベル付けのどちらか一方のフェイスがある場合、 'italic'(イタリック体)の意は満たされます。そうでなければ、値が正確に一致し得るか、font-styleしそこないます。
'font-variant' は、次に試みられます。 'normal'(標準)は、'small-caps'としてラベル付けられていないフォントと一致します。； 'small-caps'の一致は、(1)'small-caps'としてラベル付けされているフォント。 (2)スモールキャピタルが合成されるフォント。あるいは、(3)全ての小文字の文字が、大文字の文字によって置き換えられたフォント。スモールキャピタルのフォントは、電子的に標準のフォントから大文字を測ることで、合成され得ます。
'font-weight' は次いて一致します。それは失敗しません。(下記の'font-weight'を参照。)
'font-size' は、 UA依存の許容誤差余地の範囲内で一致し得ます。 (一般的に、スケーブラフォント用のサイズは、最も接したすべてのピクセルに丸くされ、同時に、ビットマップ化されたフォントのための許容誤差は、20%と大きくなります。) 極端な計算結果、例えば、他のプロパティ中の'em'値に関しては、使用された'font-size'値に基づき、指定された'font-size'値ではありません。

5.2.2 'font-family'

値： [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
初期値： UAが明示
適用： すべての要素
継承： yes
パーセンテージ値： なし

値は、フォント名および(または)、総称的(generic)なファミリー名の優先順のリストです。多くの他のCSS1プロパティと異なり、値はそれらが代案であることを示すためにコンマによって分離されます:

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

2つのタイプのリスト値は次のとおりです:

<family-name>

フォント・ファミリーの名前の種類。最後の例において、"gill"および"helvetica"は、フォント・ファミリーです。

<generic-family>

上記の例において、最後の値は、総称的(generic)なファミリー名です。次の総称的なファミリーが定義されます:

'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
パーセンテージ値： なし

'font-style'プロパティは、フォント・ファミリー内の normal"標準"(時々"roman ロマン体"や"upright 直立体"と呼ばれた)と italic"イタリック体"と、oblique"斜体"のフェイスのどれかを選択します。

'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'内の強調されたテキストは、標準のフェイス(normal)で現われます。

5.2.4 'font-variant'

値： normal | small-caps
初期値： normal
適用： すべての要素
継承： yes
パーセンテージ値： なし

フォント・ファミリー内の別のタイプの変化はスモールキャピタルです。スモールキャピタルフォントでは、小文字の文字が、大文字の文字と類似して見えますが、より小さいサイズで、わずかに異なるプロポーションを備えています。 'font-variant'プロパティは、そのフォントを選択します。

'normal'の値は、スモールキャピタルフォントでないフォントを選択します。 'small-caps'は、スモールキャピタルフォントを選択します。スモールキャピタルフォントが、標準フォントを利用して、小文字の文字を大文字の文字の縮尺で作ったものと交換することにより作成することは、 CSS1において容認できます(しかし、要求ではない)。最後の好ましくない手段としては、大文字の文字を、置換したものとしてスモールキャピタルフォントの為に使用することです。

次の例は、傾斜したスモールキャピタルで強調された言葉を含んだ、スモールキャピタルになって'H3'要素に帰着します:

<STYLE TYPE="text/css">
  H3 { font-variant: small-caps }
  EM { font-style: oblique } 
</STYLE>

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

(翻訳注：原文の例に、必要と思われる加筆を行いました。）

オールドスタイルの数字、スモールキャピタルの数字、簡約あるいは拡張文字を備えたフォント等のように、フォント・ファミリーの内に、その他の変形があるかもしれません。 CSS1は、それらを選択するプロパティを持っていません。

CSS1 core: このプロパティがテキストを大文字に変えるということにおいては、同様の動機として'text-transform'が当てはまります。

5.2.5 'font-weight'

値： normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初期値： normal
適用： すべての要素
継承： yes
パーセンテージ値： なし

'font-weight'プロパティは、フォントの重み(翻訳注:太さ)を選択します。 '100'から'900'の値は、指図された順番を構成し、各数は、その前のものと少なくとも同じくらい暗い重みを示します。 'normal'キーワードは、'400'と同義で、'bold'は、'700'と同義です。 'normal'以外のキーワードと'bold'が、フォント名、および 9個のリストに対してこれらにより選択された数字で表した比率と、よく混同される事があることを示しました。

P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */

'bolder'と'lighter'の値は、親から継承した重みに比べて、あるフォントの重みを選択します:

STRONG { font-weight: bolder }

子供要素は、キーワード値ではなく結果として生じる重みを継承します。

フォント(フォント・データ)は、一般的に１つ以上のプロパティ(値はフォントの"weight"を描写した名前です)を持ちます。これらの"weight"の名前に、容認される一般な意味はありません。これらの主要な役割は、個々のフォント･ファミリー内の異なる暗さのフェイスを区別することです。フォント・ファミリーをまたがった使用法は、全く異なります；例えば、ボールド(太字)体として、あなたが考えるかもしれないフォントは、 Regular, Roman, Book, Medium, Semi- または DemiBold, Bold, または Black があり得え、黒くする方法に依存し得ます(フォントの"normal"フェイスは、デザインの範囲内です)。名前の使用方に標準が無いので、CSS1中の "weight"プロパティの値は、値の'400' (または 'normal')が、そのファミリーに対する"normal"のテキストのフェイスに一致する状態の数字で表した比率で与えます。また、"weight"の名前は、フェイスが一般的にBook, Regular, Roman, Normal または時々 Medium であるということと関係していました。

数の重み値へのファミリー内の別の重みの関連は、そのファミリーの範囲内での暗さの順序を、単に保存するように意図されています。しかしながら、次の発見を助けるものは、割り当てが一般的な場合にどう終わるか示します:

フォント・ファミリーが、9つの値(例：同様にOpenType)に対した数の比率を既に使用していた場合、フォントの重みは、直接マップされ得ます。
Medium とラベル付けされているフェイスと、 Book, Regular, Roman または Normal, とラベル付けされているもののうちの１つの、両方ある場合、その場合は、Mediumは、通常'500'に割り当てられます。
"Bold"にラベル付けされたフォントは、多くの場合、重み値'700'に一致します。
ファミリー内に9個の重みよりも少ない重みしかない場合、 "穴"を埋める為のデフォルトのアルゴリズムは以下のとおりです。 '500'が割り当てられていない場合、それは'400'と同じフォントを割り当てます。 '600','700','800'あるいは'900'のうちの値のどれかが、割り当てられずに残っている場合、次により暗い割り当てられたキーワードと同様にある、あるいは、次のより明るいものとは異なるものがあれば、同じフェイスへ割り当てられます。 '300','200'あるいは'100'のうちのどれかが割り当てられずに残っている場合、次のより明るいものがあるか、次に暗いものとは異なるものがあれば、それに割り当てられます。

次の2例はプロセスを例証しています。 'Example1'ファミリー中の4つの重み(最も明るいものから最も暗いものまで)を仮定します： Regular, Medium, Bold, Heavy。また、'Example2'ファミリー中の6つの重みを仮定します： Book, Medium, Bold, Heavy, Black, ExtraBlack. 。２番目の例において、どうして、 "Example2 ExtraBlack"を何もないとする明確な否定にされたのか注意して下さい。

Available faces       |  Assignments  |  Filling the holes
----------------------+---------------+-------------------
"Example1 Regular"    |  400          |  100, 200, 300
"Example1 Medium"     |  500          |
"Example1 Bold"       |  700          |  600
"Example1 Heavy"      |  800          |  900

Available faces       |  Assignments  |  Filling the holes
----------------------+---------------+-------------------
"Example2 Book"       |  400          |  100, 200, 300
"Example2 Medium"     |  500          |
"Example2 Bold"       |  700          |  600      
"Example2 Heavy"      |  800          |
"Example2 Black"      |  900          |
"Example2 ExtraBlack" |  (none)       |

翻訳注：Available faces=利用可能なフェイス、Assignments=割り当て、Filling the holes=穴埋め

相対的なキーワードの'bolder'と'lighter'の意図は、ファミリーの範囲内で、暗くするか、明るくするかです。これは、ファミリーが、全ての記号的な重みの値と提携したフェイスを持ち得ないためでもあり、 'bolder'に一致したものは、利用できるクライアント上のファミリー内で、次により暗いフェイスになり、 'lighter'に一致したものは、ファミリー内で、次により明るいフェイスになります。明確にすると、相対的なキーワード 'bolder' と 'lighter' の意味は、以下のとおりです:

'bolder'は、継承したものより暗いフォントに割り当てられる次に重い重みを選択します。そのような重みがない場合、それは、継承した値が'900'でない限り、単に次に暗い数の値に帰着し(フォントは変更されない)、 '900'の場合は、生じる重みはさらに'900'です。
'lighter'は、'bolder'と類似しますが、反対の方向で働きます: そのようなフォントが無いなら、それは、継承したものから、異なるフォントを含む、次に明るいキーワードを選び、ある場合は、次のより明るい数の値(フォントを変更しない)を選択します。

'font-weight'値の各々のために、より暗いフェイスがあるという保証はありません；例えば、いくつかのフォントは、normal と bold　のフェイスのみしか持ち得ません。これ以外のものは、９個の異なるフェイスの重みを持ち得ます。 (翻訳注：原文では８個となっていますが、原著者に問合せたところ９個が正しい) これらは、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は、フォント・サイズのテーブルを計算する時の評価の中に、フォントの特質および有効性を採用すべきです。テーブルは、1つのフォント・ファミリーと異なる別のものであり得ます。
<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の提案された比例因数が使用される場合、最後の3つの宣言は同一です。

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 }

２番目の規定(翻訳注:上記例の２番目)では、フォント・サイズ・パーセンテージ値('80%')が、親要素のフォント・サイズを参照します。３番目の規定(翻訳注:上記例の３番目)では、行の高さのパーセンテージ(翻訳注：/110%)が、要素それ自身のフォント・サイズを参照します。

上記の１番目の3つの規定中で、'font-style', 'font-variant' と'font-weight'は、明示的に記載されません、それは、それらが、すべて初期の値('normal')への３つのセットであることを意味します。４番目の規定(翻訳注:上記例の４番目)では、 'font-weight' を 'bold' に、'font-style' を 'italic' にセットし、暗黙的に 'font-variant' を 'normal' にセットします。

第5の規定(翻訳注:上記例の５番目)では、 'font-variant' ('small-caps')、 'font-size' (親のフォントの120%)、 'line-height' (フォント･サイズに合わせて120%)、および、 'font-family' ('fantasy')にセットします。キーワード'normal'が、残りの2つのプロパティ('font-style' と 'font-weight')に当てはまることになります。

5.3 色および背景のプロパティ

これらのプロパティは、要素の色(よくforeground･前景色と呼ばれた)および背景(つまり内容が与えられる表面)について記述します。その一つは、背景色および(または)背景イメージをセットすることができます。イメージの位置は、どのようにどう繰り返すか、キャンパスに相対的に固定するか、またはスクロールされるか、設定する事が出来ます。

'color'プロパティは、普通、継承します。背景プロパティは継承しませんが、 'background-color'に対する'transparent'(透明)の値が初期値なので、デフォルトによって、親要素の背景は映えます。

5.3.1 'color'

値： <color>
初期値： UA specific (翻訳注：UAが明示)
適用： すべての要素
継承： yes
パーセンテージ値： なし

このプロパティは、要素のテキスト色について記述します(よくforeground･前景色と呼ばれた)。赤を指定する異なる方法があります:

EM { color: red }              /* 普通の語法 */
EM { color: rgb(255,0,0) }     /* RGB 範囲 0-255 */

可能な色の値の記述に関しては、セクション6.3を参照してください。

5.3.2 'background-color'

値： <color> | transparent
初期値： transparent
適用： すべての要素
継承： no
パーセンテージ値： なし

このプロパティは、要素の背景色をセットします。

H1 { background-color: #F00 }

5.3.3 'background-image'

値： <url> | none
初期値： none
適用： すべての要素
継承： no
パーセンテージ値： なし

このプロパティは、要素の背景イメージをセットします。背景イメージをセットする場合、さらにイメージが利用不可能だった場合の使用される背景色をセットするべきです。イメージが利用可能な場合、それは背景色の上に置かれます。

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

5.3.4 'background-repeat'

値： repeat | repeat-x | repeat-y | no-repeat
初期値： repeat
適用： すべての要素
継承： no
パーセンテージ値： なし

背景イメージが指定される場合、'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
パーセンテージ値： なし

背景イメージが指定される場合、'background-attachment'の値は、背景イメージが、キャンバスに対して固定されるか、内容と一緒にスクロールするか決めます。

BODY { 
  background: red url(pendant.gif);
  background-repeat: repeat-y;
  background-attachment: fixed;
}

CSS1 core: UAは、'fixed'を'scroll'として扱うかもしれません。しかしながら、著者によって、'fixed'をサポートするブラウザにのみイメージを提供する方法が無いので、少なくとも HTML と BODY 要素では、'fixed' を正しく解釈する事を推奨します。 (セクション7 を参照)

5.3.6 'background-position'

値： [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
初期値： 0% 0%
適用； ブロックレベルと交換された要素
継承： no
パーセンテージ値： 要素それ自身のサイズを参照

背景イメージが指定された場合、'background-position'の値は、その初めの位置を指定します。

値の組合せ'0% 0%'で、イメージの上部の左コーナーは、要素の内容(つまりpadding、border(境界)かmargin(余白)を囲む箱ではない)を囲む箱の上部の左隅に置かれます。値の組合せ'100% 100%'は、要素の一番低い右隅において、イメージの一番低い右隅を置きます。値の組合せ'14% 84%'で、14%横で84%下の地点、イメージが、要素の14％の横で、84％下の地点に置かれます。

値の組合せ'2cm 2cm'で、イメージの上部の左隅は、右に2cm、要素の上部の左隅より下に2cmに置かれます。

1つのパーセンテージあるいは長さの値だけが与えられる場合、それは水平の位置のみをセットし、垂直の位置は50%になります。 2つの値が与えられる場合、水平の位置が最初に来ます。長さとパーセンテージの値の組合せ(例えば'50% 2cm')は、許可されます。マイナスの位置は、許可されます。

さらに背景イメージの位置を示すためにキーワード値を使用することができます。キーワードは、パーセンテージ値あるいは長さの値と結合することができません。キーワードおよびそれらの解釈の可能な組合せは以下のとおりです:

'top left' と 'left top' 両方は、'0% 0%'と同じ事を意味します。
'top', 'top center' と 'center top' は、'50% 0%' と同じ事を意味します。
'right top' と 'top right' は、'100% 0%' と同じ事を意味します。
'left', 'left center' と 'center left' は、'0% 50%' と同じ事を意味します。
'center' と 'center center' は、'50% 50%' と同じ事を意味します。
'right', 'right center' と 'center right' は、'100% 50%' と同じ事を意味します。
'bottom left' と 'left bottom' は、'0% 100%' と同じ事を意味します。
'bottom', 'bottom center' と 'center bottom' は、'50% 100%' と同じ事を意味します。
'bottom right' と 'right bottom' は、'100% 100%' と同じ事を意味します。

(翻訳注：キーワードは、キーワードにより水平と垂直どちらを意味するかが決まっている。 'center'は両方で使えるが、'top''bottom'は垂直位置で、 'left''right'は水平位置。その為、前後が入れ替わっても同じ結果になる。)

例:

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% */

背景イメージが、キャンバス(上記の'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 }

'background'プロパティは、常にすべての個々の背景プロパティを設定します。上記の例の１番目の規定では、'background-color'に対する値だけが与えられていますが、他の個々のプロパティは、それらの初期の値にセットされます。２番目の規定では、個々のプロパティがすべて指定されました。

5.4 テキストプロパティ

5.4.1 'word-spacing' 単語間隔

値： normal | <length>
初期値： normal
適用： すべての要素
継承： yes
パーセンテージ値： なし

長さの構成単位は、単語間のデフォルトの間隔への付加を示します。値はマイナスであることも出来ますが、実行時の特殊な制限があるかもしれません。 UAが、正確な間隔アルゴリズムを選択することは自由です。単語間隔は、さらに文字列の整列('text-align'プロパティの値)によって影響を及ぼされ得ます。

H1 { word-spacing: 1em }

この時、'H1'要素中の各単語間の単語間隔は、'1em'によって拡大されます。

CSS1 core: UAは、'normal'を'word-spacing'の任意の値として解釈し得ます。 (セクション7を参照)

5.4.2 'letter-spacing' 文字間隔

値： normal | <length>
初期値： normal
適用： すべての要素
継承： yes
パーセンテージ値： なし

長さの構成単位は、文字間のデフォルトの間隔への付加を示します。値はマイナスであることも出来ますが、実行時の特殊な制限があるかもしれません。 UAが、正確な間隔アルゴリズムを選択することは自由です。文字間隔は、さらに文字列の整列('text-align'プロパティの値)によって影響を及ぼされ得ます。

BLOCKQUOTE { letter-spacing: 0.1em }

この時、'BLOCKQUOTE'要素中の各文字符号間の文字間隔は、'0.1em'によって拡大されます。

'normal'の値で、UAは、テキストを整列するために文字間の間隔を変更し得ます。これは、'letter-spacing'が、<length>の値に明示的にセットされる場合は起こりません:

BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }

結果として生じた2つの文字間の間隔が、デフォルトの間隔と同じでない場合、UAは合字(ligature)を使用してはなりません。

CSS1 core: UAは、'letter-spacing'の任意の値を、'normal'として解釈し得ます。 (セクション7を参照)

5.4.3 'text-decoration' テキスト装飾

値： none | [ underline || overline || line-through || blink ]
初期値： none
適用： すべての要素
継承： いいえ、だが、下の説明を参照
パーセンテージ値： なし

このプロパティは、要素のテキストに加えられる装飾について記述します。要素がテキストを持っていない(例えば、HTMLの'IMG'要素)か、空の要素(例えば、'<EM></EM>')である場合、このプロパティは効果がありません。 'blink'の値は、テキストを点滅させます。

テキストの装飾に対して必要とされる色は、'color'プロパティの値から得るべきです。

このプロパティは継承されませんが、要素は、要素の親と一致するべきです。例えば、要素が下線を施された場合、下線は子供要素に及ぶべきです。下線の色は、子孫の要素が異なる'color'値を持っていたとしても、同じままで存続します。

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

上記の例は、すべてのリンク(つまり'HREF'属性を備えたすべての'A'要素)のテキストに下線'underline'を施します。

UAは、キーワード'blink'を認識しなければなりませんが、点滅'blink'の効果をサポートすることは要求されません。

5.4.4 'vertical-align' 垂直のアレンジ

プロパティは、要素の垂直の配置に作用します。キーワードのある傾向は、親要素と関連しています。:

'baseline' ベースライン: 親要素のベースラインに対して、要素のベースライン(要素がベースラインを持っていない場合は底)を整列します。
'middle' 中間: 親のx-heightの半分をプラスしたベースラインに対して、要素(一般的にイメージ)の垂直の中間点を整列します。
'sub' 下付き: 下に添える文字[記号，数字] (翻訳注：サンプル:H2SO4：プラウザが認識すればうまく表示されます)
'super' 上付き: 右上に書く上付き文字[記号，数字] (翻訳注：サンプル:a3×bｎ：プラウザが認識すればうまく表示されます)
'text-top': 親要素のフォントのトップに対して、要素のトップを整列します。
'text-bottom': 親要素の底に対して、要素の底を整列します。

プロパティの別の傾向では、要素は次の部分である構成された行に関連します。

'top': 行上の最も背の高い要素に対して、要素のトップを整列します。
'bottom': 行上の最も低い要素に対して、要素の底を整列します。

'top'および'bottom'の整列を使用すると、解決不能の状況が、要素の依存性がループになるところで発生する事があります。

パーセンテージの値は、要素それ自身の'line-height'プロパティ値を参照します。要素のベースライン(ベースラインを持っていない場合は底)を、親要素のベースラインの上方に指定された量持ち上げます。マイナスの値は可能です。例えば、'-100%'の値は、要素のベースラインが、次の行のベースライン上で終了するように、要素を下げます。これは、ベースラインを持っていない要素の垂直位置(文字の部分で使用されるイメージのようなもの) の正確な管理を可能にします。

CSSの将来のバージョンが、このプロパティの値として、 <length>を可能にすることが期待されます。

5.4.5 'text-transform'

値： capitalize | uppercase | lowercase | none
初期値： none
適用： すべての要素
継承： yes
パーセンテージ値： なし

'capitalize': 各単語の最初の文字符号を大文字にします。
'uppercase': 要素のすべての文字を大文字にします。
'lowercase': 要素のすべての文字を小文字にします。
'none': 継承した値の効力を消します。

各状態の事実上の変換は、人間の語法に依存します。要素の語法を見つける方法に関しては、 [4]を参照してください。

H1 { text-transform: uppercase }

上記の例は、大文字のテキストの状態で'H1'要素を置きます。

CSS1 core: UAは、文字符号に対して Latin-1(翻訳注：一般的にWebで使われる文字符号化方法(ラテン-1)、ISO-8859-1という名でも参照される、西欧言語の大半に使用できる)の目録からのものでない場合、および、語法における要素に対して変換がユニコード[8]の状態転換テーブルによって指定されたものと異なる場合、 'text-transform'を無視し得ます(つまり'none'とみなす)。

5.4.6 'text-align'

値： left | right | center | justify
初期値： UA specific (翻訳注:UAおよび人間の語法に依存したもの)
適用： block-level elements
継承： yes
パーセンテージ値： なし

このプロパティは、テキストが要素内にどう整列するのか記述します。実際の文字列整列のアルゴリズムは、UAおよび人間の語法に依存したものを使用します。

例:

DIV.center { text-align: center }

'text-align'が継承されるので、 'CLASS=center'を用いた'DIV'要素内部のすべてのブロックレベル要素は、中央揃えになります。整列は、キャンバスではなく要素の幅に相対することに注意してください。 'justify'(翻訳注：文章･行などの両端を揃える)がサポートされていない場合、 UAは代替品を提供します。一般的に、これは西欧言語(western)では'left'です。

CSS1 core: UAは、 'justify' を、要素のデフォルトが　左から右(left-to-right)か、右から左か(right-to-left)かのそれぞれの記述方向に依存して、 'left' または 'right' とみなし得ます。

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
パーセンテージ値： 要素自身のフォント･サイズに比例する

プロパティは、隣接した2行のベースラインの間隔をセットします。

数の値が指定される場合、行の高さは、数の値を掛けた現在の要素のフォント･サイズによって与えられます。これは、継承する方法で、パーセンテージ値とは異なります：数の値が指定される時、子供要素は、結果として生じた値(それはパーセンテージおよび他の構成単位の場合)ではなく、それ自身の因数を継承します。

マイナスの値は許可されません。

下記の例における3つの規定は、同様の結果として生じた行の高さを持っています:

DIV { line-height: 1.2; font-size: 10pt }     /* 数詞 */
DIV { line-height: 1.2em; font-size: 10pt }   /* 長さ */
DIV { line-height: 120%; font-size: 10pt }    /* パーセンテージ */

'normal'の値は、要素のフォントに対する穏当な値に'line-height'をセットします。 UAが、1.0～1.2の幅の数に'normal'値をセットすることが提案されます。

'line-height'がブロックレベル要素のフォーマットにどう影響を及ぼすかについての記述に関しては、セクション4.4 を参照してください。

5.5 ボックス･プロパティ

ボックス･プロパティは、サイズ、要素を表わす箱の周囲および位置を、セットします。ボックス･プロパティを使用する方法上の例に関しては、フォーマット・モデル(セクション4)を参照してください。

マージン･プロパティは、要素のmargin(余白)をセットします。 'margin'プロパティは、4つの面(上下左右)すべてに対して、 margin(余白)をセットし、同時に、他のマージン･プロパティが、それらのそれぞれの面のみをセットします。

パディング･プロパティは、border(境界)と内容(例えば、テキストまたはイメージ)の間に、どれだけの間隔を挿入するべきであるか記述します。 'padding'プロパティは、4つの面(上下左右)すべてに対して、 padding(パディング)をセットし、同時に、他のパディング･プロパティが、それらのそれぞれの面のみをセットします。

ボーダー･プロパティは、要素のborder(境界)をセットします。各要素は、各面の幅と色とスタイルで定義された各面上の4つの境界を持ちます。

'width'および'height'プロパティは、箱のサイズをセットします。また、'float'および'clear'プロパティは、要素の位置を変更することができます。

5.5.1 'margin-top'

値： <length> | <percentage> | auto
初期値： 0
適用： すべての要素
継承： no
パーセンテージ値： 最も近いブロックレベルの先祖の幅を参照

このプロパティは、要素のトップのmargin(余白)をセットします:

H1 { margin-top: 2em }

マイナスの値は許可されますが、実行時の特殊な制限があるかもしれません。

5.5.2 'margin-right'

値： <length> | <percentage> | auto
初期値： 0
適用： すべての要素
継承： no
パーセンテージ値： 最も近いブロックレベルの先祖の幅を参照

このプロパティは、要素の右のmargin(余白)をセットします:

H1 { margin-right: 12.3% }

マイナスの値は許可されますが、実行時の特殊な制限があるかもしれません。

5.5.3 'margin-bottom'

値： <length> | <percentage> | auto
初期値： 0
適用： すべての要素
継承： no
パーセンテージ値： 最も近いブロックレベルの先祖の幅を参照

このプロパティは、要素の底のmargin(余白)をセットします:

H1 { margin-bottom: 3px }

マイナスの値は許可されますが、実行時の特殊な制限があるかもしれません。

5.5.4 'margin-left'

値： <length> | <percentage> | auto
初期値： 0
適用： すべての要素
継承： no
パーセンテージ値： 最も近いブロックレベルの先祖の幅を参照

このプロパティは、要素の左のmargin(余白)をセットします:

H1 { margin-left: 2em }

マイナスの値は許可されますが、実行時の特殊な制限があるかもしれません。

5.5.5 'margin'

値： [ <length> | <percentage> | auto ]{1,4}
初期値： 簡略表記のプロパティなので定義しません。
適用： すべての要素
継承： no
パーセンテージ値： 最も近いブロックレベルの先祖の幅を参照

'margin'プロパティは、スタイル・シート中の同じ場所で、 'margin-top', 'margin-right', 'margin-bottom' と 'margin-left' を設定するための簡略表記のプロパティです。

4つの長さの値が指定される場合、それらは、トップ(top)、右(right)、底(bottom)および左(left)へとそれぞれ当てはまります。 1つの値だけがある場合、それはすべての面に当てはまり、２つまたは３つの値がある場合は、欠けている値は対辺から引用されます。

BODY { margin: 2em } /* すべてのマージンを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;        /* 対辺(right)からコピーされた */
}

マイナスのmargin値は許可されますが、実行時の特殊な制限があるかもしれません。

5.5.6 'padding-top'

値： <length> | <percentage>
初期値： 0
適用： すべての要素
継承： no
パーセンテージ値： 最も近いブロックレベルの先祖の幅を参照

このプロパティは、要素のトップのpadding(パディング)をセットします。

BLOCKQUOTE { padding-top: 0.3em }

パディング値は、マイナスにはできません。

5.5.7 'padding-right'

値： <length> | <percentage>
初期値： 0
適用： すべての要素
継承： no
パーセンテージ値： 最も近いブロックレベルの先祖の幅を参照

このプロパティは、要素の右側padding(パディング)をセットします。

BLOCKQUOTE { padding-right: 10px }

パディング値は、マイナスにはできません。

5.5.8 'padding-bottom'

値： <length> | <percentage>
初期値： 0
適用： すべての要素
継承： no
パーセンテージ値： 最も近いブロックレベルの先祖の幅を参照

このプロパティは、要素の底のpadding(パディング)をセットします。

BLOCKQUOTE { padding-bottom: 2em }

パディング値は、マイナスにはできません。

5.5.9 'padding-left'

値： <length> | <percentage>
初期値： 0
適用： すべての要素
継承： no
パーセンテージ値： 最も近いブロックレベルの先祖の幅を参照

このプロパティは、要素の左側padding(パディング)をセットします。

BLOCKQUOTE { padding-left: 20% }

パディング値は、マイナスにはできません。

5.5.10 'padding'

値： [ <length> | <percentage> ]{1,4}
初期値： 簡略表記のプロパティなので定義しません。
適用： すべての要素
継承： no
パーセンテージ値： 最も近いブロックレベルの先祖の幅を参照

'padding'プロパティは、スタイル・シート中の同じ場所で、 'padding-top', 'padding-right', 'padding-bottom' と 'padding-left' を設定するための簡略表記のプロパティです。

4つの値が指定される場合、それらは、トップ(top)、右(right)、底(bottom)および左(left)へとそれぞれ当てはまります。 1つの値だけがある場合、それはすべての面に当てはまり、２つまたは３つの値がある場合は、欠けている値は対辺から引用されます。

パディング･エリアの表面は、'background'プロパティで飾られます:

H1 { 
  background: white; 
  padding: 1em 2em;
}

上記の例は、垂直('padding-top' と 'padding-bottom')に'1em'、および水平('padding-right' と 'padding-left')に'2em'をセットします。 'em'の構成単位は、要素のフォント･サイズに比例します：'1em'は、使用中のフォントのサイズと等しい。

パディング値は、マイナスにはできません。

5.5.11 'border-top-width'

値： thin | medium | thick | <length>
初期値： 'medium'
適用： すべての要素
継承： no
パーセンテージ値： なし

このプロパティは、要素のトップのborder(境界)の幅をセットします。キーワードの値の幅は、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
パーセンテージ値： なし

このプロパティは、要素の右側のborder(境界)の幅をセットしますが、その他の点で、これは'border-top-width'と等価です。

5.5.13 'border-bottom-width'

値： thin | medium | thick | <length>
初期値： 'medium'
適用： すべての要素
継承： no
パーセンテージ値： なし

このプロパティは、要素の底のborder(境界)の幅をセットしますが、その他の点で、これは'border-top-width'と等価です。

5.5.14 'border-left-width'

値： thin | medium | thick | <length>
初期値： 'medium'
適用： すべての要素
継承： no
パーセンテージ値： なし

このプロパティは、要素の左のborder(境界)の幅をセットしますが、その他の点で、これは'border-top-width'と等価です。

5.5.15 'border-width'

値： [thin | medium | thick | <length>]{1,4}
初期値： 簡略表記のプロパティなので定義しません。
適用： すべての要素
継承： no
パーセンテージ値： なし

このプロパティは、スタイル・シート中の同じ場所で、 'border-top-width', 'border-right-width', 'border-bottom-width' と 'border-left-width' を設定するための簡略表記のプロパティです。

次の説明の場合は、1～4つの値である事が出来ます:

1つの値:4つの境界幅はすべてその値にセットされます。
2つの値:トップ(top)と底(bottom)の幅は、１番目の値でセットされ、右(right)および左(left)は、２番目の値でセットされます。
3つの値:トップ(top)は1番目にセットされ、右(right)と左(left)は２番目でセットされ、底(bottom)は３番目でセットされます。
4つの値:それぞれ、トップ(top)、右(right)、底(bottom)および左(left)になります。

下記の例において、コメントは、top, right, bottom, 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 thin } /* thin thick medium thin */

境界幅は、マイナスにはできません。

5.5.16 'border-color'

値： <color>{1,4}
初期値： 'color'プロパティの値
適用： すべての要素
継承： no
パーセンテージ値： なし

'border-color'プロパティは、4つのborder(境界)の色をセットします。 'border-color'は1～4つの値を持つことができ、値は、'border-width'に対して異なる面の上にセットされます。

色の値が指定されない場合、要素それ自身の'color'プロパティの値が、その部分に採用されます:

P { 
  color: black; 
  background: white; 
  border: solid;
}

上記の例において、境界は立体的(solid)な黒い線になります。

5.5.17 'border-style'

'border-style'プロパティは、4つのborder(境界)のスタイルをセットします。それは、１～４個の値を持つことができ、値は、'border-width'に対して異なる面の上にセットされます。

#xy34 { border-style: solid dotted }

上記の例において、水平の境界は'solid'(立体)になり、垂直の境界は'dotted'(点在)になります。

境界スタイルの初期の値が'none'なので、境界スタイルがセットされなければ、境界は表示されません。

境界スタイルは、次のことを意味します(翻訳注：原文では説明だけですが、わかり易いようにサンプルの表示を追加しました。ブラウザがCSS1に対応しているものだと、説明文のまわりにサンプルが表示されます):

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 core: UAは、'solid' として、 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' と 'outset' を、すべて解釈し得ます。

5.5.18 'border-top'

値： <border-top-width> || <border-style> || <color>
初期値： 簡略表記のプロパティなので定義しません。
適用： すべての要素
継承： no
パーセンテージ値： なし

(翻訳注：'border-top'の説明文の筈なのに、何故か例文は'border-bottom'です。)

これは、要素のトップの境界の、幅(width)、スタイル(style) および色(color) を設定するための簡略表記のプロパティです。

H1 { border-bottom: thick solid red }

上記の規定は、H1要素の下部のborder(境界)の幅、スタイルおよび色をセットします。省略された値は、それらの初期値にセットされます:

H1 { border-bottom: thick solid }

上記の例において、色の値が省略されているので、境界色は、要素それ自身の'color'値と同じになります。

'border-style'プロパティが4つまでの値を受け入れている一方で、このプロパティが、ただ単に1つのスタイルの値を受け入れることに注意してください。

5.5.19 'border-right'

値： <border-right-width> || <border-style> || <color>
初期値： 簡略表記のプロパティなので定義しません。
適用： すべての要素
継承： no
パーセンテージ値： なし

これは、要素の右の境界の、幅(width)、スタイル(style) および色(color) を設定するための簡略表記のプロパティです。その他の点で、これは、'border-top'と等価です。

5.5.20 'border-bottom'

値： <border-bottom-width> || <border-style> || <color>
初期値： 簡略表記のプロパティなので定義しません。
適用： すべての要素
継承： no
パーセンテージ値： なし

これは要素の底の境界の、幅(width)、スタイル(style) および色(color) を設定するための簡略表記のプロパティです。その他の点で、これは、'border-top'と等価です。

5.5.21 'border-left'

値： <border-left-width> || <border-style> || <color>
初期値： 簡略表記のプロパティなので定義しません。
適用： すべての要素
継承： no
パーセンテージ値： なし

これは要素の左の境界の、幅(width)、スタイル(style) および色(color) を設定するための簡略表記のプロパティです。その他の点で、これは、'border-top'と等価です。

5.5.22 'border'

値： <border-width> || <border-style> || <color>
初期値： 簡略表記のプロパティなので定義しません。
適用： すべての要素
継承： no
パーセンテージ値： なし

'border'プロパティは、要素の４つの境界すべてに同一の、幅(width)、スタイル(style) および色(color) を設定するための簡略表記のプロパティです。例えば、１番目の下記の規定は、その下に示された4つの規定のセットと等価です:

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

簡略表記の'margin'および'padding'プロパティと異なり、 'border'プロパティは4つの境界上で異なる値をセットすることができません。そうするために、1つ以上の別の境界プロパティを使用しなければなりません。

ある程度までプロパティは、重複する機能性を持つので、規定が指定される順番が重要になります。この例を考慮してください: (翻訳注:原文の例はエラーが含まれ、さらに下記の説明文と矛盾しているため、原著者に問合せて修正しました)

BLOCKQUOTE {
  border-style: solid;
  border-color: red;
  border-left: double;
  color: black
}

(翻訳注:この部分に、上記の例文のスタイルを適用させています。なお、Netscape4.xは、'border-left'等のスタイルには対応していません。)

上記の例において、左(left)の境界(border)の色は黒(black)になり、同時に、それ以外の境界は赤(red)ですこれは、幅、スタイルおよび色を設定する'border-left'によります。色の値が、'border-left'プロパティ上で指定されないので、'color'プロパティから引用されます。 'color'プロパティが、'border-left'プロパティの後にセットされている事実は、関連しません。

(翻訳注：ちなみに下記のように、'border-color'を一番下にすると、左の境界の色が赤になります。つまり、上記の例は、'border-color'と、'color'の順番についての考察です。)

BLOCKQUOTE {
  border-style: solid;
  border-left: double;
  color: black;
  border-color: red
}

(翻訳注:この部分に、上記の例文のスタイルを適用させています。なお、Netscape4.xは、'border-left'等のスタイルには対応していません。)

5.5.23 'width'

値： <length> | <percentage> | auto
初期値： auto
適用： ブロックレベル要素および交換された要素
継承： no
パーセンテージ値： 親要素の幅(width)を参照

このプロパティはテキスト要素に適用することができます。しかし、それはイメージのような交換された要素で最も有用です。幅(width)は、必要ならば画像を調整することを、強いられることがあります。調整する場合、'height'プロパティが'auto'であるなら、画像の縦横比が保存されます。

例:

IMG.icon { width: 100px }

交換された要素の'width'および'height'が、両方とも'auto'なら、 'width'と'height'のプロパティは、要素の組込み範囲にセットされます。 (翻訳注：要素の組込み範囲とは、周囲によって組み付けられていない、要素それ自身によって定義されるような幅と高さのことです)

マイナスの値は許可されません。

このプロパティとmargin(余白)およびpaddingに関連する記述に関しては、フォーマット・モデル(セクション4) を参照してください。

5.5.24 'height'

値： <length> | auto
初期値： auto
適用： ブロックレベル要素および交換された要素
継承： no
パーセンテージ値： なし

このプロパティはテキストに適用することができます。しかし、それはイメージのような交換された要素で最も有用です。高さ(height)は、必要ならば画像を調整することを、強いられることがあります。調整する場合、'width'プロパティが'auto'なら、イメージの縦横比が保存されます。

例:

IMG.icon { height: 100px }

交換された要素の'width'および'height'が、両方とも'auto'なら、これらのプロパティは、要素の組込み範囲にセットされます。 (翻訳注：要素の組込み範囲とは、周囲によって組み付けられていない、要素それ自身によって定義されるような幅と高さのことです)

もしテキストの要素に適用されれば、高さは、例えばスクロール･バー用いて施行することができます。

マイナスの値は許可されません。

CSS1 core: 要素が交換された要素でない場合、 UAは、'height'プロパティを無視し得ます(つまり、'auto'としてそれを扱う)。

5.5.25 'float'

値： left | right | none
初期値： none
適用： すべての要素
継承： no
パーセンテージ値： なし

値'none'で、要素は、テキスト内で現われるところに、表示されます。 'left' ('right') の値で、要素は、左(右)に移動され、テキストは、要素の右(左)側面をおおいます。 'left' か、'right' の値で、要素は、ブロックレベルとして扱われます(つまり、'display'プロパティは無視されます)。十分な仕様書に関しては、セクション4.1.4 を参照してください。

IMG.icon { 
  float: left;
  margin-left: 0;
}

上記の例は、すべての'CLASS=icon'を備えたIMG要素を、親要素の左(left)側に沿って配置します。

このプロパティは、最も頻繁にインラインのイメージに対して使用されますが、さらに、テキストの要素に適用されます。

5.5.26 'clear'

値： none | left | right | both
初期値： none
適用： すべての要素
継承： no
パーセンテージ値： なし

このプロパティは、要素が自身の側面でフローしている要素を許可するかどうか明示します。より明確には、このプロパティの値は、フローしている要素が容認されない側面をリストします。 'clear'が'left'にセットされると、左(left)側面でフローしている要素のない下側に移動されます。 'clear'が'none'にセットされると、フローしている要素は、すべての側面で許可されます。例:

H1 { clear: left }

5.6 格付けプロパティ

これらのプロパティは、特定の視覚的なパラメーターをセットする以上の範疇に要素を格付けします。

リストスタイル･プロパティは、リスト項目(つまり'list-item'の'display'値を備えた要素)がどう構成されるか記述します。リストスタイル･プロパティは、任意の要素にセットすることができ、それは、通常、ツリーの下へ継承します。しかしながら、それらは単に、 'list-item'の'display'値を備えた要素に効果があるだけです。 HTMLでは、これは、一般的に'LI'要素に対する場合です。

5.6.1 'display'

値： block | inline | list-item | none
初期値： block
適用： すべての要素
継承： no
パーセンテージ値： なし

このプロパティは、どのようにどう、要素がキャンパス(印刷されたページ、コンピューター・ディスプレイ等がありえます)上に、表示されるか記述します。

'block'の'display'値を備えた要素は、新しい箱を開きます。箱は、CSS フォーマット・モデルに従った隣接した箱に関連して配置されます。一般的に、'H1'のような要素および'P'は、タイプ'block'に属します。 'list-item'の値は、リスト項目マーカーが加えられるという点を除いて、'block'に類似しています。 HTMLでは、一般的に、'LI'がこの値を持ちます。

'inline'の'display'値を備えた要素は、前の内容と同じライン上の新しいインラインの箱に帰着します。箱は、内容の構成されたサイズに従って測定されます。内容がテキストである場合、それはいくつかの行に広がり得、各行上に箱が存在します。 margin(余白)、border(境界)およびpaddingのプロパティは、 'inline'要素に適用されますが、改行で、いかなる効果もありません。

'none'の値は、子供要素と周囲の箱を含む、要素の表示を止めます。

P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }

最後の規定は、イメージの表示を止めます。

'display'の初期値は'block'です。 UAは、すべてのHTML要素に対して、要素の表現について、 HTML仕様書[2]において提案されたものに一致する、一般的なデフォルトの値を持ちます。

CSS1 core: UAは、'display'を無視し、UAのデフォルト値だけを使用し得ます。 (セクション7を参照)

5.6.2 'white-space'

値： normal | pre | nowrap
初期値： normal
適用： ブロックレベル要素
継承： yes
パーセンテージ値： なし

このプロパティは、要素の内部のホワイトスペース(翻訳注:スペース、タブ、行区切)が、どう扱われるか宣言します: 'normal'の方法(ホワイトスペースがつぶれる)、 'pre'(HTMLの'PRE'要素のように作用する)として、あるいは'nowrap'(包まれたものが、'BR'要素によってのみ終わる)として:

PRE { white-space: pre }
P   { white-space: normal }

'whitespace'の初期値は'normal'です。しかし、UAは、すべてのHTML要素に対して、要素の表現について、 HTML仕様書[2]において提案されたものに一致する、一般的なデフォルトの値を持ちます。

CSS1 core: UAは、著者および読者のスタイル・シートの'whitespace'プロパティを無視し、 UAのデフォルト値を代わりに使用し得ます。 (セクション7を参照)

5.6.3 'list-style-type'

このプロパティは、'list-style-image'が'none'の場合か、 URLによって示されたイメージを表示することができない場合に、リスト項目マーカーの外観を決定するために使用されます。

OL { list-style-type: decimal }       /* 1 2 3 4 5 など. */
OL { list-style-type: lower-alpha }   /* a b c d e など. */
OL { list-style-type: lower-roman }   /* i ii iii iv v など. */

5.6.4 'list-style-image'

値： <url> | none
初期値： none
適用： 'display'が'list-item'と評価される要素
継承： yes
パーセンテージ値： なし

このプロパティは、リスト項目マーカーとして使用されるイメージをセットします。イメージが利用可能だった場合、'list-style-type'のマーカーとマーカーのセットを交換します。

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

5.6.5 'list-style-position'

値： inside | outside
初期値： outside
適用： 'display'が'list-item'と評価される要素
継承： yes
パーセンテージ値： なし

'list-style-position'の値は、リスト項目マーカーが内容に関してどう描かれるか決めます。構成例については、セクション4.1.3 を参照してください。

5.6.6 'list-style'

値： [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
初期値： 簡略表記のプロパティなので定義しません。
適用： 'display'が'list-item'と評価される要素
継承： yes
パーセンテージ値： なし

'list-style'プロパティは、スタイル・シート中の同じ場所に3つのプロパティ、 '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'要素上の２番目の規定に優先し、 'lower-alpha'のリスト・スタイルのみが使用されます。また、下記のように、リスト･タイプ要素(翻訳注：'DL','OL','UL'等)上でのみ'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 長さの構成単位

長さの値のフォーマットは、任意の記号文字符号('+' か '-', デフォルトは '+')の直後に続く数(小数点を備えるか、ないもの) の直後に続く構成単位の識別子(２文字の略字)です。 '0' の数のあとの構成単位の識別子は、オプションです。

いくつかのプロパティは、マイナスの長さの構成単位を許可していますが、これがフォーマット・モデルを複雑にするかもしれません。また、実行時の特殊な制限があるかもしれません。マイナスの長さの値をサポートすることができない場合、サポートすることができる最も近い値に制限されるべきです。

2つのタイプ(相対と絶対)の長さの構成単位があります。相対的な構成単位は、別の長さのプロパティに相対的な長さを指定します。相対的な構成単位を使用するスタイル・シートは、１つの媒体から別のもの(例えば、コンピュータ画面からレーザープリンター)まで、より容易に調整します。パーセンテージの構成単位 (下に記述されたもの)とキーワード値(例えば、 'x-large')には、類似した長所があります。

これらの相対的な構成単位がサポートされます:

H1 { margin: 0.5em }      /* ems, 要素のフォントの高さ */
H1 { margin: 1ex }        /* x-height, ~ the height of the letter 'x' */
P  { font-size: 12px }    /* ピクセル(pixels), キャンパスに比例 */

(翻訳注：別の資料では、emは、印刷用語で全角のこと、また、現在のフォント･サイズとデザイン内の大文字'M'の高さと幅のこと。と解説してあるのもあります。x-heightについては、詳しく解説してある資料をもっていないので不明です。)

相対的な構成単位'em'および'ex'は、要素それ自身のフォント・サイズに比例しています。 CSS1中のこの規定のただ一つの例外は、 'em'および'ex'値が親要素のフォント・サイズを参照する場合の'font-size'プロパティです。

ピクセルの構成単位は、最後の規定の中で使用されたように、キャンバス(多くの場合コンピューター・ディスプレイ)の解像度に比例します。出力装置のピクセル密度が、一般的なコンピューター･ディスプレイと非常に異なる場合、 UAは、ピクセルの値を再調整すべきです。提案された照合ピクセル(reference pixel)は、 90dpiのピクセル密度と読者の腕の長さからの間隔に対する、装置上の１つのピクセルに属す視覚的な角度です。２８インチである名目上の腕の長さに対する、視覚的な角度は約0.0227度です。

子供要素は相対的な値ではなく、計算された値を継承します:

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* 12×3 つまり 36pt */
}
H1 { font-size: 15pt }

上記の例の中で、'H1'要素の'text-indent'の値は、45ptではなく36ptになります。

絶対的な長さの構成単位は、出力媒体の物理的なプロパティが知られている場合のみ有用です。下記の絶対的な単位がサポートされます:

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 */

《翻訳注：パイカは、12pt活字の事で主にタイプライターに用いられています》

指定された長さがサポートすることができない場合、UAは、近い値にしようとすべきです。さらにまた、すべてのCSS1プロパティについては、計算結果と継承がほぼ正確な値に基づくべきです。

6.2 パーセンテージの構成単位

パーセンテージ値のフォーマットは、任意の記号文字符号('+' か '-', デフォルトは '+') の直後に続く数(小数点を備えるか、ないもの) の直後に続く'%'です。

パーセンテージ値は、常に別の値(例えば長さの構成単位)に比例します。パーセンテージの構成単位を許可する各プロパティは、さらにパーセンテージの値が参照する値を定義します。多くの場合、これは要素それ自身のフォント・サイズです:

P { line-height: 120% }   /* 要素の'font-size'に関して120% */

すべての継承した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) }      /* 整数の範囲 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* フロートの範囲 0.0% - 100.0% */

16進法の記法のRGB値のフォーマットは、'#'の直後に続く3桁か6桁のいずれかの文字符号です。 3桁RGB記法(#rgb)は、桁の模写により(ゼロの追加によるものではない)6桁形式(#rrggbb)に変換されます。例えば、#fb0 は #ffbb00 に拡大します。これは、白(#ffffff)が短い記法(#fff)で指定することができることで確かめられ、ディスプレイの色深度(color depth)上の任意の依存性を削除します。

関数記法のRGB値のフォーマットは、 'rgb('に後続する３つの数値のコンマで分離されたリスト (0-255の範囲の３つの整数値か、0.0% から 100.0%の範囲の３つのパーセンテージ値のどちらか) に続く')'です。ホワイトスペースの文字符号は、数の値の周囲で許可されます。

数の範囲外の値は、制限されるべきです。下記の3つの規定は、したがって等価です:

EM { color: rgb(255,0,0) }       /* 整数の範囲 0 - 255 */
EM { color: rgb(300,0,0) }       /* 255に制限された */
EM { color: rgb(110%, 0%, 0%) }  /* 100%に制限された */

RGB色はsRGB色空間 [9]で指定されます。 UAは、これらの色を表現する忠実さにおいて一様ではあり得ません。しかし、sRGBの使用は、色が存在することについての明瞭で客観的に測定できる定義を提供し、同時に国際基準[10]と関係しています。

UAは、色を表示する際に、UA上でガンマ修正を実行することの努力を制限し得ます。 sRGBは、表示状態の指定の中で、2.2のディスプレイ・ガンマを指定しています。 UAは、出力装置の"natural"なディスプレイ・ガンマによる組み合わせ内で、 2.2の有効なディスプレイ・ガンマが作り出されたように、 CSSの中で与えられた色を調整します。付録D(Appendix D) は、さらに、この詳細を与えます。 CSSの中で指定された色だけが影響されることに注意してください; 例えば、イメージが自身の色情報を伝えると予想されます。

6.4 URL

ユニフォーム・リソース・ロケーター(URL)は関数の記法と同一視することができます:

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

URL値のフォーマットは、 'url'('の次に、任意のホワイトスペースが続き、任意のシングルクォート(')あるいはダブルクォート(")文字符号によって続く、 URL自身[11]の中での定義に従う)が続き、任意のシングルクォート(')あるいはダブルクォート(")文字符号で続く、任意のホワイトスペースの後の')'です。 URL自身の一部でないクォートの文字符号は、釣り合ってなければなりません。

URL内に現れる、パーレン(丸括弧)、コンマ、ホワイトスペース文字符号、シングルクォート(')およびダブルクォート(")は、バックスラッシュ(例：'\(', '\)', '\,' )により回避されなければなりません。

部分的なURL(Partial URLs)は、ドキュメントに関係してではなく、スタイル・シートのソースに関係して解釈されます:

BODY { background: url(yellow) }

(翻訳注：上記の例の'yellow'は、スタイル･シートの置いてあるディレクトリー内にある必要があります。)

7 CSS1適合

ドキュメントを表示するためにCSS1を使用するユーザー･エージェント(User Agent)は、下記の場合、CSS1の仕様書に一致します。:

参照が付けられたスタイル・シートをすべて取って来て、かつこの仕様書に従ってそれらを解析することをしようとする。
カスケードの順番に従って宣言をソートする。
表示媒体の制約内で、CSS1の機能性を満たしている(下記の説明を参照)。

CSS1のスタイル・シートを出力するユーザー･エージェント(User Agent)は、下記の場合、CSS1仕様書に一致します。

有効なCSS1のスタイル・シートを出力します。

ユーザー･エージェントが、適合必要条件の両方のセットを満たす場合、ドキュメントの表示 および CSS1スタイルシートの出力に、 CSS1を使用するユーザー･エージェントは、 CSS1仕様書に一致します。

UAは、CSS1の機能性をすべて実装する必要がない: 中心(コア)の機能性の実装によりCSS1に一致することができます。中心(コア)の機能性は、明示的に除外された部分を除いた、 CSS1仕様書全体から成ります。テキストでは、それらの部分が、"CSS1 core:"に続く、機能性は、中心(コア)の機能性の外にあるという説明によって示されます。中心(コア)の機能性から除外された特徴のセットは、CSS1の高度な特徴(CSS1 advanced features)と呼ばれます。

このセクションは、CSS1への適合を単に定義しています。将来のCSSの別のレベルが一致のために、 UAに、異なる特徴のセットを実装することを要求するかもしれない場合があるでしょう。

表示媒体の制約の実例は次のとおりです：制限のある資源(フォント、色)、および制限のある解像度(したがって、marginは正確ではないかもしれません)。これらの場合では、UAは、スタイル・シート値に近くなるべきです。さらに、異なるユーザ・インターフェースの方法論は、自身の制約を持っているかもしれません :VRブラウザーは、ユーザからの"間隔"に基づいてドキュメントを設定し直し得ます。

UAは、読者に表示上の追加の選択を提供し得ます。例えば、UAは、読者のために視覚を減じるオプションを提供するかもしれないし、あるいは、点滅をできなくする選択を提供するかもしれません。

CSS1が、構成のすべての様相を指定するとは限らないことに注意してください。例えば、UAは文字を一定間隔で配置するアルゴリズムを自由に選択することができます。

下記の詳述は、さらに推薦しますが、UAに要求するものではありません:

読者が個人のスタイル・シートを指定することを可能にします。
個々のスタイル・シートをつけたり止めたりすることを可能にします。

上記の適合規則は、ユーザ・インターフェースではなく単に機能性について記述しています。

7.1 前方互換性をもつ解析

この仕様書は、CSSレベル1を定義します。 CSSのより高いレベルが、追加の特徴で、今後定義されるだろうと思われます。適切なCSS1をサポートするUAが、より高いレベルの特徴を含んでいるスタイル・シートを読むことができることを保証するために、このセクションは、UAがCSSレベル1において有効でない一定の構成物に遭遇した場合の、実行を定義します。

未知のプロパティを備えた宣言が無視されます。例えば、スタイル・シートが次の場合、
```
  H1 { color: red; rotation: 70deg }
```
UAは、あたかもスタイル･シートが次のものだったように、これを扱います。
```
H1 { color: red; }
```
不法な値、あるいは、不法な部分を備えた値は、あたかも宣言がそこに全くないかのように扱われます。
```
IMG { float: left }       /* CSS1 */
IMG { float: left top }   /* "top" は 'float'の値で無い */
IMG { background: "red" } /* キーワードが、CSS1と等価でない (翻訳注:"red"は、redが正しい)*/
IMG { border-width: 3 }   /* 構成単位が、長さの値に対して明示されなければならない */
```
上記の例において、CSS1パーザは、あたかもスタイル・シートが次のものだったように、１番目の規定を優先して、残りを無視します。
```
IMG { float: left }
IMG { }
IMG { }
IMG { }
```
将来のCSS仕様書に一致するUAは、別の規定の1つ以上を、同様にうまく受け入れるかもしれません。
無効なキーワードは、無効なキーワードに続く次のセミコロン(;)か、括弧のペア(どちらが最初にこようとも)({...})まで含んで、すべてのものと一緒に無視されます。例えば、スタイル・シートが次のものを読むと仮定します:
```
@three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  H1 { color: red }
}
H1 {color: blue}
```
'@three-dee'は、CSS1によれば違法になります。したがって、規定内全体(３番目の右のカール状の括弧まで含む)は、無視されます。 CSS1のUAは、次のように効果的にスタイル・シートを縮小して、それをスキップします:
```
H1 {color: blue}
```

より多くの詳細において:

CSSスタイル・シートは、CSSの任意のバージョンのための、ステートメント(statements)のリストから成ります。 CSSスタイル・シートには、ステートメントの２つの種類(at-rules と rulesets)があります。 CSSスタイル・シートでは、ステートメントの前後上下にホワイトスペース(スペース、タブ、行区切)があり得ます。

CSSスタイル・シートは、多くの場合、HTMLドキュメントに埋め込まれ、より古いUAからスタイル・シートを隠すことをするために、手ごろな、HTMLコメントの内部にスタイル・シートを置きます。 HTMLコメントのしるし "" は、前後、そしてステートメントの間において存在しえます。 HTMLコメントのしるしは、前後上下にホワイトスペースを持ち得ます。

At-rules は、はじめに'@'を含んだ識別子である at-keyword を用いて始まります(例: '@import', '@page')。識別子は、文字、数字、ダッシュ(翻訳注：'-')、およびエスケープ文字から成ります(下に定義された)。

at-rule は、どちらが最初に来ても、次のセミコロン(;)か、次のブロック(近くに定義された)まで含くむ、すべてのものから成ります。 '@import'以外の at-keyword で始まる at-rule に遭遇したCSS1のUAは、 at-rule の全体を無視し、それ以降の解析を続けます (翻訳注：よく使われている'@media'は、CSS2で定義されたものです)。そしてそのうえ、at-rule が、スタイル・シートの一番上に生じない場合、つまり、それがどんな規定(無視された規定の場合も同じ)の後に生じる場合でも、 '@import'で始まるすべての at-rule を無視します。ここに、例があります。

CSS1パーザが、このスタイル・シートに遭遇すると仮定します:

@import "subs.css";
H1 { color: blue }
@import "list.css";

２番目の'@import'は、CSS1によれば違法になります。 CSS1のパーザは、次のように効果的にスタイル・シートを縮小して、規定内全体をスキップします:

@import "subs.css";
H1 {color: blue}

ブロック(block) は、左のカール状の括弧({)で始まり、一致する右のカール状の括弧(})で終了します。間においては、任意の文字符号がありえ、でなければ、丸括弧(())、ブラケット([])およびブレス({})が常にペアと一致して生じ、入れ子になり得ます。シングルクォート(')とダブルクォート(")は、同様にペアと一致して生じ、間の文字符号は、ストリング(string)として解析されます(ストリングの定義に関しては付録Bにおいて、しるしとなるもの(tokenizer)を参照)。ここに、ブロックの例があります：クォート(")の間の右のブレス(})が、ブロックの開始ブレス({)と一致せず、２番目のシングルクォート(\')が、エスケープされた文字で、開始のシングルクォートと一致しないことに注意してください:

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

ruleset は、選択文字列(selector-string)に続く、宣言ブロック(declaration-block)から成ります。選択文字列は、１番目の左のカール状の括弧({)まで(含まずに)のすべてから成ります。有効なCSS1でない選択文字列で始まる ruleset は、スキップされます。

例えば、CSS1パーザがこのスタイル・シートに遭遇すると仮定します:

H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }

２番目の行は、CSS1によれば違法になる選択文字列を含んでいます。 CSS1のUAは、スタイル・シートを次のものに変えて、ruleset をスキップします:

H1 { color: blue }
P EM { font-weight: bold }

宣言ブロックは、左のカール状の括弧({)で始まり、一致する右のカール状の括弧(})で終了します。間においては、セミコロン(;)によって分離された、 0あるいはより多くの宣言(declarations) のリストがあります。

宣言は、プロパティ(property)、コロン(:)と値(value) から成ります。これらの各々のまわりで、ホワイトスペースがあり得、すでに定義されているように、プロパティは、識別子(identifier)です。任意の文字符号が値に生じ得ますが、丸括弧(())、ブラケット([])、ブレス({})、シングルクォート(')およびダブルクォート(")は、ペアと一致して現われなければなりません。丸括弧(())、ブラケット([])、およびブレス({})が入れ子にされ得ます。クォートの内部では、文字符号は文字列(string)として解析されます。

新しいプロパティおよび既存のプロパティに対する新しい値を、今後追加することができることを保証するために、 UAは、無効のプロパティ名あるいは無効の値を備えた宣言を、スキップしなければなりません。どのCSS1のプロパティもみな、受け入れる値に対するそれ自身の構文的かつ意味的な制限を持っています。

例えば、CSS1パーザがこのスタイル・シートに遭遇すると仮定します:

H1 { color: red; font-style: 12pt }
P { color: blue;  font-vendor: any;  font-variant: small-caps }
EM EM { font-style: normal }

１番目の行上の２番目の宣言は、無効の値'12pt'を持っています。２番目の行上の２番目の宣言は、不確定のプロパティ'font-vendor'を含んでいます。 CSS1パーザは、スタイル・シートを次のもの変えて、これらの宣言をスキップします:

H1 { color: red; }
P { color: blue;  font-variant: small-caps }
EM EM { font-style: normal }

コメント(セクション1.7を参照)は、ホワイトスペースが生じることができ、ホワイトスペースであると考えられるところの、いかなる場所でも生じることができます。 CSS1では、(内部の値のように)ホワイトスペースが生じることができ、コメントがそこに同様に許可される、付加的な場所を定義しています。

次の規則は常に保持されます:

CSSスタイル・シートはすべて、CSSにコントロールされない部分を除いて、ケース無感覚(翻訳注:大文字･小文字を区別しません)です。つまり、CSS1では、フォント･ファミリーおよびURLがケース敏感(翻訳注:大文字･小文字を区別します)になりえます。さらに、CLASSとIDの属性のケース感度は、HTML[2] にコントロールされます。
CSS1では、セレクター(要素名、クラスおよびID)は、文字 A-Z、 0-9、そしてユニコード文字符号 161-255、さらに、ダッシュ(-) だけを含むことができます; それらは、ダッシュあるいは数字で始まることができません; それらは、さらにエスケープ文字符号、および、数値コードとして任意のユニコード文字符号を含むことができます(次の項目を参照)。
バックスラッシュに続く、最大4つの16進法の数字(A-Z, 0-9)は、その数を備えたユニコード文字を表わします。
16進法の数字以外の任意の文字符号は、前方にバックスラッシュを置く事により、自身の特別な意味を削除し回避することが出来ます。例："\"" は、１つのダブルクォートからなる文字列です。
前の2つの項目は、バックスラッシュ回避(backslash-escapes) を定義します。バックスラッシュ回避は、文字列の内部以外は、識別子(identifier)の一部であると常に考えられます (つまり、"{" は句読ですが、"\7B"(翻訳注："{"の16進数文字コード)は句読ではありません。また、"2"はだめですが、"\32"は、クラス名の開始に許可されます)。

注:HTMLのCLASS属性は、上記のセレクター用に許可されたセットより、クラス名の中のより多くの文字符号を許可しています。 CSS1では、これらの文字符号をユニコード番号として書くか、回避しなければなりません。: "B&W?" は、 "B\&W\?"として、あるいは、"B\26W\3F"と書くことができ、 "κουρος" (ギリシャ語の"kouros")は、 "\3BA\3BF\3C5\3C1\3BF\3C2"として書かれていなければなりません。 CSSの後のバージョンでは、より多くの文字符号を直接入力できるようになることが期待されます。

付録B(Appendix B)はCSS1のために文法を与えます。

8 参照

[1] ウェブ・スタイル・シートに関するW3Cのリソースページ　(http://www.w3.org/Style)

[2] "HTML 4.0 仕様書" , D. Raggett, A. Le Hors, I. Jacobs, 1997年12月. http://www.w3.org/TR/REC-html40で利用可能。

[3] T Berners-Lee, D Connolly: "ハイパーテキスト・マークアップ･ランゲージ-2.0", RFC 1866, MIT/W3C, 1995年11月, 仕様書は、さらに、ハイパーテキストの形で利用可能です。 (http://www.w3.org/MarkUp/html-spec/html-spec_toc.html)

[4] F Yergeau, G Nicol, G Adams, M D・st:"ハイパーテキスト・マークアップ･ランゲージの国際化" (ftp://ds.internic.net/rfc/rfc2070.txt).

[5] ISO 8879:1986. 情報処理 -テキストとオフィスのシステム- 標準一般化マークアップ･ランゲージ(SGML)

[6] ISO/IEC 10179:1996 情報技術 --処理言語-- ドキュメント・スタイル意味論(Document Style Semantics)、および詳述文法(Specification Language)(DSSSL)。

[7] ISO/IEC 9899:1990 プログラミング言語 -- C。

[8] ユニコード･コンソーシアム(Unicode Consortium)、 "ユニコード標準 --世界的な文字符号づけ-- バージョン1.0", Addison-Wesley, Volume 1, 1991, Volume 2, 1992.

[9] "インターネットのための標準のデフォルト(Standard Default)色空間", version 1.10, M. Stokes, M. Anderson, S. Chandrasekar, と R. Motta, 1996年11月5日.

[10] CIE出版(CIE Publication) 1986年2月15日、"比色定量(Colorimetry), 第２版", ISBN 3-900-734-00-3

[11] T Berners-Lee, L Masinter, M McCahill: "ユニフォーム・リソース・ロケーター(URL)", RFC 1738, CERN, ゼロックス株式会社, ミネソタ大学, 1994年12月.

[12] "PNG (ポータブル･ネットワーク･グラフィックス)の設計書, Version 1.0 仕様書" (http://www.w3.org/TR/REC-png-multi.html)

[13] Charles A. Poynton: "マッキントッシュ・プラットフォーム(Macintosh Platform)上のガンマ修正" (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)

[14]国際色コンソーシアム(International Color Consortium): "ICCのプロフィール・構成仕様書(ICC Profile Format Specification)、バージョン3.2", 1995 (ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)

[15] S C Johnson: "YACC - Yet another compiler compiler", 技術報告書, Murray Hill, 1975年

[16] "flex：語彙を調べるジェネレーター", Version 2.3.7, ISBN 1882114213

9 謝辞

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 および Stephen Zilles.

３名は、格別に名を上げる価値があります: Dave Raggett (彼の激励とHTML3での仕事に対して), Chris Lilley (彼の継続的な寄稿に対し、とりわけ、色とフォントの領域において) および Steven Pemberton (創造的な技術はもちろん、彼の構成に対して).

付録A(Appendix A):HTML 2.0のためのサンプル・スタイル・シート

(この付録は、標準ではありませんが有益です。)

次のスタイル・シートは、HTML 2.0[3]仕様書において、提案された表現に従って書かれています。いくつかのスタイル、例えば色は、完全にするつもりで加えられました。下記のものに似ているスタイル・シートが、UAのデフォルトとして使用されることが提案されます。

BODY { 
  margin: 1em;
  font-family: serif;
  line-height: 1.1;
  background: white;
  color: black; 
}

H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, 
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL { 
  display: block }

B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, 
IMG, SPAN { display: inline }

LI { display: list-item }

H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }

H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }

B, STRONG { font-weight: bolder }  /* 親に比例する */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }

PRE { white-space: pre }

ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }

UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 }              /* きついフォーマット */
LI { margin-left: 3em }

DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }

HR { border-top: solid }        /* さらに'border-bottom'の使用が、できるかもしれません */

A:link { color: blue }          /* 未訪問のリンク */
A:visited { color: red }        /* 訪問されたリンク */
A:active { color: lime }        /* アクティブなリンク */

/* IMG要素周囲のアンカーのボーダーを設定する事は、
   文脈上のセレクターを必要とします。 */

A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }

付録B(Appendix B):CSS1文法

(この付録は標準です。)

すべての実装系がサポートする必要のある最小のCSS(つまりCSSの任意のバージョン)の文法は、セクション7の中で定義されています。下記の文法ははるかに小さな(CSS1の構文を定義する)言語を定義します。

いくつかの意味において、しかしながらそれでも、 CSS1のスーパーセット(追加の意味的な制約はこの文法の中で表現されていません)は存在します。一致するUAは、さらに、前方互換性を解析する規則(セクション7.1)、プロパティおよびプロパティ値用の表記法(セクション5)、および構成単位記法(セクション6) を厳守しなければなりません。さらに、HTMLは、例えば、CLASS属性の可能な値に対して等の制限を課しています。

下記の文法は、LL(1)です (しかしそれが解析する約束事を表現せず、CSSの構文だけなので、ほとんどのUAが、それを直接使用してはならないことに注意して下さい)。提示物(productions)のフォーマットは、人の消費(human consumption)のために最適化されます。また、yacc [15]を越えるいくつかの簡略表記記法が、使用されています:

*  : 0 以上
+  : 1 以上
?  : 0 か 1
|  : 二者択一のセパレーター
[] : 組み分け、グルーピング

提示物(productions)は:

stylesheet
 : [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]*
 ;
import
 : IMPORT_SYM [STRING|URL] ';'		/* 例： @import url(fun.css); */
 ;
unary_operator
 : '-' | '+'
 ;
operator
 : '/' | ',' | /* 空 */
 ;
property
 : IDENT
 ;
ruleset
 : selector [ ',' selector ]*
   '{' declaration [ ';' declaration ]* '}'
 ;
selector
 : simple_selector+ [ pseudo_element | solitary_pseudo_element ]?
 | solitary_pseudo_element
 ;
	/* "id" は、P#p007 のように、
	** 自身の左側の要素タイプに付属されたIDです。
	** "solitary_id" は、クラスと擬似クラスに類似して、
	** #p007 のように、要素タイプには付属されません。
	*/
simple_selector
 : element_name id? class? pseudo_class?	/* 例: H1.subject */
 | solitary_id class? pseudo_class?		/* 例: #xyz33 */
 | solitary_class pseudo_class?			/* 例: .author */
 | solitary_pseudo_class			/* 例: :link */
 ;
element_name
 : IDENT
 ;
pseudo_class					/* as in:  A:link */
 : LINK_PSCLASS_AFTER_IDENT
 | VISITED_PSCLASS_AFTER_IDENT
 | ACTIVE_PSCLASS_AFTER_IDENT
 ;
solitary_pseudo_class				/* as in:  :link */
 : LINK_PSCLASS
 | VISITED_PSCLASS
 | ACTIVE_PSCLASS
 ;
class						/* as in:  P.note */
 : CLASS_AFTER_IDENT
 ;
solitary_class					/* as in:  .note */
 : CLASS
 ;
pseudo_element					/* as in:  P:first-line */
 : FIRST_LETTER_AFTER_IDENT
 | FIRST_LINE_AFTER_IDENT
 ;
solitary_pseudo_element				/* as in:  :first-line */
 : FIRST_LETTER
 | FIRST_LINE
 ;
	/* これらは、id と solitary_id に関する制約です。
	** "#"の後ろに続く部分は、有効なHTMLのIDの値でなければなりません。;
	** 例えば、 "#x77" は OK、しかし "#77" は駄目
	** (翻訳注:数字で始まるIDは使えないという制限があるため)。
	*/
id
 : HASH_AFTER_IDENT
 ;
solitary_id
 : HASH
 ;
declaration
 : property ':' expr prio? 
 | /* 空 */				/* 構文エラー防止... */
 ;
prio
 : IMPORTANT_SYM	 		/* !important */
 ;
expr
 : term [ operator term ]*
 ;
term
 : unary_operator?
   [ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
   | IDENT | hexcolor | URL | RGB ]
 ;
	/* これらは、色に関する制約です。
	** 色は、"#"に続く、３つか６つのどちらかの
	** １６進数([0-9a-fA-F])でなければなりません。
	** 例； "#000" は OK, しかし "#abcd" は駄目。
	*/
hexcolor
 : HASH | HASH_AFTER_IDENT
 ;

下記は、fiex[16] 記法の中で書かれたtokenizerです。これが、fiexの8ビットの実装を仮定することに注意してください。 tokenizerはケース無感覚(翻訳注:大文字･小文字を区別しません)です (fiexのコマンドライン・オプション -i)。

unicode		\\[0-9a-f]{1,4}
latin1		[｡-�]
escape		{unicode}|\\[ -~｡-�]
stringchar	{escape}|{latin1}|[ !#$%&(-~]
nmstrt		[a-z]|{latin1}|{escape}
nmchar		[-a-z0-9]|{latin1}|{escape}
ident		{nmstrt}{nmchar}*
name		{nmchar}+
d		[0-9]
notnm		[^-a-z0-9\\]|{latin1}
w		[ \t\n]*
num		{d}+|{d}*\.{d}+
string		\"({stringchar}|\')*\"|\'({stringchar}|\")*\'

%x COMMENT
%s AFTER_IDENT

%%
"/*"				{BEGIN(COMMENT);}
<COMMENT>"*/"			{BEGIN(0);}
<COMMENT>\n			{/* 無視する */}
<COMMENT>.			{/* 無視する */}
@import				{BEGIN(0); return IMPORT_SYM;}
"!"{w}important			{BEGIN(0); return IMPORTANT_SYM;}
{ident}				{BEGIN(AFTER_IDENT); return IDENT;}
{string}			{BEGIN(0); return STRING;}

{num}				{BEGIN(0); return NUMBER;}
{num}"%"			{BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm}			{BEGIN(0); return LENGTH;}
{num}mm/{notnm}			{BEGIN(0); return LENGTH;}
{num}cm/{notnm}			{BEGIN(0); return LENGTH;}
{num}pc/{notnm}			{BEGIN(0); return LENGTH;}
{num}in/{notnm}			{BEGIN(0); return LENGTH;}
{num}px/{notnm}			{BEGIN(0); return LENGTH;}
{num}em/{notnm}			{BEGIN(0); return EMS;}
{num}ex/{notnm}			{BEGIN(0); return EXS;}

<AFTER_IDENT>":"link		{return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited	{return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active	{return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line	{return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter	{return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name}		{return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name}		{return CLASS_AFTER_IDENT;}

":"link				{BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited			{BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active			{BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line			{BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter			{BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name}			{BEGIN(AFTER_IDENT); return HASH;}
"."{name}			{BEGIN(AFTER_IDENT); return CLASS;}

url\({w}{string}{w}\)					|
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\)		{BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\)	{BEGIN(0); return RGB;}

[-/+{};,#:]			{BEGIN(0); return *yytext;}
[ \t]+				{BEGIN(0); /* ホワイトスペースを無視する */}
\n				{BEGIN(0); /* ホワイトスペースを無視する */}
\<\!\-\-			{BEGIN(0); return CDO;}
\-\-\>				{BEGIN(0); return CDC;}
.				{fprintf(stderr, "%d: Illegal character (%d)\n",
				 lineno, *yytext);}

付録C:符号づけ

(この付録は、標準ではありませんが有益です。)

HTMLドキュメントは、ユニコードによって定義された、異なる約30,000の文字符号のうちのどれでも含みえます。多くのドキュメントは、わずかに百を必要とするだけです。多くのフォントは、さらにわずか100のグリフを含んでいるだけです。セクション5.2 と結合して、この付録は、ドキュメント中の文字符号とフォント中のグリフがどう一致するか説明します。

文字符号づけ

HTMLドキュメントの内容は、文字符号(characters) とマーク付けのシーケンス(連鎖)です。 "電話で"それを送るために、いくつかの可能な符号づけ(encodings) のうちの1つを使用して、バイト列としてコード化されます。 HTMLドキュメントは、文字符号を見つけるために解読しなければなりません。例えば、西ヨーロッパでは、抑音アクセント付き(à)のためにバイト224を使用することが慣習です。しかし、ヘブライ語では、アーレフ(Aleph)のために224を使用することがより一般的です。日本語では、通常、1つのバイトの意味が、それに先行したバイトに依存します(翻訳注：２バイト文字のこと)。いくつかの符号づけでは、１つの文字符号が、２(あるいはより多くの)バイトとしてコード化されます。

UAは、HTTPヘッダー中の"charset"パラメーターを見ることにより、バイトを解読する方法を識別します。代表的な符号づけ(charset値)は、 "ASCII" (英語用), "ISO-8859-1" (西ヨーロッパ用), "ISO-8859-8" (ヘブライ語用), "Shift-JIS" (日本語のために) です。

HTML [2][4] は、異なる約30,000の文字符号(すなわちユニコードによって定義されたもの)を許可します。多くでないドキュメントは、その様々な文字符号を使用し、適切な符号づけを選ぶことが、ドキュメントが1文字符号当たり1バイトのみを必要とすることを通常保証します。 (翻訳注：これは、文字集合上の制約をいっているのではなく、ACII文字符号の範囲内であれば、ユニコードを使用した符号化[例．UTF-8, ISO-2022-JP等]を使用しても、１文字１バイトであることを保証することを指しています。) 特別な場合、コード化された範囲外の文字符号は、さらに、数字で表した文字参照として入力する事が出来ます：'Π' は、いかなる符号づけが使用されたとしても、ギリシアの大文字のパイを常に意味します。このことが、UAが、わずかな符号づけだけを扱っても、任意のユニコード文字符号のために準備していなければならない事を必要とすることに、注意して下さい。

フォント符号づけ

フォントは、文字符号(characters) を含んでいません、それは、グリフとして知られている文字符号の描写を含んでいます。グリフは、文字符号の詳細な表現を、輪郭(アウトライン)またはビットマップの形で構成しています。明示的にあるいは暗黙にのいずれかで、各フォントは、テーブルにグリフを関連づけています。 フォントのコード化テーブル(font encoding table)は、それがどの文字符号のための表現か、各グリフに対して伝えます。タイプ１のフォントでは、テーブルが、符号づけベクトル(encoding vector)と呼ばれます。

実際、多くのフォントは、同じ文字符号用のいくつかのグリフを含んでいます。それらのグリフのどれを使用しなければならないかは、語法のルールあるいはデザイナーの優先権のいずれかに左右されます。

アラビア語では、例えば、文字がすべて、単語の最初、中間の中、終わり、あるいは分離して文字が使用されるかどうかに依存して、異なる4つの形を持っていますが、すべての場合において同一の文字符号です。したがって、これらは、HTMLドキュメント内では、１つのみの文字符号ですが、表示される場合、それぞれの拍子で異なって見えます。 (翻訳注：表示時は、文字符号の位置によって４つの形が使い分けられるということ)

様々な代りの形が提供された中から選択するグラフィックデザイナーに、フォントを任すフォントがあります。あいにく、CSS1は、まだそれらの代りを選択する手段を提供しません。現在、それは、常に、そのようなフォントから選ばれるデフォルトの形です。

フォント・セット

単一のフォントでは、ドキュメント内、あるいは単一の要素でさえ、すべての文字符号を表示するのに十分ではないかもしれない問題を処理する為に、 CSS1は、フォントの集合の使用を認めます。

CSS1の中でセットされたフォントは、同じスタイルとサイズのすべてのフォントのリストで、一定の文字符号に対するグリフを含んでいる場合の、信頼できる参照の結果です。数学記号と混合された英文テキストを含んでいる要素は、 2つのフォント(文字、および数字を含んでいる)のフォントの集合(数学記号を含んでいる別のもの)を、必要とするかもしれません。フォントの集合用の選択メカニズムの詳細な記述に関しては、セクション5.2を参照してください。

これは、ラテン語の文字符号、日本語の文字符号、および数学記号を備えたテキストを含むと予期されるテキストに適したフォントの集合の例です。:

BODY { font-family: Baskerville, Mincho, Symbol, serif }

Baskervilleフォント(ラテン語の文字符号だけを備えたフォント)において利用可能な文字符号は、そのフォントから得られ、日本語は、Mincho から取り出され、また、数学記号は、Symbolから手に入ります。他の文字符号も、総称的なフォント・ファミリー'serif'から(たぶん)手に入ります。さらに、'serif'フォント･ファミリーは、１つ以上のその他のフォントが利用不可能な場合、使用されます。

付録D(Appendix D):ガンマ修正

(この付録は、標準ではありませんが有益です。)

あなたがガンマ問題に既に精通していなければ、PNG仕様書[12]で、ガンマ指導書(Gamma Tutorial) を参照してください。

計算では、CRTに表示するUAが、理想的CRTを仮定し、ディザリング(翻訳注:利用可能でない色を擬装する為の技術)することにより引き起こされた、外見上のガンマに関する任意の影響を無視し得ます。下記のものは、UAが、現在のプラットフォーム上で行う必要のある、最小の取り扱いを意味します:

PCは、MS-Windowsを使用しています。: 無し
Unixは、X11を使用しています。: 無し
マックは、QuickDrawを使用しています。: ガンマ1.39を適用 [13] (ColorSync-savvyのアプリケーションは、 sRGB ICC プロフィール[14] を単純に正確な色補正のための色同期へ渡し得ます)
SGIは、Xを使用しています。: /etc/config/system.glGammaValからのガンマ値を適用 (1.70であるデフォルト値; アプリケーションが、Irix 6.2以上で実行される場合、 sRGB ICCのプロフィールを、単純にカラーマネージメントシステムへ渡し得ます)
NeXTは、NeXTStepを使用しています。: ガンマ2.22を適用

"適用されるガンマ"は、 R、G、 B の３つの各々が、R'=R^gamma, G'=G^gamma, B'=B^gammaへ、 OSに手渡される前に、変換されなければならないことを意味しています。

これは、ブラウザの発動ごとに一回、256成分の検索テーブルを組み立てることにより、すばやく実行し得ます。

for i := 0 to 255 do
  raw := i / 255;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

その時には、色属性ごと(ピクセルごとの方がはるかに少ない)の超人的な数学を行う事を回避します。

付録E(Appendix E):CSS1の適用可能性および拡張性

(この付録は、標準ではありませんが有益です。)

CSS1の作業のゴールは、HTMLドキュメント用の単純なスタイル・シート・メカニズムを作成することでした。現在の仕様書は、ウェブ上でスタイル･シートを実現するのに必要な単純性と、豊富な視覚制御に対する著者からの圧力との間のバランスです。 CSS1は提示します:

視覚的なマーク付け置換： HTML拡張、例えば、"CENTER", "FONT"、"SPACER" は、 CSS1スタイル・シートと容易に取り替えられます。
よりよいマーク付け： "FONT"要素を使用した、ポピュラーなスモールキャピタルのスタイルの達成よりも、スタイル・シート中の1つの宣言で十分です。視覚的なマーク付けを比較します:
```
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>
```
スタイル・シートを用いて:
```
H1 { font-style: small-caps }

<H1>Headline</H1>
```
様々な統合レベル： CSS1スタイルの規定は、外部スタイル・シートから取って来るか、 'STYLE'要素に含むか、あるいは、'STYLE'属性の中に置くことができます。最後のオプションは、HTML拡張からの容易な推移を提示しています。
新しい効果：いくつかの新しい視覚的な効果は、ユーザに新しい玩具を提供するために付け加えられました。印刷上の擬似要素と背景プロパティ上の特別な値は、この範疇に分類されます。
スケーラビリティ： CSS1は、テキスト端末から高解像度色ワークステーションまで及ぶ設備で有用です。著者は、スタイル・シートを書き、意図したスタイルが最良の可能な方法で伝わると合理的に確信することができます。

CSS1は提示しません:

ピクセルごとのコントロール： CSS１は、コントロールのレベルに関しての単純性を尊重します。背景イメージとスタイル付けされたHTMLの組合せは強力ですが、ピクセル・レベルのコントロールは、可能ではありません。
著者のコントロール：著者は、あるシートの使用を強要することができません、暗示のみです。
レイアウト言語： CSS1は、テキストフロー、およびオーバーラップするフレームなどを備えた並列の列(multiple columns)を提示しません。
解析ツリー上の豊富なクエリー言語： CSS1は、解析ツリー内の先祖要素を捜すことだけができ、同時に、別のスタイル・シート言語(例えば、DSSSL [6])が、十分なクエリー言語を提示しています。

私たちは、いくつかの方向にCSSの拡張を見出すつもりです:

紙: HTMLドキュメントを印刷するためのよりよいサポート
視覚的でないメディアのサポート：作業は、スピーチおよびブライユ点字出力をサポートするプロパティと対応する値のリストを追加する処理中です。
色の名前：現在サポートされたリストが、拡張されるかもしれません。
フォント：より正確なフォントの列挙システムが、既存のCSS1フォントプロパティを補足すると予想されます。
値、プロパティ：私たちは、ベンダーが、値とプロパティのCSS1セットに対する拡張を提案することを期待しています。この方向へ伸びることは仕様書に重要でありませんが、異なるUAの間の相互運用は重要です。
レイアウト言語：デスクトップ･パブリッシング･パッケージの慣例における、２次元レイアウトに対するサポート。
別のDTD(文書型定義)： CSS1は、いくつかのHTML特定の部分(例えば、'CLASS'特有のステータスと'ID'属性)を持っていますが、別のDTDに同様にうまく適用されるために円滑に拡張されるべきです。

私たちは、CSSが次のものへ展開するとは期待しません：

プログラミング言語

付録F(Appendix F)：17の12月の1996年のバージョンからの変更

(この付録は、標準ではありませんが有益です。)

このドキュメントは、1996年12月17日に最初に公表されたCSS1推薦(CSS1 Recommendation)の改訂されたバージョンです。また、下記のリストは、変更についてすべて記述しています。代替スタイル・シート"errata"の選択によって、変更はすべて、強調されたように見えます (翻訳注：この翻訳文書のスタイル規定に、"errata"の定義を含めてあります)。

私たちは、この改訂版を準備する際の彼らの助けに対して感謝します: Komachi Yushi, Steve Byrne, Liam Quinn, Kazuteru Okahashi, Susan Lesch, Tantek Çelik。

スペリングおよび印刷上の誤り

typo1 [セクション 1.1] 文章:
As as result, old UAs will ignore the 'STYLE' element, but its content will be treated as part of the document body, and rendered as such.

次のものに変更されました(翻訳注：最初の"As as" が"As a"に変更):
As a result, old UAs will ignore the 'STYLE' element, but its content will be treated as part of the document body, and rendered as such.
typo2 [セクション 1.6] 文章:
The second selector matches matches all 'H1' elements that have an ancestor of class 'reddish'.

次のものに変更されました:
The second selector matches all 'H1' elements that have an ancestor of class 'reddish'.
typo3 [セクション 2.1] 文章:
E.g., a style sheet can legally specify that the 'font-size' of an 'active' link should be larger that a 'visited' link, but the UA is not required to dynamically reformat the document when the reader selects the 'visited' link.

次のものに変更されました:
E.g., a style sheet can legally specify that the 'font-size' of an 'active' link should be larger than a 'visited' link, but the UA is not required to dynamically reformat the document when the reader selects the 'visited' link.
typo4, typo5 [セクション 2.3-2.4] 引きずるクォート･マーク(翻訳注：'-')が、 'vertical-align'へ付け加えられました。
typo6 [セクション 4] 欠けていた右丸括弧が加えられました。
typo7 [セクション 4.1] 欠けていたコンマが加えられました。
typo8 [セクション 4.1.2] 本文:
"If more than one of the three is 'auto', and one of them is 'width', than the others..."

次のものに変更されました:
"If more than one of the three is 'auto', and one of them is 'width', then the others..."
typo9 [セクション 5.3.6]　単語 "Examples" が、大文字使用にされました。
typo10 [セクション 5.4.4] 迷った実体が、修正されました( "<length&t;" から "<length>" へ)。
typo11 [セクション 5.5] 本文:
The margin properties properties set the margin of an element.

次のものに変更されました:
The margin properties set the margin of an element.
typo12 [セクション 5.5.25] 不必要なクォート･マークが削除されました。

エラー

error1 [セクション 2.3] 以前の無効な宣言 (font-style: small-caps) は、有効なものに取り替えられました。
error2 [セクション 4] この文章:
CSS1 assumes a simple box-oriented formatting model where each element results in one or more rectangular boxes.

次のものと取り替えられました:
CSS1 assumes a simple box-oriented formatting model where each formatted element results in one or more rectangular boxes.
error3 [セクション 4.1] この文章において:
The top is the top of the object including any padding, border and margin; it is only defined for inline and floating elements, not for non-floating block-level elements.

単語 "object" は、矛盾しない用語を使用するために "element" と取り替えられました。
error4 [セクション 4.1.3] リスト項目の整列が修正されました。
error5 [セクション 4.1.4] 例において、そこには、たった１つのP要素が存在します。そして、この文章:
Note that the margin of the 'P' elements enclose the floating 'IMG' element.

したがって次のものに修正されました(翻訳注：複数のsが取り除かれた):
Note that the margin of the 'P' element enclose the floating 'IMG' element.
error6, error7 [セクション 4.5] ウィンドー・サイズは、キャンパスの幅か高さのどちらか１つの軸に影響を及ぼすことだけができます。
error8 [セクション 5.4.1] 現在の丸括弧内のテキストは、CSS1 プロパティを引き合いに出しています。
error9 [セクション 5.4.1] 次の段落に一致するために、例は修正されました。
error10 [セクション 5.4.8] セクション "行の高さ" は、セクション 4.7 ではなく 4.4, として、現在正確に識別されます。
error11 [セクション 5.5] この文章:
The 'margin' property sets the border for all four sides while the other margin properties only set their respective side.

次のものに修正されました:
The 'margin' property sets the margin for all four sides while the other margin properties only set their respective side.
error12, error13, error14, error15, error16, error17, error18, error19, error20, error22 [セクション 5.5.1-5.5.10] パーセンテージ値は、最も近いブロックレベルの先祖の幅を参照します。以前に定められたような親要素(それはインラインになりうる)ではありません。 (翻訳注：この部分の翻訳のひどいものを見た事があるので、原文を載せておきます) Percentage values refer to width of the closest block-level ancestor, not the parent element (which can be inline) as previously stated.
error21 [セクション 5.5.10] 簡略表記のプロパティは初期の値を持っていませんので、以前に指定された'0'は、それゆえに修正されました。
error23 [セクション 5.5.15] 例における最後の規定は、以前には不法な値を含んでいました('none')。
error24 [セクション 5.6.6] 'list-style' プロパティ上の値の列挙が修正されましたが、構文的あるいは意味的な変更はありません。
error25 [セクション 7.1] ギリシャ語の単語 "kouros" をコード化するために使用される数字で表した文字符合が修正されました。
error26 [Appendix A] (FORM DL)の要素タイプが、 'display: block'の宣言に所属するセレクターのリストに加えられました。
error27 [Appendix B] セクション7への死んでいるリンクは、固定されました。
error28 [Appendix D] このテキスト:
"Applying gamma" means that each of the three R, G and B must be converted to R'=R^gamma, G'=G^gamma, G'=B^gamma, before handing to the OS.

次のものに変更されました:
"Applying gamma" means that each of the three R, G and B must be converted to R'=R^gamma, G'=G^gamma, B'=B^gamma, before handing to the OS.

構造と構成

付録F(Appendix F)、1996年12月17日ののバージョンが加えられたので、変更をすべてリストする。
ステータス・セクション中の段落は、これが改訂されたバージョンであると読者に通知するために付け加えられました。
スタイル・シートは変わりました。
スタイル・シートのサポートを備えた将来のHTML仕様書への参照は、 HTML 4.0参照に更新されました。
参照のURLは更新されました。また、死んでいるリンクが削除されました。
根本的なHTMLマーク付けが改訂されました。

[目次] [メニューに戻る]