ホーム | CSS1とHTM:ブロック構造 | 翻訳について | W3C知的所有権 | 原著別枠


W3C

REC-CSS1-19990109


滝状直列的様式規則集、水準1

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

W3C勧告1996年12月17日、改訂於1999年1月9日


この版: http://www.w3.org/TR/1999/REC-CSS1-19990109
最新版: http://www.w3.org/TR/REC-CSS1
直前版: http://www.w3.org/TR/REC-CSS1-961217
著 者: Hakon Wium Lie (howcome@w3.org)
Bert Bos (bert@w3.org)

この文書の位置付け

この文書はW3C勧告です。これは、 W3C (http://www.w3.org/)会員により再三検討され、この仕様書は使用に適していると言う全体の合意に至ったものです。これは堅固な文書で、他の文書から規範的な参照として参照資料乃至は引用として使用しましょう。W3Cは、この仕様書が広範く採用されることを促します。

最近のW3C勧告や技術文書のリストは、 http://www.w3.org/pub/WWW/TR/にあります。

この文書は、はじめ12月17日1996年にリリースされたものの改訂版です。元からの変更箇所は、 付録Fにあげてあります。


要約

この文書は滝状直列的様式規則集の機構の水準1(CSS1)を特定しています。 CSS1は簡潔な様式規則集(スタイル・シート)で、制作者と読み手が様式(例えば、文字・色彩・余白空間)をHTML文書に添えつけることが出来るようにします。 CSS1言語は人が判読記載ができ、そして普通のデスクトップ・パブリッシング用語で様式の表現を可能にします。[訳者注:滝状直列的

CSS1の基本的な機能のひとつは、様式規則が滝のように流れ落ち、直列に繋がっていることです:制作者は好みのスタイル・シートを添えつけることが出来き、一方読み手も個人的なまた技術上の支障を調整するのに個人的なスタイル・シートを持てます。異なる様式規則間の衝突を解決するための規則が、この仕様書で決められています。

この勧告は、 スタイル・シート 部門でのW3Cの活動によってもたらされたものです。スタイル・シートの背景については、 [1]を参照してください。

目次

要  約
専門用語

1     基本的な考え方
1.1       HTMLでの格納組み込み
1.2       グループ化
1.3       継  承
1.4       選択子としてのクラス:selector
1.5       選択子としてのID  :selector
1.6       文脈付随選択子   :selector
1.7       注釈:コメント・説明や覚書

2     擬似(類似)−クラスと擬似(類似)−要素
2.1       アンカー擬似−クラス
2.2       印刷上の擬似−要素
2.3       最初の行の擬似−要素
2.4       先頭文字擬似−要素
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     滝状直列的様式規則集水準1特性(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:HTML 2.0用のスタイル・シート例
付録B:CSS1文法
付録C:符号化
付録D:ガンマ補正
付録E:CSS1の応用性と拡張性
付録F:1996年12月17日版からの変更箇所


専門用語

属性(寄与する、attribute)
HTML属性
制作者(著者、author)
HTML文書の制作者
ブロック−レベル要素
前後に改行のある要素(例、HTMLの'H1')
キャンバス(画面、canvas)
文書を表示する表示代行手段の描写画面部分
子要素(child element)
SGML [5]専門用語で、 下部要素(サブ要素)
文脈セレクラー
文書構造上での位置に基づいた要素に対応するセレクター。文脈セレクターは幾つかのシンプルなセレクターから成り立っています。例えば、'H1.initial B'と言う文脈セレクターは二つのシンプルなセレクター、 'H1.initial'と'B'、から成り立ています。
シー・エス・エス(CSS)
滝状(カスケーディング)スタイル・シート
シー・エス・エス・ワン(CSS1)
滝状(カスケーディング)スタイル・シート、レベル1。この文書はウェブ用の簡潔なスタイル・シート機序であるCSS1を定義しています。
CSS1の発展した機能(CSS1 advanced features)
この仕様書で説明されているがCSS1の核になる機能(特徴)にはない機能(特徴)。
CSS1核機能(CSS1 core features)
表示代行手段に適合する全てのCSS1で要求されているCSS1部分。
CSS1パーサー(CSS1 parser)
CSS1スタイル・シートを読みとる表示代行手段
宣言(declaration)
特性(プロパティー)(例、'font-size')とそれに対応する値(例、'12pt')。
デザイナー(設計者)(designer)
スタイル・シートの設計者  注:服装デザイナーではないですよ位の意味。
文書(document)
HTMLの文書  注:上と同じで、法律文書ではないですよ位の意味。
要素(element)
HTMLの要素  注:上と同じで、化学での要素ではないですよ位の意味。
要素型(element type)
SGML [5]専門用語での包括的な識別子(generic identifier)
仮想タグ列(fictional tag sequence)
擬似−クラスや擬似要素も振る舞いの説明道具
フォント(書体)サイズ(font size)
フォント(書体)が設計されるサイズ。典型的には、フォント(書体)のサイズはディセンダー(p,q.jなどa,b,cより下に突き出た部分)のある背の低いフォント(書体)の底辺からアッセンダー(b,hなどa,bより上に突き出た部分)や(選択性の)発音区別符号のある最も背の高い文の字の先端迄の距離と等価です。
エイチ・ティー・エム・エル(HTML)
ハイパーテキスト言語[2]で、SGMLのいち応用(アプリケーション)。
HTML拡張(HTML extension)
表示代行手段の販売者が導入するマーク付けで、多くは視覚的な効果をサポートします。"BGCOLOR"属性の様な"FONT"・"CENTER"・"BLINK"要素はHTML拡張の例です。CSSの目的はHTML拡張に代わるものを提供することです。
インライン要素(inline element)
前後で改行しない要素(例、HTMLの'STRONG')
内部次元(intrinsic dimensions)
要素自体によって定義されるので、廻りから強いられない幅と高さ。この仕様書で全ての置換要素は−−唯置換要素だけが−−内部次元がついていると想定しています。
親要素(parent element)
SGML[5]専門用語で、 要素を含むこと
擬似要素(pseudo-element)
擬似要素は、構造的な要素ではなく印刷体裁用な項目に当てるCSSセレクターで使われます(例えば、要素の第一行)。
擬似−クラス(pseudo-class)
擬似−クラスは、HTML資源に外部情報(例えば、アンカーが訪問済みか否かということ)で要素を分類できるようにするのにCSSセレクターで使われます。
特性(property)
様式体裁用のパラメーターでCSSを通して作用します。この仕様書は一連の特性やそれに対応する値を定義しています。
読み手(reader)
その人用に文書を表示する。
置換要素(replaced element)
CSSフォーマッターだけが内部次元を知っている要素。'IMG'・'INPUT'・'TEXTAREA'・'SELECT'そして'OBJECT'要素がHTMLでの置換要素の例です。例えば、'IMG'要素の内容はSRC属性が指し示す画像によって置き換えられます。CSS1は内部次元がどのようにして探されるかを定義しません。
規則(rule)
宣言(例、'font-family: helvetica')やそのセレクター(例、 'H1')。
セレクター(selector)
どんな要素が対応する規則に適用されるかを識別する文字列。セレクターは単純なセレクター(例、'H1')か幾つかの単純なセレクターからなる文脈セレクター(例、'H1 B')です。
エス・ジー・エム・エル(SGML)
標準的一般的なマーク付け言語 [5]で、HTMLはその応用(アプリケーション)です。
単純なセレクター(simple selector)
要素型と属性、または要素型乃至は属性に基づく要素に一致するセレクターで、文書構造上の要素の位置でない。例えば、'H1.initialは単純なセレクターです。
スタイル・シート(style sheet)
規則集
ユ・エイー(UA)
表示代行手段で、しばしばウェブ・ブラウザr乃至はウェブ・クッライアントと言う。
ユーザー(user)
読み手(reader)と同義語。
重み(ウェイト weight)
規則の優先度

この仕様書のテキストでは、一重引用符('...') はHTMLやCSSからの引用を指しています。

1   基本的概念(Basic Conception)

単純なスタイル・シートを設計するのは容易です。多少のHTMLや幾つかのデスクトップ・パブリッシング専門用語をしる必要はあります。例えば、'H1'要素のテキスト色を青に設定するには以下のように記載します:

  H1 { color: blue }

上の例は、単純なCSS規則です。規則は主要な二つの部分から成り立っています: セレクター('H1')と宣言('color: blue')です。この宣言は更に二つの部分から成り立っています:特性('color') と値('blue')です。上の例はHTML文書を表示に必要な特性の内のただ一つだけに影響を及ぼすように試みられていますが、それ自身はスタイル・シートに適っています。別のスタイル・シートと結び付いて(CSSの基本的な特徴機能は、スタイル・シートを結び付けることにあります)、文書の最終的な描写を決めます。

セレクターは、HTML文書とスタイル・シートとが結合する所で、全てのHTML要素型はセレクターになり得ます。HTML要素型は、HTML仕様書 [2]で定義されています。

'color'特性は、HTML文書描写を決める50在る特性の一つです。 特性とその取り得る値の一覧表はこの仕様書にあります。

HTML制作者は、文書に特別な様式(スタイル)を示唆したい場合にのみ、スタイル・シートを書く必要性が生じます。各表示代行手段(UA、時には"ウェブ・ブラウザ"や"ウェブ・クライアント"と言いますが)は、それなりの理由はあるのですが−−問題もある−−やり方で文書を表示するスタイル・シートを初期値として持っています。 付録 Aに、HTML 2.0仕様書 [3]に示唆されている通りにHTML文書を表現するのと同じ、スタイル・シートがあります。

CSS1言語の正式な文法は、 付録 Bで定義されています。

1.1   HTMLでの格納組み込み(HTMLContainment in HTML)

スタイル・シートで表現に影響を与えるために、表示代行手段(UA)はスタイル・シートが在ることに気付かなければなりません。HTML仕様書 [2]は、HTMLをスタアイル・シートとどのように結合するのかを定義しています。従ってこの仕様書は、情報提供はしますが規範的ではありません。

<HTML>
  <HEAD>
    <TITLE>title</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css" 
      HREF="http://style.com/cool" TITLE="Cool">
    <STYLE TYPE="text/css">
      @import url(http://style.com/basic);
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Headline is blue</H1>
    <P STYLE="color: green">While the paragraph is green.
  </BODY>
</HTML>

この例で、スタイル・シートをHTMLと結び付ける四つのやり方を示しています:外部スタイル.シートへのリンクする'LINK'要素・'HEAD'要素内に在る'STYLE'要素・CSS '@import'記法を使用した移入スタイル・シートそして'BODY'内に来る要素の'STYLE'属性を使うというやり方です。

'LINK'要素は読み手が選択できる代替えスタイル・シートを参照します、一方移入スタイル・シートは自動的に残りのスタイル・シートと合併します。

従来表示代行手段(UAs)は未知のタグを黙って無視しています。 その結果、旧式の表示代行手段(UAs)は'STYLE'要素を無視しますが、その内容は文書ボディの一部として取り扱い表示します。移行期間中はSGMLコメントを使って、'STYLE'要素内容を隠しておきましょう;

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

DTD( [2]で定義されているように)で'STYLE'要素は、"CDATA"として定義されていて、SGML適合パーサーは上記のスタイル・シートを除去されるべきコメントであるとみなします。

1.2   グループ化(Grouping)

スタイル・シートの大きさを減少するために、コンマ区切りのリストでセレクターをグルーピ化することができます:

  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   継承(Inheritance)

最初の例で、'H1'要素は青に設定されていました。中に強調された要素を持った'H1'要素があると仮定しています:

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

もし、'EM'要素に何ら色が指定されていないなら、強調された"is" は親要素の色を継承し、それは青に見えます。他の様式特性は同じ様に継承され、例えば 'font-family''font-size'です。

文書用の"初期の"スタイル・シートを設定するには、全ての可視的な要素がくる要素に特性を設定します。HTML文書では、'BODY'要素がこの機能を提供します:

  BODY { 
    color: black;
    background: url(texture.gif) white;
  }

制作者が'BODY'を省略(これは正しい)しても、これは作動し、と言うのはHTMLパーサーは見えないタグを推定するからです。上の例はテキストの色を黒で背景は画像と設定しています。この背景は、画像が得られない場合、白です(これについての詳しいことは、セクション5.3参照)。

或る種のスタイル・シートは、親要素から子要素へ継承されません。これはこのケースではない理由が直観的に分かるものが殆どで、例えば 'background'特性は継承されませんがこの親要素の背景は初期値によって明らかです。

特性の値が他の特性のパーセントの場合:

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

パーセントの値を許す各特性では、それがどの特性を参照しているのかは定義されています。'P'の子要素は 'line-height'(例 12pt)の計算された値を継承しますが、 パーセンテージを継承しません。

1.4   セレクターとしてのクラス(Class as selector)

要素への制御の強度を増大するには、新しい属性がHTML [2] に加えられています:'CLASS'。'BODY'要素内の全ての要素は分類でき、クラスはスタイル・シートで指定されることができます:

<HTML>
 <HEAD>
  <TITLE>Title</TITLE>
  <STYLE TYPE="text/css">
    H1.pastoral { color: #00FF00 }
  </STYLE>
 </HEAD>
 <BODY>
  <H1 CLASS=pastoral>Way too green</H1>
 </BODY>
</HTML>

普通の継承規則は、クラス化された要素に適用されます;これらは文書構造上のその親からその値を継承します。

セレクターでタグ名を省略することによって、同じクラスを持った要素すべてにアドレスを指定できます:

  .pastoral { color: green }  /* CLASS pastoralをもった全ての要素 */

ただ一つのクラスがセレクターにつき特定されえます。'P.pastoral.marine'は、従って、CSS1上妥当でないセレクターです(文脈セレクター、以下で説明しますが、単純なセレクターにつき一つのクラスを持つことができます)。

CSSはクラス属性に非常に大きな力を与えているのでクラスがどんなHTML要素に設定されているかを問題にさえしません−−どんな要素でも殆ど別のものを模倣できます。この力に頼ることは薦められません、と言うのは普遍的な意味(HTML要素)を持つ構造レベルを取り去ることになるからです。クラスに基づく構造は、クラスの意味が充分に合意されいる、限られたドメイン内でのみ有益です。

1.5   セレクターとしてのID(ID as selector)

HTML[2]も'ID'属性を導入し、文書を通してユニークな値を持つを取ることになっています。従って、それはスタイル・シートとして特別に重要なもので先行する'#'で指定できます。

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

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

上の例で、最初のセレクターは'ID"属性値故に'P'要素と一致しています。二番目のセレクターは要素型('H1')とID値の両方を特定していて、それ故に'P'要素と一致しません。

セレクターとしてID属性を使うことによって、前要素上でスタイル・シート特性を設定することができます。スタイル・シートは文書構造を強化するよう設計されますが、この機能は制作者がHTMLの構造要素の利点を取らないで画面上でのみえのいい表現をする文書を作成することを許すことになります。スタイル・シートのこのような使い方は止めましょう。

1.6   文脈内セレクター(Contextual selectors)

継承はCSS設計者のタイプを節約します。全てのスタイル・シート特性の代わりに、初期を作成し例外を並べて置くことができます。'H1'内の'EM'要素に異なる色を与えるには、以下のように特定します:

  H1 { color: blue }
  EM { color: red }

このスタイル・シートは効果的で、'H1'内外で強調されるセクションは全て赤になります。'H1'内の'EM'だけが赤になるようにしたいなら、これには以下のように特定します:

  H1 EM { color: red }

セレクターは、公開された要素のスタック(後入先出列)での検索パターンと言え、この種のタイプのセレクターは文脈セレクターとして参照されます。文脈セレクターは、幾つかの単純セレクターからなり、空白文字で区切られています(ここまでに説明されたセレクターは全て単純セレクターです)。最後の単純セレクター(このケースでは'EM'要素)に一致する要素だけがアドレスを指定され、その検索パターンが一致した場合だけです。CSS1での文脈セレクターは祖先関係を探しますが、他の関係(例、親−子)は後のバージョンで導入されるでしょう。上の例では、'EM'が'H1'の子孫つまり'EM'が'H1'要素内にあれば、、検索パターンは一致します。

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

ここでは最初のセレクターは、少なくとも一つの'UL'祖先を持った'LI'要素と一致します。二番目のセレクターは、最初の下部組つまり少なくとも二つの'UL'を持った'LI'要素と一致します。衝突は二番目のセレクターがより特異的であることによって解決されます。これについての詳しいことは、 カスケーディング順序(cascading order)のセクション3.2を参照してください。

文脈セレクターは要素タイプ・クラス属性・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   注釈(コメント)(Comments)

CSSスタイル・シートでのコメン文は、Cプログラム言語 [7]のコメントと同じで:

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

コメントは入れ子することはできません。CSS1パーサーにとって、コメントは空白文字と同じです。

[#^目次へ]

2   擬似−クラスと擬似−要素(Pseudo-classes and pseudo-elements)

CSS1では、スタイルは通常文書構造上の位置に基づいた要素に添え付けられます。この単純な模型モデルで幅広く変化に富んだスタイルにも充分ですが、或種のありふれた効果をカバーできません。擬似−クラスと擬似−要素の概念が、CSS1で外部情報を書式過程に反映できるようにするアドレスを拡張します。[訳注: 擬似(pseudo)とは?

擬似−クラスと擬似−要素はCSS1セレクターで使えますが、HTML資源には存在しません。むしろ、スタイル・シートでのアドレシングの為に使われる或種の状況下で表示代行手段によって挿入されます。振る舞いを記述する便宜的なやり方ということで、「クラス」や「要素」として参照されます。その振る舞いは仮想タグ列によってより特異的に定義されます。

擬似−要素は要素の補足部分(サブ部分)にアドレスするために使われ、一方擬似−クラスはスタイル・シートを異なった要素タイプ間で区別するができるようにします。

2.1   アンカー擬似−クラス(Anchor pseudo-classes)

表示代行手段は、通常新しく訪問されたアンカーを古いものと異なって表示します。CSS1では、これは'A'要素の擬似−クラスを経て取り扱います:

  A:link { color: red }       /* 未訪問リンク */
  A:visited { color: blue }   /* 訪問済リンク */
  A:active { color: lime }    /* 始動時リンク */

'HREF'属性のある'A'要素は、一つにまとめられたり、この中の一つだけにします(いつまり、ターゲット・アンカーは影響されません)。表示代行手段は、一定期間立つと「訪問された」からたんなる「リンク」に要素を変える選択をとります。「作動中」は現在読み手によって選択されている状態のものです(例、マウス・ボタンを押している)。

アンカー擬似−クラスは、クラスが手動で挿入されたようになります。表示代行手段は、アンカー擬似−クラスの状況によって現在表示されている文書を書き換えることを要求されていません。つまり、スタイル・シートは、「作動中」リンクの文字サイズが「訪問済み」リンク より大きくなるべきであると正しく特定されても、表示代行手段は読み手が「訪問済み」リンクを選択した場合文書を動的に書き換えることを要求されていません。

擬似−クラス・セレクターは、普通のクラスと一致しませんし、その逆もあります。以下の例のスタイル規則は従ってなんら影響をうけません:

  A:link { color: red }

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

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

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

上の二つのセレクターは、CSS1上同じ要素を選択します。

擬似−クラス名は、大文字小文字を区別します。

擬似−クラスは、文脈セレクターで使うことができます:

  A:link IMG { border: solid blue }

また、擬似−クラスは普通のクラスとも結合されることができます:

  A.external:visited { color: blue }

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

上の例のリンクが訪問されていたら、青で表示します。普通のクラス名はセレクターでは擬似−クラスより優先されることに注意して下さい。

2.2   印刷上の擬似−要素(Typographical pseudo-elements)

普通の印刷上の効果は、構造的な要素と結び付かなくて、むしろキャンバス画面での書式として印刷上項目と結び付きます。CSS1ではそのような二つの印刷上項目が擬似−要素を経て割り当てられます:要素の最初の行と最初の文字です。

CSS1コアー: 表示代行手段は、セレクターに':first-line'や':first-letter'を持った規則を全て無視し、代わりに擬似−要素の特性のサブセットだけをサポートするかもしれません( セクション 7を参照)。

2.3   最初の行の擬似−要素(The 'first-line' pseudo-element)

最初の行の擬似−要素は、キャンバス画面上の書式として最初の行に特別な様式を適用するのに使われます:

<STYLE TYPE="text/css">
  P:first-line { font-variant: small-caps }
</STYLE>

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

テキスト基本表示代行手段上では、以下のように書式化されます:

  THE FIRST LINE OF AN
  article in Newsweek.

上の例の仮想タグ列では:

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

最初の行の終了タグは、キャンバス画面上で書式化されるように、最初の行の終わりに挿入されます。

最初の行の擬似−要素は、ブロック−レベル要素にのみ添え付けることができます。

最初の行の擬似−要素はインライン要素に似ていていますが、或る種の制限があります。以下の特性だけが最初の行要素に適用されます: フォント(書体)特性(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   先頭文字擬似−要素(The 'first-letter' pseudo-element)

先頭文字擬似−要素は、頭文字"initial caps"や垂れ下がり文字"drop caps"に使われ、通常の印刷上の効果です。浮動廻り込み'float'特性がない場合はインライン要素に似ていますが、そうでない場合は浮動廻り込み要素に似ています。先頭文字擬似−要素を適用するプロパテヒーがあります: フォント(書体)特性font properties (5.2)・ 色彩と背景特性color and background properties (5.3)・ テキスト飾り'text-decoration' (5.4.3)・ 垂直配置'vertical-align' (廻り込みがない場合5.4.4)・ テキスト変換'text-transform' (5.4.5)・ 行の高さ'line-height' (5.4.8)・ マージン特性margin properties(5.5.1-5.5.5)・ パディング・特性padding properties(5.5.6-5.5.10)・ ボーダー特性border properties (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>

テキスト基本表示代行手段は先頭文字擬似−要素をサポート(恐らくしていないでしょう)しているなら、上の例は以下のように書式化されます:

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

先頭文字擬似−要素は内容(例、頭文字)についてタグ付けをし、一方最初の行擬似−要素開始タグは添え付けられる要素の開始タグ直後に挿入されていることに注意してください。

表示代行手段は、先頭文字要素内にどんな文字がきているのかを定議します。通常は、最初の文字に先行する引用符は含まれるべきです:

backslash

  ||   /¥    bird in     [上は、バックスラッシュ記号サポートiso-8859-1
      /  ¥   the hand     での表示画像]
     /----¥  is worth
    /      ¥ two in
  the bush," says an 
  old proverb.

パラグラフがその他の引用(例、大括弧や省略符号)乃至は通常文字とはみなされない(例、数値・数学記号)文字ではじまっている場合、先頭文字擬似−要素は大概無視されます。

言語によっては、或る種の文字組み合わせをどのように取り扱うかについて特別な規則を持っています。例えばオランダ語では、"ij"組の文字が単語のはじめにきたら、両者とも先頭文字擬似−要素内にあるとみなすべきです。

先頭文字擬似−要素は、ブロック−レベル要素にのみ添え付けられることができます。

2.5   セレクター内の擬似−要素(Pseudo-elements in selectors)

文脈セレクターでは、擬似−要素はセレクターの終わりだけで許されます:

  BODY P:first-letter { color: purple }

擬似−要素はセレクター内のクラスと組み合わせることができます:

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

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

上の例で、「'CLASS=initial' red」のある全ての'P'要素の先頭文字をつくります。クラス乃至は擬似−要素と組み合わすと、擬似−要素はセレクターの終わりで特定されなければなりません。ただ一つだけの擬似−要素がセレクター毎に特定され得ます。

2.6   多元擬似−要素(Multiple pseudo-elements)

幾つかの擬似−要素が組み合わされ得ます:

  P { color: red; font-size: 12pt }
  P:first-letter { color: green; font-size: 200% }
  P:first-line { color: blue }

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

この例では各'P'要素も先頭文字は、24ポイントの文字サイズで緑です。最初の行の後(キャンバス画面で書式化されてるいよう)は、青で、一方後のパラフラフは赤です。改行が単語の"終わり"の前で起こったら、仮想タグ列は:

  <P>
  <P:first-line>
  <P:first-letter> 
  S 
  </P:first-letter>ome text that 
  </P:first-line> 
  ends up on two lines 
  </P>

先頭文字要素が最初の行要素内にきていることに注意して下さい。最初の行で設定された特性は、先頭文字によって継承されますが、同じ特性が先頭文字に設定されていると上書きされます。

擬似−要素が真の要素を解体すると必要な別のタグが仮想タグ列で再生されなければなりません。例えば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   滝状の流れ:カスケード(The cascade)

CSS1では、複数のスタイル・シートが同時に描写に影響します。この機能には二つの主な理由があります:モジュール(基準単位)方式・制作者/読み手との均衡です。

モジュール(基準単位)方式
スタイル・シート設計者は幾つかの(部分的な)スタイル・シートを組み合わせて、冗長さを減らせます:
  @import url(http://www.style.org/pastoral);
  @import url(http://www.style.org/marine);

  H1 { color: red }     /* override imported sheets */
	
制作者/読み手との均衡
読み手と制作者両者は、スタイル・シート経由の描写に影響を与えます。均衡を保には、両者が同じスタイル・シート言語つまりウェブの基本的な機能を反映するものを使うことです:皆が一つの発行者になるわけです。表示代行手段は個人的なスタイル・シートの参照機序を選べます。

時には描写に影響するスタイル・シート間で衝突が生じることもあります。各スタイル・シートが持っている重み(優先度)に基づいて、衝突は解決されます。初期値では、読み手の優先度は制作者の文書の規則の優先度より低いもので、読み込んだ文書のスタイル・シートと読み手の個人的なシートの間に衝突が生じたら制作者の規則が使われます。読み手も制作者も両者は、表示代行手段の初期値をを上書きできます。

移入(取り込まれた)スタイル・シートも、移入された順番で、以下で定義される流れ規則(カスケーディング規則)に従って、お互いに直列(滝状)に繋がれます。スタイル・シート自身で特定された規則はどんなものでも、移入されたスタイル・シートの規則を上書きします。言い換えると移入されたスタイル・シートは、スタイル・シート自身の規則よりも滝状直列順位上低いということです。移入されたスタイル・シートは自身も移入でき、他のスタイル・シートを繰り返し上書きできます。

CSS1では全ての'@import'声明は、如何なる宣言よりも前で、スタイル・シートの始めに来なければなりません。これはスタイル・シート自身の規則が移入されたスタイル・シートの規則を上書きすることを見るのを容易にします。

3.1   重要('important')変更

スタイル・シートは宣言の重み(優先度)を増すことができます:

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

上の例で、最初の三つの宣言は優先度を増し、一方最後の宣言は通常の優先度です。

重要宣言のある読み手の規則は、制作者の通常の宣言規則を上書きします。重要宣言した制作者の規則は、重要宣言した読み手の規則を上書きします。

3.2   滝状順位:カスケード順位(Cascading order)

衝突規則は、CSS機序に内部化されています。要素/特性用の値を探し出すのに。以下の手順(アルゴリスム)に従わなければなりません:

  1. 問題になっている要素/特性に適用する宣言全てを探す。セレクターが問題の要素と一致したら宣言は適用されます。宣言が一つとして適用されないなら、継承された値が適用されます。継承される値(これは継承されない'HTML'要素や特性の場合で)が一つもないなら、初期値が使われます。
  2. 明確な優先度による宣言を並べます:'!important'とマークされた宣言はマークされていない(普通の)宣言より優先されます。
  3. 起源によって並べます:制作者のスタイル・シートは、表現代行手段の初期値を上書きする読み手のスタイル・シートを上書きします。移入されたスタイル・シートは、移入された先のスタイル・シートと同じ起源を持っています。
  4. セレクターの特異性で並べます:より特異的なセレクターは、一般的なものを上書きします。特異性を探すには、セレクターのID属性の数を数え(a)、セレクターのクラス属性の数を数え(b)そしてセレクターのタグ名の数を数え(c)ます。三つの数(大きな基盤のあるシステム数)を繋ぎ合わせて特異性を求めます。例として:

      LI            {...}  /* a=0 b=0 c=1 -> specificity(特異性) =   1 */
      UL LI         {...}  /* a=0 b=0 c=2 -> specificity(特異性) =   2 */
      UL OL LI      {...}  /* a=0 b=0 c=3 -> specificity(特異性) =   3 */
      LI.red        {...}  /* a=0 b=1 c=1 -> specificity(特異性) =  11 */
      UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity(特異性) =  13 */ 
      #x34y         {...}  /* a=1 b=0 c=0 -> specificity(特異性) = 100 */ 
    

    擬似−要素や擬似−クラスは、それぞれ普通の要素やクラスとして数えます。

  5. 特定された順位で並べます:二つの規則が同じ優先度なら、後で(最新の)特定されたものが優先します。移入されたスタイル・シートの規則はスタイル・シート自身の規則より前(旧)とみなされます。

同じ要素/特性結合に適用される規則で他のものよりも高い優先度を持った規則があると、特性の値の検索は終わります。

この戦略では、制作者のスタイル・シートに、読み手のものより、非常に高い優先度を与えます。従って、読み手は或る種のスタイル・シート、例えばプール・ダウン・メニュー、の影響を切る能力をもつことが重要です。

要素の'STYLE'属性での宣言(例は セクション 1.1参照)は、スタイル・シートの終わりで特定されているID基盤セレクターの宣言と同じ優先度を持っています:

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

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

上の例で、'P'要素の色は赤です。特定性は両宣言で同等ですが、'STYLE'属性での宣言が'、滝状直列規則の数5ですので、STYLE'要素のそれを上書きします。

表示代行手段は、別の様式上のHTML属性尊重する方を選ぶかもしれません、例えば'ALIGN'です。その場合これらの属性は、1に等しい特異性の対応するCSS規則に翻訳されます。この規則は制作者のスタイル・シートの始めにあり、引き続くスタイル・シート規則によって上書きされるとみなします。移行期でのこの考え方は、様式規則とスタイル・シートとの共存を容易にします。

[#^目次へ]

4 書式としての模範(Formatting Model)

CSS1には簡潔な箱型書式模型を想定していて、 各書式化された要素は一つ以上の長方形の箱内に配置されます('display'値を持った要素は書式化されなく、従って箱になりません)。全ての箱(ボックス)は中心に内容を持ち、選択性であるパディング(padding)・境界(border)そして余白(マージン、margin)領域で囲まれています。

    _______________________________________
   |                                       |
   |         余白 margin (透明)          |
   |   _________________________________   |
   |  |                                 |  |
   |  |          境界線 border          |  |
   |  |   ___________________________   |  |
   |  |  |                           |  |  |
   |  |  |       詰め物 padding      |  |  |
   |  |  |   _____________________   |  |  |
   |  |  |  |                     |  |  |  |
   |  |  |  |     内容 content    |  |  |  |
   |  |  |  |_____________________|  |  |  |
   |  |  |___________________________|  |  |
   |  |_________________________________|  |
   |_______________________________________|

            |       要素の幅      |

   |          箱(ボックス)の幅           |

マージン・ボーダー・パディングは、それぞれ margin(5.5.1-5.5.5)・ padding(5.5.6-5.5.10)そして border(5.5.11-5.5.22) 特性で設定します。パディング領域は要素自体として同じ背景を使います (background特性で設定します5.3.2-5.3.7))。ボーダーの色彩と様式(スタイル)は、border特性で設定します。マージンは必ず透明で、それ故親要素は透き通って見えるわけです。

箱のサイズは、要素幅(例、整形文や画像)・パディング・ボーダー・マージン各領域の合計になります。

書式の視点から、主な二つの要素型があります:ブロックーレベルとインラインです。

4.1   ブロックーレベル要素

'block'乃至は'list-item'の'display'値のある要素は、 ブロック−レベル要素です。また、回り込り回避要素('none'以外の'float'値をもった要素)はブロック−レベル要素とみなされます。

以下の例で、マージンやパディングが二つの子を持った'UL'要素をどの様に書式化するかを示しています。図を単純化するために、ボーダーはありません。また、この例での単一文字「定数」は正しい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>一番目のリスト項目
      <LI>二番目のリスト項目
    </UL>
   _______________________________________________________
  |                                                       |
  |        A      UL margin (transparent:透明)           |
  |    _______________________________________________    |
  | D |                                               | B |
  |   |            E   UL padding (赤)                |   |
  |   |    _______________________________________    |   |
  |   | H |                                       | F |   |
  |   |   |    a   LI margin (transparent,        |   |   |
  |   |   |        so red shines through)         |   |   |
  |   |   |        透明なので赤が見えます         |   |   |
  |   |   |    _______________________________    |   |   |
  |   |   | d |                               | b |   |   |
  |   |   |   |    e    LI padding (青)       |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   | h     一番目のリスト項目    f |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   |    g                          |   |   |   |
  |   |   |   |_______________________________|   |   |   |
  |   |   |                                       |   |   |
  |   |   |     max(a, c)                         |   |   | <- note the max
  |   |   |    _______________________________    |   |   |
  |   |   |   |                               |   |   |   |
  |   |   | d |    e    LI padding (青)       |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   | h     二番目のリスト項目    f |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   |    g                          |   |   |   |
  |   |   |   |_______________________________|   |   |   |
  |   |   |                                       |   |   |
  |   |   |   c    LI margin (transparent,        |   |   |
  |   |   |        so red shines through)         |   |   |
  |   |   |         透明なので赤が見えます        |   |   |
  |   |   |_______________________________________|   |   |
  |   |                                               |   |
  |   |    G                                          |   |
  |   |_______________________________________________|   |
  |                                                       |
  |   C                                                   |
  |_______________________________________________________|

技術的に、パディングとマージン・特性は継承されません。しかしこのサンプル例が示すように、要素の位置は祖先や兄弟に相対的で、それ故これらの要素のパディングとマージン・特性は子に影響を与えます。

上の例でボーダー(境界線)があれば、パディングとマージンの間に表われます。

以下の図式は、役に立つ専門用語です:

                             ------------------ <<<<<-- 先端
                             先端余白   margin
                             ------------------
                             先端境界線 border
                             ------------------
                             先端詰め物 padding
                               +-------------+ <<<---- 内側先端
    |        |        |        |             |        |        |        |
    |--左側--|--左側--|--左側--|--  内 容 --|--右側--|--右側--|--右側--|
    |  余白  | 境界線 | 詰め物 |             | 詰め物 | 境界線 |  余白  |
    |        |        |        |             |        |        |        |
                               +-------------+ <<<---- 内側下端
    ^                          ^             ^                          ^
    ^                          ^             ^                          ^
左外側端                 左内側端           右内側端                右外側端
                                  下端詰め物
                               ---------------
                                 下端境界線
                               ---------------
                                 下端余白
                               --------------- <<<<<-- 下端

左外端(left outer edge)は、勘定に入れられたパディングやマージンのある要素の端です。 左内端(left inner edge)は、パディング・ボーダーそしてマージンの内側の内容だけの端です。右も同様です。 先端(top)は、パディング・ボーダーそしてマージンを含んだ要素の先端です;これはインラインや廻り込み要素にだけ定義され、廻り込みをしないブロック−レベル要素では定義されません。 内側先端(inner top)は、パディング・ボーダーそしてマージンの内側の内容だけの先端です。 下端(bottom)は、 パディング・ボーダーそしてマージンの外側の要素だけの底の部分です;これはインラインや廻り込み要素にだけ定義され、廻り込みをしないブロック−レベル要素では定義されません。 内側下端(inner bottom)は、パディング・ボーダーそしてマージンの内側の要素の底の部分です。

要素の幅(width)は、その内容の幅で、すなわち左内側端と右内側端の間の距離です。 高さ(height)は、その内容の高さで、すなわち内側先端と内側下端の間の距離です。

4.1.1   垂直書式(Vertical formatting)

非浮動のブロク−レベル要素の幅は、箱模型を取り囲む端までの最短距離を特定します。二つ以上の隣接する垂直のマージン(つまり、その間にボーダー・パディングや内容がない)は、マージン値の最大を使うと押しつぶされます。多くのケースで垂直マージンを押しつぶすと、その結果は設計者が期待したものに視覚的に満足できまた近くなります。上の例で、最初の'LI'要素の'margin-bottom'マージン下端と二番目のLI要素の'margin-top'マージン先端の最大値を使って、二つの'LI'要素間のマージンは近付きます。同じ様に、'UL'と最初の 'LI'要素('E'定数)の間のパディングがゼロになると、ULとLI要素のマージンは接近させられます。

負のマージンのケースで、負の隣接するマージンの最大絶対値が、正の隣接マージンの最大値から差し引かれます。正のマージンがないなら、負の隣接マージンの最大絶対値がゼロから差し引かれます。

4.1.2   水平方向書式(Horizontal formatting)

非浮動回り込みやブロックーレベル要素の水平方向位置は、七つの特性によって決められます: 'margin-left'マージン左・ 'border-left'ボーダー左・ 'padding-left'パディング左・ 'width'幅・ 'padding-right'パディング右・ 'border-right'ボーダー右そして 'margin-right'マージン右です。 これらの合計は必ず親要素の幅と等しくなります。

初期では要素の幅'width'は自動'auto'です。その要素が置換要素でない場合'auto'は、幅は表示代行手段によって計算され上に述べて七つの特性の合計が親要素幅と同じなること、を意味します。その要素が置換要素である場合幅の自動という値は要素の内部幅に自動的に置き変わらせられます。

七つの特性の三つは'auto': 'margin-left'・'width'そして'margin-right'に設定させられます。置換要素では、'width'での'auto'値は内部幅によって置き変わらせられ、これについては二つ'auto'値になりえます。

幅は、負でない表示代行手段が定義する最小の値を持っています(それは要素要素で異なり、別の特性と関わることさえあります))。明示的に設定されていたり自動になっていてその下の規則が小さすぎるるため幅が制限以下になったら、その値は代わりに最小値に置き代えられます。

'margin-left'・'width'乃至は'margin-right'の一つだけが自動'auto'であるなら、表示代行手段は七つの合計を親の幅と等しくする特性値を割り当てます。

特性がどれも自動でないなら、'margin-right'は'auto'に割り当てられます。

三つの内一つ以上が自動でその内の一つが幅'width'であるなら、 その場合その他('margin-left'と'margin-right'また'margin-left'か'margin-right')はゼロに設定され、幅は七つの合計を親の幅に等しくする値をとります。

そうでない、'margin-left'と'margin-right'の両者が自動'auto'なら、等しい値に設定されます。これは親内の要素を中央化します。

自動がインライン乃至は浮動要素内で七つの特性の一つの値として設定されているなら、ゼロに設定されたように取り扱われます。

垂直マージンと違って、水平マージンは押し潰されません。

4.1.3   リスト項目要素(List-item elements)

'display'特性値'list-item'リスト項目を持った要素は、ブロックーレベル要素として書式化されますが、リスト項目マーカーが優先します。マーカーのタイプは、'list-style'リスト様式特性によって決められます。マーカーは、 'list-style'リスト様式特性の値に従って、配置されます。

  <STYLE TYPE="text/css">
    UL         { list-style: outside }
    UL.compact { list-style: inside }
  </STYLE>
  
  <UL>
    <LI>first list item comes first
    <LI>second list item comes second
  </UL>

  <UL CLASS=COMPACT>
    <LI>first list item comes first
    <LI>second list item comes second
  </UL>

上の例は以下のように書式化されるでしょう:

  * first list item 
    comes first

  * second list item
    comes second


  * first list
  item comes first

  * second list
  item comes second

右−左テキストでは、マーカーは箱模型の右にきます。

4.1.4   浮動回り込み要素(Floating elements)

'float'特性を使って、要素は要素の普通の流れを浮動し回り込むと宣言でき、なをブロック−レベル要素として書式化されています。例えば、画像の'float'特性を'left'左に設定して、その画像は別の要素のマージン・パディング・ボーダーに届く迄左に移動させられます。普通の流れは、右側に沿って折り返します。要素のマージン・パディング・ボーダー自体は保存され、マージンは隣接する要素のマージンで消失しません。

浮動要素は、以下の制約の下で対象を配置します(用語の説明は セクション 4.1を参照):

  1. 左浮動要素の左外側端は、親要素の左内側端の左にこないかもしれない。
  2. 左浮動要素の左外側端は、前の(HTML資源で)全ての左浮動要素の右外側端の右にくるか、前者の先端が後者の下端より下でなければなりません。右浮動要素も同様に似ています。
  3. 左浮動要素の右外側端は、その右にあるどんな右浮動要素の左外側端の右にこないでしょう。右浮動要素も同様ににています。
  4. 浮動要素の先端は、その親の内側先端より高くないでしょう。
  5. 浮動要素の先端は、前にある浮動乃至はブロック−レベル要素の先端より高くないでしょう。
  6. 浮動要素の先端は、HTML資源での浮動要素に先行する内容をもったどんな 行箱模型:line-box(セクション 4.4)の先端より高くないでしょう。
  7. 浮動要素は、出来るだけ高く配置されなければなりません。
  8. 左浮動要素は出来るだけ左側に配置され、右浮動要素はできるだけ右側に配置されなければなりません。より左/右にくるものをこえて、より高い位置が選ばれます。
  <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)
  |          ______________________________
  |    |    |              浮動要素がどの様
  | B  | P  |(IMG margins) に親要素内で動き、
  | O  |    |    _____     一方マージン・ボ
  | D  | m  |   |     |    ーダー・パディン
  | Y  | a  |   | IMG |    グを保持している
  |    | r  |   |     |    かを示すこと以外
  | m  | g  |   |_____|    の他の目的を持っ
  | a  | i  |              ていないサンプル・
  | r  | n  |              テキスト。隣接す
  | g  |    |              る垂直マージンは
  | i  |    |浮動しないブロック−レベル要素
  | n  |    |間で消失していることに注意して
  |    |    |ください。

'P'要素のマージンは、浮動した'IMG'要素を取り囲んでいることに注意してください

浮動要素が別の要素のマージン・ボーダー・パディングと重なり合うには、二つの状況があります:

4.2   インライン要素(Inline elements)

ブロック−レベル要素の様に書式化されない要素が、 インライン要素です。インライン要素は行空間を他の要素と共有します。この例のようにみられます:

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

'P'要素は普通ブロックーレベル要素で、 'EM'と'STRONG'はインライン要素です。'P'要素は一行で要素全体を書式化するのに充分な幅を持っているなら、その行内に二つのインライン要素がきます:

  幾つかの強調された言葉があります

一行に充分な空間がないなら、インライン要素は幾つかの箱模型に分割されます:

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

上の例は、以下のように書式化されます:

  幾つかの強調された
  言葉がここにあります。

インラインはマージン・ボーダー・パディング乃至添え付けられたテクスト飾りをもっているなら、これらは要素が改行される場合も影響をなんらうけません:

           +----------
  幾つかの |強調された
           +---------
  ----+
  言葉| がここにあります。
  ----+

(上の図は、アスキー文字絵なので多少歪んでいます。)  行の高さをどのように計算するかの説明は、 セクション 4.4を見てください。

4.3   置換要素(Replaced elements)

置換要素は要素が指しい示した内容に置き換わる要素のことです。つまり、HTMLでいえば、'IMG'要素は'SRC'属性によって指し示された画像で置き換えられます。置き換えられた要素は、それ自身の内部次元をともなうと推定できます。'width'特性が'auto'であれば、内部幅は要素の幅として使われます。'auto'以外の値がスタイル・シートで特定されている場合、この値が使われ置き換わられる要素はそれに応じて大きさを変更されます(リサイズ方法はメディア・タイプによってことなります)。'height'特性が同じ方法に使われます。

置き換わられた要素はブロック−レベルのこともインラインのこともあります。

4.4   行の高さ(The height of lines)

要素は'line-height'行の高さ特性を持ち、原理的に、テキストの行の総高を与えます。余白が行のテキストの上下に追加され、行の高さにまでのびています。例えばテキストが高さ12ptで行の高さが14ptに設定されている場合、2ptの余分な余白(通常は行の上下に1pt)が追加されます。空要素は、内容のある要素と同じ様に、これらの計算に影響を与えます。

文字サイズと行の高さの差は、 指標(leading)と呼ばれます。指標の半分は半−指標(half-leading)と言われます。書式化の後、各行は長方形の行箱模型(line-box)を生成します。

テキストの行に異なる行の高さの値(行にはインライン要素がくるからですが)を持つセクションがくると、それらの各セクション上下にそれ自身固有の半−指標をもっています。行の箱模型(ボックス)の高さは、最も高いセクションの先端から最も低いものの下端です。先端と下端は一番高い要素に対応する必要はなく、と言うのは要素は垂直位置 'vertical-align'特性で垂直方向の位置付けをすることができるからです。パラグラフを書式化するには、各行箱模型が前の行の直下に積み重ねられます。

置き換えられないインライン要素の上下の各パディング・ボーダー乃至はマージンは、行の高さに影響しません。言い換えると:行の高さが選択したパディング乃至はボーダーにとって小さ過ぎると、行の上でテキストと重なり合います。

置き換えられた要素(つまり、そのパディング・ボーダー・マージンの全てを含む)の先端は最も高いテキストより上になる場合や下端が最も低いものより下になる場合、行上で置き換えられた要素(例、画像)は、行箱模型を大きくします。

通常のケースではパラグラフを通して行高さの値はただ一つで高い画像もなく、上の定議は連なる行の基本線は正確に行の高さだけ離れていることを保証します。これは、異なる文字のテキストの列が配列される場合、重要なことで、例えばテーブルでの例です。

これは、二つのお互いに重なり合いを調整する行上でテキスト排除するものではありません。行の高さがテキストの高さより小さいかもしれなく、その場合指標(leading)は負になります。テキストがディセンダーを持っていない(例、大文字のみを内容にしているなら)と分かっていたら、行はお互いにくっつきすぎることはありません。

4.5   キャンバス画面(The canvas)

キャンバス画面とは表示代行手段の描写表面部分で、その上に文書は表示されます。文書構造的要素はキャンバスに対応しなくて、これは文書を書式化する上で二つの問題を生じます:

最初の疑問に対する適切な答えは、キャンバスの初期サイズは画面サイズに基づいているということですが、CSS1はこの問題を決定を表示代行手段に任せています。また、表示代行手段が窓画面がサイズを変えるとキャンバス・サイズを変えるとしておくのも適切なことです。

二番目の疑問にたいして、HTML拡張が先例を設定しています:'BODY'要素の属性がキャンバス全体の背景を設定します。設計者の考えをサポートするために、CSS1はキャンバス背景を見付け出す特別な規則を導入しています:

'HTML'要素の背景値が透明'transparent'と異なる場合、そのときはそれを使い、そうでないないなら'BODY'要素の背景値を使う。その結果の値が透明'transparent'なら、表示は定議されていない。

この規則は、以下のもの許します:

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

上の例で、キャンバスは"marble"画像で覆われ、'BODY'要素の背景(それはキャンバスを全部覆うかもしれませんし、そうでないかもしれませんが)は赤です。

キャンバスへのアドレッシングの別のやり方が可能になる迄、キャンバス特性が'BODY'要素に設定されることが薦められます。

4.6   'BR'要素('BR' elements)

現在のCSS1特性と値は、'BR'要素の振る舞い方を説明していません。HTMLでは、'BR'要素は単語の間での行改行を特定しています。効果としては、要素は行改行に置き換わられます。将来のCSSバージョンでは追加され置き換えられる内容を取り扱うかもしれませんが、CSS1基本の書式は'BR'を特別に処理しません。

[#^目次へ]

5   滝状直列的様式規則集水準1特性(CSS1 properties)

スタイル・シートは、スタイル(様式)特性に値を割り付けて文書の描写に影響します。このセクションは、CSS1で定義された様式特性一覧と取り得る値の対応一覧をあげています。

5.1   特性の値表記(Notation for property values)

以下のテキストで、各特性の可能な値が以下のような構文つきで一覧表になっています

値: 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>)は対応する特性の項で説明されます。

その他の単語はキーワードで、文字通りに表現され、引用符はありません。スラッス(/)とコンマも文字通りに表現されなければなりません。

並列されたもののなかには、それら全部がその順番でこなければならいことを意味します。バー(|)は代替えを分けます:それらの一つはこなければなりません。二重バー (A || B)はAかB乃至は両方がこなければならないことを意味し、どのような順序でもかまいません。大括弧([]) はグループ化されたものです。並列は二重バーよりも強力で、二重バーはバーよりも強力です。かくて "a b | c || d e"は、 "[ a b ] | [ c || [ d e ]]"と等価です。

各タイプ・キーワード・括弧されたグループは、以下の修飾語によって引き継がれます:

5.2   書体特性(Font properties)

フォント(書体)特性を設定することは、スタイル・シートの最も一般的な使い方です。残念ながら、フォント(書体)を分けるのに充分に定義され、広く受け入れられた分類法がなく、また一つのフォント(書体)系(font family)に適用される用語が他のものでは適当でないこともあります。例えば、'italic'は普通斜めのテキストと名付けますが、スラントなテキスト(斜めのテキスト:slanted text)も Oblique, Slanted, Incline, Cursive乃至はKursivであるとして名付けられます。従って、特別なフォント(書体)に適切な典型的なフォント(書体)セレクター特性を割り当てることは単純な問題ではありません。

CSS1は特性(プロパティー) 'font-family''font-style''font-variant'そして 'font-weight''font-size''font'を定義しています。

5.2.1   書体照合同定(Font matching)

受け入れられていないので、フォント(書体)特性の一般的な命名法、特性を書体(font faces)に一致させること、は注意して行なわなければなりません。特性は、この一致過程の結果が表示代行手段で出来るだけ同じであること(書体の同じライブラリーは書体の一つ一つに表現されるとみなされます)を保証するために充分定議された順序で、一致させられます。

  1. 表示代行手段は、自身が知っておくフォント全ての関連あるCSS1特性のデーターベースを作ります(にアクセスします)。表示代行手段はフォントを知っているかもしれません、と言うのはそこに(ローカルに)取り付けられいるか又はウェブから前もって保存されているからです。全く同じ特性を持つ二つのフォントがあると、その一つは無視されます。
  2. 一定の要素とその要素の各文字符号キャラクター用に、表示代行手段はその要素に適したフォント・特性を集め組み立てます。特性の完全な組を使って、表示代行手段は仮のフォント系を選択するために'font-family'フォント系特性を使います。残りの特性は、各特性で記載されている照合基準に従って、系を吟味(テスト)します。残りの全て特性と照合一致すれば、それがその要素に同定されたフォント(書体)です。
  3. 二段階目で整理された'font-family'フォント系内に一致する書体(font face)がなくフォント組に次の代替えフォント系があれば、二段階目の過程を次の代替えフォント系でも繰り返します。
  4. 一致した書体(font face)はあるが現在の文字符号キャラクター用の絵文字記号(glyph)を持たなく、フォント組に次の代替えフォント系があれば、次の代替えフォント系で二段階目を繰り返します。フォント(書体)と文字符号キャラクター符号化の説明については、 付録Cを見てください。
  5. 二番目の段階で選んだ系にフォント(書体)がないなら、表示代行手段の持つ初期フォント系を使い、初期フォント内で得られる一番一致するものを使って二段階目を繰り返えします。

(上記のアルゴリスムが、各文字符号キャラクターのCSS1特性を再訪問しなければならなくなるのを回避する様に最適化されます。)

(2)からの特性毎の照合規則は以下のようになります:

  1. 'font-style'フォント様式がまず試され、表示代行手段のフォント・データーベースにCSSキーワード'italic'(好ましいものです)乃至は'oblique'と名札が付けられている書体(face)があれば、'italic'が満足させられます。別に値が正確に照合されなければならないか、フォント様式は失敗に終わります。
  2. 'font-variant'フォント異体が次に試されます。'normal'は'small-caps'として名付けられていないフォントを照合します;'small-caps'は(1)'small-caps'として名付けられているフォント・(2)スモール・キャップが合成されたフォント・(3)全ての小文字が大文字によって置き換えられた所のフォントを照合します。スモール・キャップ書体(フォント)は普通のフォントから大文字を電子的に一定の基準で設定されることもあります。
  3. 'font-weight'フォント重み(太さ)が次に照合され、失敗しません(以下の'font-weight'を参照
  4. 'font-size'フォント・サイズは表示代行手段依存の許容の余地内で照合されなければなりません(典型的には、基準に基づき計算されるフォントのサイズは全ピクセルに最も近くで囲まれますが、ビットマップ・フォントの許容は20%大きくなります)。その先の計算、例えば他の特性内での'em'値による、は使われている'font-size'フォント・サイズに基づくもので、特定されたものによるものではありません。

5.2.2   フォント系:'font-family'

値   : [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
初期値 :表示代行手段に特異的
適 用 :全ての要素に
継 承 :有り
百分率値:取り扱わない

値は、フォント系名乃至は一般的包括的フォント名また両者の優先順位化されたリストです。その他の大部分のCSS1特性と違って、値はコンマで区切られ、代替えになれることを示唆しています:

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

二つのタイプのリスト値があります:

フォント系名称:<family-name>
選択のフォント系の名前。最後の例で、"gill"と"helvetica"はフォント系名称です。
包括的フォント系:<generic-family>
上の例で、最後の値は汎用系の名前です。以下の汎用系が定議されています:

スタイル・シート設計者は最後の代替えとして汎用フォント系を提供するよう心がけましょう。

空白文字を含んでいるフォント名は、引用符で囲って置くべきです:

  BODY { font-family: "new century schoolbook", serif }
  
  <BODY STYLE="font-family: 'My own font', fantasy">

引用符が省略されていると、フィント名の前後の空白文字は無視されフォント名内の一連の空白文字は一つのスペースに変換されます。

5.2.3   フォント様式:'font-style'

値   : normal | italic | oblique
初期値 : normal
適 用 :全ての要素に
継 承 :有り
百分率値:取り扱わない(N/A no account)。

'font-style'特性は、フォント系内のnormal(時には、"roman"や"upright"を参照している)・italic・oblique体を選びます。

値'normal'は表示代行手段のフォント・データーベースで'normal'として分類されているフォントを選び、一方'oblique'は'oblique'と名札の付いたフォント(書体)をえらびます。値'italic'は'italic'と名札の付いたフォントを選ぶかそれが入手できない場合は'oblique'と名札の付いたものを選びます。

表示代行手段のフォント・データーベースで'oblique'と名札の付いたフォントは、実際にはnormalフォントを電子的に斜めにして出来たものかもしれません。

名前にOblique・SlantedそしてInclineが付いたフォントは、典型的には表示代行手段のデーターベースで'oblique'と名札が付けられます。名前に Italic, CursiveKursivの付いたフォントは、典型的には'italic'と名札が付けられます。

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

上の例で、'H1'内の強調文はnormal体になります。

5.2.4   フォント異体:'font-variant'

値   : normal | small-caps
初期値 : normal
適 用 :全ての要素に
継 承 :有り
百分率値:取り扱わない

フォント系内の異体という別のタイプは、小さな頭文字です。小さな頭文字では、小文字が大文字に似て見えますが、小さなサイズでやや異なった割合を持っています。 'font-variant'フォント異体はそのフォントを選びます。

値'normal'は小いさい頭文字でないフォントを選び、'small-caps'小さい頭文字は小さい頭文字を選びます。小さい頭文字が普通のフォントを取り一定の基準にそって再設定された大文字によって小文字と置き換えることで、小さな頭文字が作成されてもCSS!は受け入れます(その様にしなくてはならないわけではありませんが)。

以下の例で、'H3'要素内で小さな頭文字になり、強調文は斜体の小さな頭文字です:

  H3 { font-variant: small-caps }
  EM { font-style: oblique }

同じ様にその他の異体がフォント系にあり、 old-style numerals・small-caps numerals・condensed乃至はexpanded lettersなどです。CSS1は、これらを選ぶ特性を持っていません。

CSS1芯: この特性がテキストを大文字に変換する限りにおいて、 'text-transform'フォント変換と同じ考え方が当てはまります。

5.2.5   フォント重み(太さ):'font-weight'

値   : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初期値 : normal
適 用 :全ての要素
継 承 :有り
百分率値:取り扱わない

'font-weight'フォント重み(太さ)はフォントの重み(太さ)を選びます。値'100'から'900'が順序立て並び、各数値は少なくとも前の方のもの同じ暗さである重み(太さ)を示唆します。キーワードである'normal'は'400'と同じで、'bold'は'700'と同じです。'normal'と'bold'以外のキーワードは、フォント名と間違い、従って数値基準が九つの値一覧として選択されました。

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

'bolder'と'lighter'値は親から継承された重み(太さ)に相対的なフォント重さ(太さ)を選びます:

  STRONG { font-weight: bolder }

子要素はその齎された重さ(太さ)を継承するのであって、キーワードの値ではありません。

フォント(フォント・データ)は、典型的には一つ以上の特性を持っていて、その値はフォントの重さを記述する名前です。これらの重さの名前に統一的な意味が受け入れられていません。それらの主な役目は、単一のフォント系内の異なる暗さの書体の状態を区別することです;例えば、あなたがボールドと思っているフォントは、デザイン上フォントの普通の状態のものがどの様にボールドになるのかに依存する Regular, Roman, Book, Medium, Semi-DemiBold, Bold,Black,として記載されているかもしれません。名前の標準的な使い方がないので、CSS1での重み特性の値は数値基準で与えられ、'400'(または'normal')がそのフォント系で"普通"normal"のテキスト状態に対応しています。状態を伴う重み名前は、典型的には Book, Regular, Roman, Normalまた時にはMediumです。

系内で他の重みを数値重み値と関連させるものは、その系内での暗さの順序付けを保つだけが意図されています。しかし、以下のヒューリスチック(発見的な)な手続きで、典型的なケースでは割り振りがなされます: 

次の二つの例でその過程をえがいています。 "Example1"系では明るいほうから暗いほうへ四つの重みがあると仮定します: Regular, Medium, Bold, Heavy.。そして、"Example2"系では六つの重みがあると仮定します: Book, Medium, Bold, Heavy, Black, ExtraBlack.。二番目の例で、どのようにして、 "Example2 ExtraBlack"を何かに振り当てることは決められない、となるのかに注意してください。

      入手書体          |   割り当て   |  穴埋め(補充)
    ----------------------+---------------+-------------------
    "Example1 Regular"    |  400          |  100, 200, 300
    "Example1 Medium"     |  500          |
    "Example1 Bold"       |  700          |  600
    "Example1 Heavy"      |  800          |  900
      入手書体          |   割り当て   |   穴埋め(補充)
    ----------------------+---------------+-------------------
    "Example2 Book"       |  400          |  100, 200, 300
    "Example2 Medium"     |  500          |
    "Example2 Bold"       |  700          |  600
    "Example2 Heavy"      |  800          |
    "Example2 Black"      |  900          |
    "Example2 ExtraBlack" |  (none)       |

相対的なキーワードbolder'と'lighter'が専念するのは、 系内でで書体の状態を暗くする乃至は明るくすることで、系はシンボルの重み値で配列された書体状態を持っていないので、'bolder'の照合選択は系内でクライアンント上で入手できる次の暗いものになり、明るいものの照合選択は系内での次の明るいものになります。正確にするために、相対的なキーワードである'bolder'と'lighter'は以下のようなものです:

各'font-weight'値の暗い書体状態がある保証はありません;例えば、同じフォントがただノーマルとボールドだけしか持ってなく、他のものは八つのことなる状態の重みを持っているかもしれません。表示代行手段が系内で重みの値にフォント状態をどのように割り当てるの保証はありません。一定の値のフォントは明るい値の状態におとらないぐらい暗いということを保証するだけです。

5.2.6   フォント・サイズ:'font-size'

値   :Value: <absolute-size> | <relative-size> | <length> | <percentage>
初期値 : medium
適 用 :全ての要素
継 承 :有り
百分率値:親要素のフォント・サイズに相対的な

絶対的大きさ:<absolute-size>
<absolute-size>キーワードは、表示代行手段によって計算され保存されたフォント・サイズ表へのインデックスです。取り得る値は: [ xx-small | x-small | small | medium | large | x-large | xx-large ]です。コンピューター・スクリーン上ではスケール化因数1.5が調整インデックスの間で指示されています;'medium'フォントが10ptなら、'large'フォントは15ptになりえます。異なるメディアでは、また別のスケール化因数が必要です。また表示代行手段は、表を算出する際フォントの質と入手可能性をも考慮にいれるべきです。表はフォント系毎に異なるかもしれません。
相対的大きさ:<relative-size>
<relative-size>キーワードは親要素のフォント・サイズ表やフォント・サイズに相対的に解釈されます。取り得る値は:[ larger | smaller ]です。例えば親要素が'medium'のフォント・サイズを持っていると、値'larger'は当該の要素のフォント・サイズを'large'にします。親要素のサイズが登録表で近いのがないなら、表示代行手段は自由に表の値を挿入し、最も近いものに丸めます。表示代行手段は、数表示の値がキーワードを超えていたら、表の値を挿入しなければならないかもしれません。

長さやパーセント値は、要素のフォント・サイズを計算する際、フォント・サイズ表を考慮にいれるべきではありません。

負の値は許されていません。

その他の全ての特性では、'em'や'ex'長さ値は現在の要素のフォント・サイズを参照します。'font-size'フォント・サイズ特性では、この長さ単位は親要素のフォント・サイズを参照します。

アプルケーションは、文脈に沿って、明示されたサイズを再解釈するかもしれないことに注意して下さい。つまり、遠近法的な歪み故に、UA画面内でフォントが違ったサイスになるかもしれません。

Examples:

  P { font-size: 12pt; }
  BLOCKQUOTE { font-size: larger }
  EM { font-size: 150% }
  EM { font-size: 1.5em }

示唆されたスケール化因数1.5が使われるなら、後の三つの宣言は同じです。

5.2.7   フォント略記:'font'

値   : [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
初期値 :一括略記用には定議されていません。
適 用 :全ての要素
継 承 :有り
百分率値:<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%')は親要素のフォント・サイズに照会します。三番目の規則で、行の高さ率は要素自身のフォント・サイズに照会します。

上のはじめの三つ、 'font-style'・font-variant'そして'font-weight'、ははきり言及されてなく、みっつのそれらの初期値('normal')であることを意味しています。四番目の規則は'font-weight'を'bold'に、 the 'font-style'を'italic'に設定しそして暗黙てきに 'font-variant'を'normal'に設定します。

五番目の規則は'font-variant' ('small-caps')・'font-size' (親のフォントの120% )・'line-height' (フォント・サイズの120%倍) ・'font-family' ('fantasy')を設定しています。キーワード'normal'は残りの二つの特性に適用します: 'font-style'と'font-weight'。

[#^目次へ]

5.3   色彩と背景特性(Color and background properties)

これらの特性は要素の色彩(しばしば、 前景色と)や背景(例、内容が表示される画面表面)を記述します。背景色乃至は背景画像また両者を設定できます。画像の位置、どのように繰り返されるのか何処で固定されるのか乃至はキャンバス画面に相対的にスクロールするか、も設定され得ます。

色、'color'、特性は通常継承されます。背景特性は継承されませんが、親要素の背景は初期値では透けていて、と言うのは背景色彩'background-color'は初期値である'transparent'透明になっているからです。

5.3.1   色彩:'color'

値   : <color>
初期値 :表示代行手段特有
適 用 :全ての要素
継 承 :有り
百分率値:取り扱わない

この特性は要素のテキストの色( 前景:foreground色として照会されます)を記載します。赤を特定するするにも異なったやり方があります:

  EM { color: red }              /* 普通の言葉でe */
  EM { color: rgb(255,0,0) }     /* 0-255範囲のRGBで   */

取り得る色彩値の説明は、 セクション 6.3を見てください。

5.3.2   背景色:'background-color'

値   : <color> | transparent
初期値 : transparent
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない

この特性は要素の背景の色を設定します。

  H1 { background-color: #F00 }

5.3.3   背景画像:'background-image'

値   : <url> | none
初期値 : none
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない

この特性は要素の背景に置く画像を設定します。背景画像を設定する際、画像が入手できない場合も考慮して背景色も設定すべきです。画像が入手できるなら、背景色の上に画像がきます。

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

5.3.4   背景反復:'background-repeat'

値   : repeat | repeat-x | repeat-y | no-repeat
初期値 : repeat
適 用 : all elements
継 承 :無し
百分率値:取り扱わない

背景画像が特定されているなら、背景反復'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
適 用 :全ての要素
継 承 :無し
百分率値:取り扱いません

背景画像が特定されているなら、背景付属品'background-attachment'の値は画像がキャンバス画像に対して固定されているか、内容にそってスクロールするかを決めます。

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

CSS1芯: 表示代行手段は'fixed'を'scroll'として取り扱うかもしれません。しかし、制作者'fixed'をサポートするブラウザ用にだけ画像を提供できる方法がありませんので、少なくともHTMLとBODY要素上で'fixed'を正しく解釈することが推奨されています( セクション 7を参照)。

5.3.6   背景配置:'background-position'

値   : [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
初期値 : 0% 0%
適 用 :ブロック−レベルと置換要素
継 承 :無し
百分率値:要素自身のサイズに照会

背景画像が特定されているなら、背景位置'background-position'がその初期の位置を特定しています。

組値'0% 0%'は、画像の上左角が要素の内容を囲む箱型模型の上左角におきます(つまり、パディング・ボーダー・マージンを囲む箱ではないということです)。 組値'100% 100%'は、画像の下右角を要素の内容を囲む箱型模型の下右角におきます。 組値'14% 84%'で、画像から14%交差し84%下がった点が要素から14%交差し84%下がった点に置かれます。

値の組'2cm 2cm'で画像の上左が、要素の上左角から、右へ2cm下へ2cmの所置かれます。

割合や長さだけが与えられていたら、水平方向の位置だけが設定され、垂直方向の位置は50%になります。二つの値が与えられていたら、水平位置が最初のものです。長さと割合の組み合せ値で、'50% 2cm'などと指定できます。負の位置も指定できます。

背景の位置を指定するのにキーワード値が使えます。キーワードは割合や長さの値との組み合わせはできません。キーワードとその解釈の可能な組み合わせは以下にようになります:

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

背景画像がキャンバス画面に対して固定されているなら(上記の '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>
初期値 :略記型特性では定義されていません。
適 用 :全ての要素
継 承 :無し
百分率値:背景位置<background-position>上で許される。

背景'background'特性は、スタイル・シートの同じ場所に個々の背景特性を設定するための略記型特性です(例、'background-color'・'background-image'・'background-repeat'・'background-attachment'そして'background-position')。

背景特性で取り得る値は、個々の特性上の全ての取り得る値になります。

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

背景特性は必ず個々の背景特性全てを設定します。上の例での最初の規則では、背景色の値だけが与えられていて、その他の個々の特性は初期値に設定されます。二番目の規則では、全ての特性が特定されています。

[#^目次へ]

5.4   テキスト特性(Text properties)

5.4.1   単語間隔:'word-spacing'

値   : normal | <length>
初期値 : normal
適 用 :全ての要素
継 承 :有り
百分率値:取り扱わない

長さの単位は単語間の初期の間隔に追加する分を指定します。値は負も可能ですが、装備上の制限があります。表示代行手段は正確な空白取りアルゴリスムを勝手に選びます。単語間隔も、均等化('align'特性の値によって)によって影響されます。

  H1 { word-spacing: 0.4em }

ここで、'H1'要素での各単語間隔は'1em'によって広げられています。

CSS1芯: 表示代行手段は'word-spacing'単語間隔を'normal'として解釈するかもしれません( セクション 7を参照)。

5.4.2   文字間隔:'letter-spacing'

値   : normal | <length>
初期値 : normal
適 用 :全ての要素
継 承 :有り
百分率値:取り扱わない

長さの単位は文字符号キャラクター間の初期空間への追加を指します。値は負もかのうですが、装備特異性上の制限があります。表示代行手段は、自由に正確な空間アルゴリスムを選びます。文字間隔も均等化によって影響をうけます(これは'align'特性の値です)。

  BLOCKQUOTE { letter-spacing: 0.1em }

ここでは、'BLOCKQUOTE'要素での各文字符号キャラクター間の文字間隔は、'0.1em'だけ広げられます。

値'normal'で、表示代行手段はテキストを均等化するため文字間の空間を変更するかもしれません。'letter-spacing'が明確に<length>値に設定されていたら、このことは起こりません:

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

もたらせられた文字の間隔は、初期の空間と同じでないかもしれませんし、表示代行手段は連結線を使うべきではありません。

CSS1芯: 表示代行手段はどんな'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'要素全てが)。

表示代行手段はキーワード'blink'を認めますが、点滅効果をサポートするようにようきゅうされていません。

5.4.4   垂直配置:'vertical-align'

値   : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
初期値 : baseline
適 用 :インライン要素
継 承 :無し
百分率値:要素自体の'line-height'参照

この特性は要素の垂直方向の配置に作用します。一組のキーワードは親要素に相対的になります:

'baseline':基準線
親の基準線と要素の基準線をあわせる(乃至は、要素が基準線を持っていない場合)。
'middle':中央化
親の高さの半分を加えて基準線と要素の垂直方向の中心点に合わせる(典型的には、画像です)。
'sub':下付き
下付き要素。
'super':上付き
上付き要素
'text-top':テキストの先端
親要素のフォントの先頭と要素の先頭を合わせる。
'text-bottom':テキストの下端
親要素のフォントの底部と要素の底部を合わせる。

特性の別の組は、要素が一部である書式化された行に相対的になります:

'top':先端
行で最も高い要素と要素の先端を合わせる。
'bottom':下端
行で最も低い要素を要素の底部と合わせる。

'top'や'bottom'配置を使うと、要素が何処でループから独立するかという解決出来ない状況が起こりえます。

パーセント値は、要素自体の'line-height'特性の値に照会します。要素の基準線(または、基準線がない場合下端)を親の基準線より上に特定された量だけ持ち上げます。負の値は可能で、言い換えると'-100%'という値は次の行の基準線があると所で終わります。これは、基準線を持たない要素(文字内に置かれた画像といった)の垂直位置の正確な制御を可能にします。

将来のCSSバージョンは、 <length>をこの特性の値として許すようになると期待されています。

5.4.5   フォント変換:'text-transform'

値   : capitalize | uppercase | lowercase | none
初期値 : none
適 用 :全ての要素
継 承 :有り
百分率値:取り扱わない

頭文字化:'capitalize'
各単語の最初の文字符号キャラクターを大文字化する。
大文字化:'uppercase'
要素の文字全てを大文字化する。
小文字化:'lowercase'
要素の文字全てを小文字化する。
中立化:'none'
継承されてきた値を中立にする。

各ケースでの実際の変換は人の言語によって異なります。要素の言語を見つけるやり方については[4]を参照下さい。

  H1 { text-transform: uppercase }

上の例では、'H1'要素を大文字テキストにしています。

CSS1芯: 表示代行手段は、ラテン1目録からでない文字符号キャラクターとユニコードの case-conversion表 [8]で特定されているものと異なる変換をする言語での要素の'text-transform'テキスト変換を無視します(例、'none'として処理する)。

5.4.6   'text-align':テキスト配置

値   : left | right | center | justify
初期値 :表示代行手段特異性
適 用 :ブロック−レベル要素
継 承 :有り
百分率値:取り扱わない

この特性は要素内でテキストがどの様に配置されるのかを記載します。使われる実際の均等化アルゴリスムは、表示代行手段と言語に依存します。

例:

  DIV.center { text-align: center }

'text-align'テキスト配置は継承され、'CLASS=center'の'DIV'要素内にある全てのブロック−レベル要素は、中央化されます。配置は要素の幅に、キャンバス画面ではなく、相対的であることに注意して下さい。'justify'がサポートされていないなら、表示代行手段は置き換えを提供します。典型的には、西欧語の場合左になります。

CSS1芯: 表示代行手段は、'justify'均等化を'left'乃至'right'としてしょりするかもしれなく、要素のデフォルト書く方向が左−右乃至は右−左であるかに依存します。

5.4.7   テキスト字下げ:'text-indent'

値   : <length> | <percentage>
初期値 : 0
適 用 :ブロック−レベル要素
継 承 :有り
百分率値:親の幅に照合

この特性は書式化された第一行の前に現われるインデント(字下げ)を特定します。'text-indent'テキスト字下げの値は負であるかもしれませんが、装備特異的な制限があるかもしれません。字下げは、他のもの(例えば、HTMLの'BR'のような)によって切断された要素の途中に挿入されません。

例:

  P { text-indent: 3em }

5.4.8   テキストの高さ:'line-height'

値   : normal | <number> | <length> | <percentage>
初期値 : normal
適 用 :全ての要素
継 承 :有り
百分率値:その要素自身の フォント・サイズに相対的

この特性は隣り合った二つの行の基準線(ベースライン)間の隔たりを設定します。

数値が特定されている場合、行の高さは数値を掛けられた当の要素のフォント・サイズによって与えられます。これは、継承のされかたでパーセント値と異なります:数値が特定されていると子要素はその因数自体を継承し、生じた結果の値を継承するのではありません( percentageやその他の単位の場合のように)。

負の値はゆるされません。

以下の例の三つの規則は、結果的には同じ行の高さです:

  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'を要素のフォントに適った値に設定します。表示代行手段は'normal'の値を1.0 to 1.2の範囲の数値であると設定することが示唆されています。

'line-height'がどのようにブロック−レベル要素の書式に影響を与えるかの説明については、 セクション 4.7を見てください。

[#^目次へ]

5.5   箱模型特性(Box properties)

箱模型特性は、要素を表現する箱模型のサイズ・周囲・位置を設定します。箱模型特性をどの様に使うのかの例については 書式箱模型(セクション4)を見てください。

マージン特性は要素の端を設定します。'margin'マージン・特性は四方の全ての境界線を設定しますが、一方別のマージン・特性はそれぞれの側のみを設定します。

パディング特性(詰め物特性)は内容(例、テキスト乃至は画像)と境界線の間に挿入する空白を幾らにするかを記載します。'padding'パディング特性は四方全てのパディングを設定し、一方別のパディング特性はそれぞれの側のみを設定します。

ボーダー特性は内容の境界を設定します。各要素は四つの境界を持ち、各側に一つ、その幅・色.様式が定議されます。

幅と高さ('width'と'height')特性は箱模型のサイズを設定し、廻り込みや解除('float'や'clear')特性は要素の位置を変えることができます。

5.5.1   余白先端:'margin-top'

値   : <length> | <percentage> | auto
初期値 : 0
適 用 :すべての要素
継 承 :無し
百分率値:親の要素幅に照会

この特性は要素の余白先端を設定します:

  H1 { margin-top: 2em }

負の値が許されていますが、装備特異性という制限があります。

5.5.2   余白右側:'margin-right'

値   : <length> | <percentage> | auto
初期値 : 0
摘 要 :全ての要素
継 承 :無し
百分率値:親要素幅に照会

この特性は要素の右側余白を設定します:

  H1 { margin-right: 12.3% }

負の値が許されていますが、装備特異性という制限があります。

5.5.3   余白下端:'margin-bottom'

値   : <length> | <percentage> | auto
初期値 : 0
摘 要 :全ての要素
継 承 :無し
百分率値:親要素幅に照会

この特性は要素の余白の底の部分を設定します:

  H1 { margin-bottom: 3px }

負の値が許されていますが、装備特異性という制限があります。

5.5.4   余白左側

値   : <length> | <percentage> | auto
初期値 : 0
適 用 :全ての要素
継 承 :無し
百分率値:親要素幅に照会

この特性は要素の左側余白を設定します:

  H1 { margin-left: 2em }

負の値が許されていますが、装備特異性という制限があります。

5.5.5   余白:'margin'

値   : [ <length> | <percentage> | auto ]{1,4}
初期値 :略記特性では定義されていません。
摘 要 :全ての要素
継 承 :無し
百分率値:親要素の幅に照会

余白'margin'特性は、 'margin-top'・'margin-right'・'margin-bottom'そして'margin-left'をスタイイル・シートの同じ場所で設定するための略記特性です。

四つの値が特定されるなら、それぞれ先端・右側・下端・左側に適用にされます。ただ一つしか値がない場合それが全ての側面に適用され、二つ乃至は三つの場合抜けている値はその反対側から取られてきます

  BODY { margin: 2em } /* 全余白は、2emに設定 */
  BODY { margin: 1em 2em } /* 先端&下端= 1em, 右側&左側= 2em */
  BODY { margin: 1em 2em 3em } /* 先端=1em・右側=2em・下端=3em・左側=2em */

上の例の最後の規則は以下の例と等価です:

  BODY {
    margin-top: 1em;
    margin-right: 2em;
    margin-bottom: 3em;
    margin-left: 2em;        /*  反対側(右側)から写します。 */
  }

負の値が許されていますが、装備特異性という制限があります。

[#^目次へ]

5.5.6   詰め物先端:'padding-top'

値   : <length> | <percentage>
初期値 : 0
適 用 :全ての要素
継 承 :無し
百分率値:親要素の幅

この特性は要素の先端詰め物を設定します。

  BLOCKQUOTE { padding-top: 0.3em }

詰め物の値は負であることはできません。

5.5.7   詰め物右側:padding-right'

値   : <length> | <percentage>
初期値 : 0
適 用 :全ての要素
継 承 :無し
百分率値:親要素の幅に照会

この特性は要素の右側の詰め物を設定します。

  BLOCKQUOTE { padding-right: 10px }

詰め物の値は負であることはできません。

5.5.8   詰め物下端:'padding-bottom'

値   : <length> | <percentage>
初期値 : 0
適 用 :全ての要素
継 承 :無し
百分率値:親要素の幅に照会

この特性は要素の底の部分の詰め物を設定します。

  BLOCKQUOTE { padding-bottom: 2em }

詰め物の値は負であることはできません。

5.5.9   詰め物左側'padding-left'

値   : <length> | <percentage>
初期値 : 0
適 用 :全ての要素
継 承 :無し
百分率値:親要素幅に照会

この特性は要素の左側詰め物を設定します。

  BLOCKQUOTE { padding-left: 20% }

詰め物の値は負であることはできません。

5.5.10   詰め物:'padding'

値   : [ <length> | <percentage> ]{1,4}
初期値 : 0
適 用 :全ての要素
継 承 :無し
百分率値:親要素幅に照会

詰め物'padding'特性は、'padding-top'・'padding-right'・'padding-bottom'そして 'padding-left'をスタイル・シートの同じ場所で設定する略記特性です。

四つの特性が特定されていたら、それぞれ先端・右側・下端・左側に適用します。ただ一つしか値が無い場合四方に適用され、二乃至し三っつの値がある場合抜けている値は反対側から取ってこられます。

詰め物の領域の表面は、背景'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'
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない

この特性は要素の先端境界線の幅を設定します。キーワード値は表示代行手段に依存しますが、以下のものがあります:'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'
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない

この特性は要素の右側の境界線の幅を設定します。これが指定されてない場合、境界幅先端 'border-top-width'と等価になります。

5.5.13   境界線幅下端:'border-bottom-width'

値   : thin | medium | thick | <length>
初期値 : 'medium'
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない

この特性は要素の底の部分の境界線の幅を設定します。これが指定されてない場合、境界幅先端 'border-top-width'と等価になります。

5.5.14   境界幅左側:'border-left-width'

値   : thin | medium | thick | <length>
初期値 : 'medium'
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない。

この特性は要素の左側の境界線の幅を設定します。これが指定されてない場合、境界幅先端 'border-top-width'と等価になります。

5.5.15   境界線幅−略記:'border-width'

値   :[thin | medium | thick | <length>]{1,4}
初期値 :略記特性では定義されていません。
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない。

この特性は、'border-width-top'・'border-width-right'・'border-width-bottom'そして'border-width-left'を、スタイル・シートで同じ場所に設定するための略記特性です。

1から4の値があり、以下の解釈をします:

以下の例のコメントで、先端・右側・下端そして左側境界線の幅を示唆しています:

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

境界線の幅は、負の値であることはできません。

5.5.16   境界線色彩:'border-color'

値   : <color>{1,4}
初期値 :色彩特性の値
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない

境界線色彩'border-color'特性は、四つの境界線の色を設定します。境界線色彩は一つから四つの値を取ることができ、その値は上の境界線幅'border-width'と同じ様にそれぞれの側面毎に設定されます。

色値がなんら特定されていない場合、要素自身の色彩特性の値がそれに当たります:

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

上の例で、境界線は黒実線(solid black)行です。

5.5.17   境界線様式:'border-style'

値   : none | dotted | dashed | solid | double | groove | ridge | inset | outset
初期値 : none
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない

境界線様式'border-style'特性は四つの境界線の様式を設定します。一つから四つの値を持つことができ、値は上の境界線幅と同じようにそれぞれの側面毎に設定されます。

  #xy34 { border-style: solid dotted }

上の例で、水平方向の境界線は実線'solid'で、垂直方向は点線'dotted'です。.

境界線様式の初期値は'none'ですので、境界線様式が設定されていない場合境界線は見えません。

境界線様式は以下のような意味があります:

none
境界線は描かれません(境界線幅の値に関わらず)。
dotted
この境界線は、要素背景の先端で描かれる点状の線です。
dashed
この境界線は、要素の背景の先端で描かれるダッシュ線です。 the border is a dashed line drawn on top of the background of the element
solid
この境界線は、実線です。
double
この境界線は、要素の背景の先端で描かれる二重線です。二つの一重線とその間の空間の合計が境界線幅<border-width>の値と等しくなります。
groove
三次元の溝が、色彩<color>値に基づいた色で描かれます。
ridge
三次元の背が、色彩<color>値に基づいた色で描かれます。
inset
三次元の差し込みが、色彩<color>値に基づいた色で描かれます。
outset
三次元の外側折丁が、色彩<color>値に基づいた色で描かれます。

CSS1芯: 表示代行手段は 'dotted'・'dashed'・'double'・'groove'・'ridge'・'inset'そして'outset'を全て 'solid'として解釈するかもしれません。

[#^目次へ]

5.5.18   境界線先端−略記:'border-top'

値   : <border-top-width> || <border-style> || <color>
初期値 :略記特性では定義されていません。
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない。

この特性は、要素の先端境界線の幅・様式・色彩を設定する略記特性です。

  H1 { border-bottom: thick solid red }

上の規則は、H1要素下端の境界線の幅・様式・色彩を設定しています。省略された値は初期値に設定されます:

  H1 { border-bottom: thick solid }

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

境界線様式'border-style'特性は四つの値を受け入れ、この特性はただ一つの様式値しか取らないことに注意して下さい。

5.5.19   境界線右側−略記:'border-right'

値   : <border-right-width> || <border-style> || <color>
初期値 :略記特性には定義されていません。
適 用 :全ての要素
継 承 :無し
百分率値:取り扱っていない。

これは、要素の右側境界線の幅・様式そして色を設定する略記特性です。これが指定されていないと、境界線先端−略記 'border-top'と等価になります。

5.5.20   境界線下端−略記:'border-bottom'

値  : <border-bottom-width> || <border-style> || <color>
初期値 :略記特性には定義されていません。
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない。

これは、要素の下端境界線の幅・様式そして色を設定する略記特性です。これが指定されていないと、境界線先端−略記 'border-top'と等価になります。

5.5.21   境界線左側−略記:'border-left'

値   : <border-left-width> || <border-style> || <color>
初期値 :略記特性には定義されていません。
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない。

これは、要素の左側境界線の幅・様式そして色を設定する略記特性です。これが指定されていないと、境界線先端−略記 'border-top'と等価になります。

5.5.22   境界線−略記:'border'

値   : <border-width> || <border-style> || <color>
初期値 :略記特性には定義されていません。
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない。

境界線'border'特性は、要素の四つの境界線全てで、同じ幅・色・様式を設定する略記特性です。例えば、以下の最初の規則は後に示される四つの規則の組と等価です:

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

余白'margin'や詰め物'padding'略記特性と違って、四つの境界線で異なる値を設定できません。そうするには、一つ以上の別の境界特性を使わなければなりません。

幾らかの広がりのある特性は重なり合う機能を持っているので、規則で特定する順位が重要になります。この例で考えてみます:

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

上の例で、左側境界線の色は黒(black)で、一方その他の境界線は赤(red)です。これは幅・様式・色を設定した境界線左側'border-left'に由来しています。この色彩値は境界線左側'border-left'で特定されていないので、色彩'color'特性から取ってきます。色彩'color'特性が境界線左側'border-left'特性の後で設定されることは、当面の問題に関係ありません。

境界線幅'border-width'特性は四つの長さの値を受け入れますが、この特性は一つしか受け入れないことに注意して下さい。

[#^目次へ]

5.5.23   幅:'width'

値   : <length> | <percentage> | auto
初期値 : auto
適 用 :ブロック−レベルと置換要素
継 承 :無し
百分率値:親要素幅に照会

この特性はテキスト要素に適用できますが、画像と言った置換要素で最も有効です。必要なら、画像を基準に合わせて再計算することで幅が強制されます。再計算の際画像の外観上の割合は、高さ'height'特性が'auto'なら、保たれます。

例:

  IMG.icon { width: 100px }

置換要素の幅と高さがともに自動なら、これらの特性はその要素の内部次元に設定されます。

負の値は許されません。

この特性・余白・詰め物との関連の説明は 書式箱模型:formatting model(セクション 4)を参照してください。

5.5.24   高さ:'height'

値   : <length> | auto
初期値 : auto
適 用 :ブロック−レベルと置換要素
継 承 :無し
百分率値:取り扱わない

この特性はテキスト要素に適用できますが、画像と言った置換要素で最も有効です。必要なら、画像を基準に合わせて再計算することで高さが強制されます。再計算の際画像の外観上の割合は、幅'width'特性が'auto'なら、保たれます。

例:

  IMG.icon { height: 100px }

置換要素の幅と高さがともに自動なら、これらの特性はその要素の内部次元に設定されます。

テキスト的な要素にてきようされるなら、高さは、例えばスクロール・バーなどで調整することができます。

負の値はゆるされていません。

CSS1芯: 表示代行手段は、要素が置換要素でない場合、高さ特性を無視(つまり、自動として処理する)するかもしれません。

5.5.25   浮動回りり込み:'float'

値   : left | right | none
初期値 : none
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない。

値'none'で、要素はテキスト内に現われる所で表示されます。値'left'や'right'で、要素は左側(右側)に移動して、テキストは右側(左側)で折り返します。 値'left'や'right'で、要素はブロック−レベル(つまり、'display'特性は無視され)として取り扱われます。詳しい仕様については、 セクション 4.1.4を見てください。

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

上の例では、親要素の左側に沿って、'CLASS=icon'を持った全ての画像を配置します。

この特性は、インライン画像でしばしば使われますが、テキスト要素にも適用します。

5.5.26   浮動回り込み解除:'clear'

値   : none | left | right | both
初期値 : none
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない。

この特性は、要素がその側面に要素を浮動回り込みを可能にするかどうかを特定します。より特別には、この特性の値が要素の浮動回り込みを受け入れない側面をリストします。'left'に設定された'clear'なら、左側で、浮動回り込み要素の下に、要素は動きます。'none'に設定された'clear'なら、浮動回り込み要素は全ての側で許されます。例として:

  H1 { clear: left }

[#^目次へ]

5.6   型分類特性(Classification properties)

これらの特性は、特別な視覚的なパラメーターを設定するというより、要素を範疇に分けます。

リスト様式(list-style)特性は、リスト項目(例、'list-item'の'display'値を持った要素)がどの様に書式化されるのかを記述します。リスト様式特性はどんな要素でも設定可能で、通常木構造を下って継承されます。しかし、'list-item'の'display'値を持った要素にだけ影響します。HTMLでいえば、これは典型的には'LI'要素例です。

5.6.1   要素−表示形式:'display'

値   : block | inline | list-item | none
初期値 : block
適 用 :全ての要素
継 承 :無し
百分率値:取り扱わない

この特性は、要素がキャンバス画面(それは印刷頁であるかもしれないし、コンピューター画面などであるかもしれません)上どのように表現されるのか、または表現されるものかどうかを記載します。

区域'block'という表示'display'の値を持つ要素は、新しい箱を開きます。この箱は、CSS 書式模型:formatting modelに従って、隣接する箱に相対的に位置取りされます。典型的には、'H1'や'P'のような要素は典型的なブロック型になります。 リスト項目'list-item'と言う値は、ブロックに似ていますが、リスト項目印が加わっています。HTMLでは、'LI'は典型的にはこの値を持っています。

インライン'inline'という値の画面上表現'display'は、前の内容と同じ行上に新しいインライン箱をもたらします。この箱は、内容の書式化された大きさに従って特定の寸法に作られます。内容がテキストなら、それは幾つかの行にまたがり各行上で箱模型ができます。マージン・ボーダー・パディング特性はインライン'inline'要素に適用されますが、行改行になんらの効果を持ちません。

値'none'は、子要素やその取り囲む箱を含んで、要素の表示を消します。

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

最後の規則は画像表示を切っています。

画面上表現'display'の初期値はブロック'block'ですが、表示代行手段は典型的には HTML仕様書[2]の要素の指定された表示に従って全ての要素の初期値を持っています。

CSS1芯: 表示代行手段は'display'を無視しただUAの初期値だけを使うかもしれません( sセクション 7を参照)

5.6.2   空白文字:'white-space'

値   : normal | pre | nowrap
初期値 : normal
適 用 :ブロック−レベル要素
継 承 :有り
百分率値:取り扱わない

この特性は、要素内の空白文字(whitespace)をどのように取り扱うかを宣言します: 'normal'なやり方(そこでは、空白文字は消失する)・'pre'(そこでは、HTMLでの'PRE'要素のように振る舞う)・'nowrap'(そこでは、BR要素でだけ折り返す):

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

空白文字の初期値は'normal'ですが、表示代行手段は、典型的にはHTML仕様書 [2]の要素表示に従って、全てのHTML要素での初期値を持っています。

CSS1芯: 表示代行手段は制作者と読み手のスタイル・シートの空白文字'white-space'特性を無視し、代わりに表示代行手段の初期値を使うかもしれません( セクション 7を参照)。

5.6.3   リスト様式型:'list-style-type'

値   : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初期値 : disc
適 用 :'display'の値が'list-item'の要素
継 承 :有り
百分率値:取り扱わない

'list-style-image'が'none'乃至はURLに指し示された画像が表示できない場合、この特性はリスト項目印の見え方を決めます。

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

5.6.4   リスト様式画像:'list-style-image'

値   : <url> | none
初期値 : none
適 用 :'display'値が'list-item'の要素
継 承 :有り
百分率値:取り扱わない

この特性は、リスト項目印として使われる画像を設定します。画像が入手されると、リスト項目印で設定されている印(マーカー)を置き代えます。

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

5.6.5   リスト様式配置:'list-style-position'

値   : inside | outside
初期値 : outside
適 用 :'display'値が'list-itemの要素
継 承 :有り
百分率値:取り扱わない

リスト様式位置'list-style-position'は、リスト項目印が内容に対してどのように描かれるかを決めます。書式化された例については、 セクション 4.1.3を参照ください。

5.6.6   リスト様式−略法:'list-style'

値   : <keyword> || <position> || <url>
初期値 :略法では定義されていません。
適 用 :'display'値が'list-item'要素
継 承 :有り
百分率値:取り扱わない

リスト様式−略法:'list-style'は、三つの特性'list-style-type'・'list-style-image'そして'list-style-position'をスタイル・シートで同一場所に設定するための略式の命名法です。

  UL { list-style: upper-roman inside }
  UL UL { list-style: circle outside }
  LI.square { list-style: square }

'LI'要素に直接'list-style'を設定すると、思わぬ結果になりえます。以下を考えてみましょう:

  <STYLE TYPE="text/css">
    OL.alpha LI  { list-style: lower-alpha }
    UL LI        { list-style: disc }
  </STYLE>
  <BODY>
    <OL CLASS=alpha>
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>

特異性( 滝状直列的順位で定義されているように)は上の例ではスタイル・シートの最初の規則より高いので、全ての'LI'要素の二番目規則を上書きし'lower-alpha'リスト・スタイルのみが使われます。従って、リスト型要素でのみリスト様式−略法'list-style'を設定することを推奨します:

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

上の例で継承は、'list-style'の値を'OL'と'UL'から'LI'要素に受け継ぎます。

URL値は、他のどのような値とも結合され得ます:

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

上の例で画像が入手できない場合、'disc'が使われます。

[#^目次へ]

6   単位(Units)

6.1   長さの単位(Length units)

長さの値の書式は、選択性の記号文字('+'や'-'・初期値が'+')で、直ぐ後に数値(小数点があるものやないもの)がき、引き続いて単位の識別子(二文字の省略語)がきます。'0'数値の後、その単位識別子は選択性です。

特性によっては負の長さの単位を許しますが、これは書式模型を複雑にし装備上の特別な限界があるかもしれません。負の長さ単位がサポートされていない場合、サポートされている近い値に制限されるべきです。

長さの単位には二つのタイプがあります:相対的と絶対的です。相対的な単位は別の長さ特性に対して相対的な長さを特定します。相対単位を使うスタイル・シートは、一つの媒体から別の媒体(例、コンピューター画面からレーザー・プリンター)へより容易に基準化します。 割合の単位(以下で説明します)やキーワード値(例、'x-large')は同じ様な利点を提供します。

この相対的な単位は、以下のようにサポートされています:

  H1 { margin: 0.5em }      /* ems, the height of the element's font */
  H1 { margin: 1ex }        /* x-height, ‾ the height of the letter 'x' */
  P  { font-size: 12px }    /* pixels, relative to canvas */

相対的な単位である'em'や'ex'は、要素自身の文字サイズに対して相対的になります。CSS1のこの規則の唯一の例外は、'em'や'ex'が親要素の文字サイズを参照している場合での、'font-size'特性です。

最後の規則で使われている様にピクセル単位はキャンバスの解像度に、つまり大概コンピューター画面に、比例します。出力媒体のピクセル解像度が普通のコンピューターと著しく異なる場合、表示代行手段はピクセル値を一定の基準によって再評価すべきです。その(基準として)示唆される参照ピクセルは、90dpiのピクセル解像度の装置上で、読み手からの手を伸ばした距離での、一ピクセルの視軸(視角)です。手を伸ばした距離が名目上28インチの場合、視角は約0.0227度です。

子要素は、計算された値を継承するのであって、相対値ではありません:

  BODY {
    font-size: 12pt;
    text-indent: 3em;  /* i.e. 36pt */
  }
  H1 { font-size: 15pt }

上の例で'H1'要素の'text-indent'値は36ptで、45ptではありません。

絶対的な長さ単位は、出力媒体の物理的な特性値が判明している場合にだけ有用です。これら絶対的な単位が以下のようにサポートされます:

  H1 { margin: 0.5in }      /* inches, 1in = 2.54cm */
  H2 { line-height: 3cm }   /* centimeters */
  H3 { word-spacing: 4mm }  /* millimeters */
  H4 { font-size: 12pt }    /* points, 1pt = 1/72 in */
  H4 { font-size: 1pc }     /* picas, 1pc = 12pt */

特定された長さがサポートされて得ない場合、表示代行手段は最適になるように試みるべきです。全てのCSS1特性にとって、将来の計算化や継承は最適化された値に基づくべきです。

6.2   割合の単位(Percentage units)

パーセント値の書式は、選択性の記号文字('+'乃至は'-'・初期値は'+')に直ぐ続く数値(小数点がありものまたないもの)そして'%'と続きます。

パーセント値は必ず別の値、例えば長さの単位、に相対的です。パーセント値を許す各特性は、またパーセント値がどの値を参照するかをも定議します。大概、これは要素自身の文字サイズです:

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

全ての継承されるCSS1特性で、値がパーセントとして特定されていりなら、子要素がその結果を継承し、パーセント値を継承するのでは

6.3   色彩単位(Color units)

色彩は、キーワー乃至は数値RGB仕様です。

キーワードによる色彩名の指定された一覧は:aqua・blac・ blue・fuchsia・ gray・green・lime・maroon・navy・olive・purple・red・silver・teal・white そしてyellowです。これら16色はウィンドウズのVGAパレットから採用され、RBG値はこの仕様書では定議されていません。

  BODY {color: black; background: white }
  H1 { color: maroon }
  H2 { color: olive }

RGB色彩模型は、数値色彩仕様にそって使われます。以下の例は全て、同じ色を特定します:

  EM { color: #f00 }              /* #rgb */
  EM { color: #ff0000 }           /* #rrggbb */
  EM { color: rgb(255,0,0) }      /* integer range 0 - 255 */
  EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

十六進命名法でのRGB値の書式は、'#'に直ぐ続いて三乃至六つの十六進文字がきます。三つの数値によるRGB命名(#rgb)は、六つの数値書式(#rrggbb)に数値を繰り返すことで変換されますが、ゼロの追加によるのではありません。例えば#fb0は、#ffbb00に拡張されます。これは、white (#ffffff)が省略命名(#fff)で特定でき、表示の色彩濃度への如何なる依存をも排除しています。

機能的な命名上のRGB値の書式は、'rgb('に続いて三つの数値のコンマ区切りの一覧になり(三つの数値はどれも、0〜255の範囲内の整数乃至は0.0%〜100.0%の範囲の百分率値)、続いて')'がきます。空白行文字で数値を囲むことは許されています。

この数値範囲外の値は、切られるべきです。従って、以下の三つの規則は等価になります:

  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]で特定されます。表示代行手段は、これらの色を表現できる忠実度(フィデリティー)内で変わるかもしれませんが、sRGBの使用は国際標準 [10]に関連したどの色にすべきであるかという明白で且つ客観的に計られる定議を提供します。

表示代行手段は、ガンマ補正を行って色彩表示上の効果を制限するかもしれません。sRGBは、特定された閲覧状況下でガンマ2.2表示を特定します。表示代行手段は、CSS1で与えられた色彩を調整し、従って出力装置の"natural"表示ガンマと協力して、効果的な表示ガンマ2.2が生成されます。 付録Dで、これについて詳しく述べられています。CSS1で特定される色彩だけが影響され、例えば画像が固有の情報を実現するようにします。

6.4   URL

統一的な資源場所指定(Uniform Resource Locator:URL)は、機能的な命名法上の識別子です:

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

URL値の書式は、'url('に続いて(記載が)選択的な空白文字がき、さらに続いて(記載が)選択的な一重引用符(')乃至は二重引用符(")文字、 続いてURL自身( [11]で定議されたように)、 続いて(記載が)選択的な一重引用符(')乃至は二重引用符(")文字、 続いて選択的な空白文字、 続いて')'がきます。URL自身の一部ではない引用文字は、釣り合っていなければなりません。

URLに現われる大括弧・コンマ・空白文字・一重引用符(')そして二重引用符(")は、バックスラッシュ、'¥(','¥)','¥,'、でエスケープされなければなりません:

部分的なURLは、スタイル・シートの資源に相対的に解釈され、文書に相対的になされるものではありません:

  BODY { background: url(yellow) }

[#^目次へ]

7   CSS1適合性(CSS1 conformance)

文書を表示する表示するのにCSS1を使う代行手段は、CSS1があれば、CSS1仕様書に合わせます。

CSS1スタイル・シートを出力する表示代行手段は、CSS1仕様書に適合する:

文書CSS1スタイル・シート出力を表示するのにCSS1を使用する表示代行手段は、両者の適合性要求に出合う場合CSS1仕様書に適うようにする。

表示代行手段はCSS1の全ての機能性を装備する必要はありません:芯となる主機能を装備することによってCSS1に適合することができます。 主機能は、明らかに除外されている部分以外は全てのCSS1仕様から構成されています。テキストでは、これらの部分は "CSS1 core:"とマークが記され、続いてどんな機能が主機能から除外されてあるかの説明になります。主機能から除外された機能は、CSS1上級機能と言われています。

このセクションはCSS1に適った定議だけをしています。適合するには別の機能の組を装備するよう表示代行手段に要求するCSSの他の水準が将来出てくるでしょう。

描写媒体の制限の例として:制限された資源(フォント・色)や制限された分解度(マージンが正確にならない)。これらのケースでは、表示代行手段はスタイル・シートの値を適正化すべきです。また、異なるユーザー・インターフェース枠組がそれ固有の限界を持っているかもしれません:VRブラウザはユーザーからの距離に基づて文書を一定の基準によって再評価するかもしれません。

表示代行手段は表現に際して別の選択を読み手に提供するかもしれません。例えば、表示代行手段は視力障害のある読み手にオプションを提供したり、点滅を禁止するために選択を提供するかもしれません。

CSS1は全ての書式領域を定議していないことに注意して下さい。例えば、表示代行手段は自由に文字間隔アルゴリスムを選えらべます。

この仕様書は以下のことを推奨してはいますが、要求してはいません。表示代行手段は:

上の適合規則は機能性のみで、ユーザー・インターフェースについては記載していません。

7.1 上位(前方)互換可能解析(Forward-compatible parsing)

この仕様書はCSSレベル1を定義しています。CSSのより高度なレベル、追加された機能もあり、が将来定義されるでしょう。CSS1だけをサポートしている表示代行手段はより高度な将来の機能を持つスタイル・シートを読むことが出来るようことを確認するのに、このセクションは、CSSレベル1で妥当でないとされるある種の構造に出会った場合、表示代行手段は何をするかを定義します。

より詳しく言うと:

CSSスタイル・シートは、どのバージョンでも、 声明のリストから構成されています。声明には二種類あり: アット−規則(at-rules)規則設定(rulesets)です。声明を取り巻く空白文字(スペース・タブ・改行)もきます。

CSSスタイル・シートはHTML文書によく組み込まれていて、旧式の表示代行手段からスタイル・シートを隠すことができ、それはスタイル・シートのHTMLコメント内への便宜的な投入です。HTMLコメント字句である"<!--" and "-->"は、声明の前・後や声明の間にもくることがあります。声明のまわりに空白文字もくることがあります。

アット・キーワードを伴うアット規則、これは最初に'@'を持った識別子(例えば、'@import'・'@page')です。識別子は、文字・数値・ダッシュ・エスケープ文字(以下に定義されている)から構成されています。

アット−規則は、どちらが先にあっても、次のセミコロン(;) 乃至はブロック(近くで定義された)迄とそれ自身を含みます。CSS1表示代行手段は、'@import'以外のアット・キーワードで始まるアット規則に出会うと、アット・規則全体を無視しその後の解析の継承を無視します。またスタイル・シートの先頭にに来ていないなら、例えば何らかの規則(無視されている規則であっても)の後にあるなら、'@import'で始まるアット規則を無視します。ここに例があります。

CSS1パーサーがこのスタイル・シートに出会ったと想定します:

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

二番目の'@import'はCSS1によれば不正です。CSS1パーサーはアット規則全体を飛び越し、スタイル・シートを効果的に以下のように加減します:

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

ブロックは左中括弧 ({)で始まり、対応する右中括弧 (})で終わります。この間に文字がありますが、例外として丸括弧(バーレン)(()), 大括弧(ブラケット)([])と中括弧(ブレース)({})は必ず対応する組になり入れ子もあるかもしれません。一重(') や二重(")引用符も対応する組になり引用符間の文字は 文字列として解析されます(文字列(strings)の定義については、 appendix Bの字句化機構を参照)。ここにブロックの例があります;引用内の右中括弧はブロックの開始中括弧と一致していないことと二番目の一重引用はエスケープ文字でそれ故に開始引用と対応していないことに注意してください:

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

規則設定は、 declaration-blockとそれに続く selector-stringから構成されています。セレクター文字列は、最初の左中括弧({)迄(しかし括弧は含みません)の全てのものから構成されています。妥当でないCSS1であるセレクター文字列で始まる規則設定は、飛び越えられます。

例えば、CSS1パーサーがこのスタイル・シートに出会ったとします:

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

二番目の行はCSS1上正しくないセレクター文字列を内容にもっています。CSS1表示代行手段はこの規則を飛び越し、以下のように加減します:

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

ブロック宣言(declaration-block)は左中括弧({)で始まり、対応する右中括弧(})で終わります。この間にゼロないしはそれ以上の宣言のセミコロン(;)で区切られた

宣言は、 特性・コロン(:) そしてから構成されています。これら一つ一つは空白文字がつかわれていることもあります。特性は、前に定義された様に、識別子です。値にはどのような文字もきますが、 丸括弧(())・大括弧([])・中括弧({})・一重引用符(')そして二重引用符(")は対応する組でなければなりません。 丸括弧・大括弧・中括弧は入れ子になります。引用符内で、文字は文字列として解析されます。

既存の特性に新しい特性や新しい値が将来追加されることが起こるので、表示代行手段は不正なプロパティ−名乃至は値の宣言を飛び越さなければなりません。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は空白文字が来れる場所を追加定義できまき(内部値のように)、コメントはそこにも許されます。

以下の規則は必ず当てはまります。

注意:HTMLのクラス属性は上記のセレクターに許されているものよりも多くの文字をクラス名で許しています。CSS1では、これらの文字はエスケープされユニコード数値としてとして記載されなければなりません: "B&W?"は B¥&W¥? or B¥26W¥3Fとして記載されることができ、"ÅÁÂ"(Greek:"kouros")は ¥3BA¥3BF¥3C5¥3C1¥3BF¥3C2として記載されされなければなりません。CSSの最新版では、もっと多くの文字が直接登録できると期待されています。

付録 BにはCSS1の文法をあげています。

[#^目次へ]

8   参考書

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

[2] "HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, 8 July 1997. Available at http://www.w3.org/TR/REC-html40/.
[訳者注: "HTML 4.0 Specification(jp)"(翻訳版)]

[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0", RFC 1866, MIT/ W3C, November 1995. The specification is also available in (http://www.w3.org/MarkUp/html-spec/html-spec_toc.html)
[訳者注:
ハイパーテキストマーク付け言語−2.0(日本語訳)
(http://www.asahi-net.or.jp/%7Ebd9y-ktu/W3C20/html-spec_toc.html)]

[4] F Yergeau, G Nicol, G Adams, M Dürst: "Internationalization of the Hypertext Markup Language" (ftp://ds.internic.net/rfc/rfc2070.txt).
訳者注:
RFC Index Search Formからも、RFC2070 textは入手可能です。
HTML 2.x(jp)(RFC2070をHTML化し翻訳)
(http://www.asahi-net.or.jp/%7Ebd9y-ktu/HTML2x.html)

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

[6] ISO/IE 10179:1996 Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL).

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

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

[9] "A Standard Default color Space for the Internet", version 1.10, M. Stokes, M. Anderson, S. Chandrasekar, and R. Motta, 5 November 1996.

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

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

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

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

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

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

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

[#^目次へ]

9   謝辞(Acknowledgments)

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(彼の励ましとHTML 3.0上の業績に対して)・ Chris Lilley(彼の継続的な貢献、特に色彩とフォントの領域での貢献に対して)そしてSteven Pemberton(創造的で体系的な手腕に対して)。

[#^目次へ]

付録A:HTML 2.0用のスタイル・シート例

(この付録は情報提供で、規範的なものではありません。)

以下のスタイル・シートは、HTML 2.0[3][訳者注: ハイパーテキストマーク付け言語−2.0(日本語訳)]仕様書での示唆された表示に沿って書かれています。或るスタイル、例えば色彩、は完全にするために追加されています。以下のものに類似したスタイル・シートは、表示代行手段の初期値として使われています:

  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 { 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 }  /* relative to the parent */
  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 }              /* tight formatting */
  LI { margin-left: 3em }

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

  HR { border-top: solid }        /* 'border-bottom' could also have been used */

  A:link { color: blue }          /* unvisited link */
  A:visited { color: red }        /* visited links */
  A:active { color: lime }        /* active links */

  /* setting the anchor border around IMG elements
     requires contextual selectors */

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

[#^目次へ]

付録B:CSS1 文法

(この付録は、規範的なものです。)

全ての装備がサポートすべき最小のCSS1(つまり、CSSのどのバージョンでも)文法は セクション7で定議されています。以下の文法は、CSS1の構文を定議する、非常に少ない言語しか定議していません。

しかし、或る意味において、それはそれでもCSS1の上質な組です:この文法で表現できない追加的な構文的な制約はあります。適合表示代行手段も、規則の解析(section 7.1)・特性や値の命名法(section 5)・単位の命名法(section 6)で上位互換性に結び付いていなければなりません。さらに、HTMLは制限、例えばクラス属性の取りえる値など、を課しています。

以下の文法は、 LL(1)です(しかし、多くの表示代行手段はそれを直接使うべきではありません、というのは解析する方法でなく唯CSS1構文だけを表わしてしるからです)。この文法の書式は人の使用にできるだけ効果的にであるようにされていて、yacc [15]を超えた幾つかの省略命名法が使われています:

  *  : 0 or more(ゼロ乃至それ以上)
  +  : 1 or more(一つ乃至それ以上)
  ?  : 0 or 1(ゼロ乃至一つ)
  |  : separates alternatives(代替えを分けている)
  [] : grouping(グループ化)

この文法は:

stylesheet
 : [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]*
 ;
import
 : IMPORT_SYM [STRING|URL] ';'		/* E.g., @import url(fun.css); */
 ;
unary_operator
 : '-' | '+'
 ;
operator
 : '/' | ',' | /* empty */
 ;
property
 : IDENT
 ;
ruleset
 : selector [ ',' selector ]*
   '{' declaration [ ';' declaration ]* '}'
 ;
selector
 : simple_selector+ [ pseudo_element | solitary_pseudo_element ]?
 | solitary_pseudo_element
 ;
	/* An "id" is an ID that is attached to an element type
	** on its left, as in: P#p007
	** A "solitary_id" is an ID that is not so attached,
	** as in: #p007
	** Analogously for classes and pseudo-classes.
	*/
simple_selector
 : element_name id? class? pseudo_class?	/* eg: H1.subject */
 | solitary_id class? pseudo_class?		/* eg: #xyz33 */
 | solitary_class pseudo_class?			/* eg: .author */
 | solitary_pseudo_class			/* eg: :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
 ;
	/* There is a constraint on the id and solitary_id that the
	** part after the "#" must be a valid HTML ID value;
	** e.g., "#x77" is OK, but "#77" is not.
	*/
id
 : HASH_AFTER_IDENT
 ;
solitary_id
 : HASH
 ;
declaration
 : property ':' expr prio? 
 | /* empty */				/* Prevents syntax errors... */
 ;
prio
 : IMPORTANT_SYM	 		/* !important */
 ;
expr
 : term [ operator term ]*
 ;
term
 : unary_operator?
   [ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
   | IDENT | hexcolor | URL | RGB ]
 ;
	/* There is a constraint on the color that it must
	** have either 3 or 6 hex-digits (i.e., [0-9a-fA-F])
	** after the "#"; e.g., "#000" is OK, but "#abcd" is not.
	*/
hexcolor
 : HASH | HASH_AFTER_IDENT
 ;

以下は字句化で、フレックス [16]命名法で記載されています。これはフレックスの8ビット装備を想定しています。字句化は大文字小文字を区別しません(フレックス・コマンド・ラインのオプション-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			{/* ignore */}
<COMMENT>.			{/* ignore */}
@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); /* ignore whitespace */}
¥n				{BEGIN(0); /* ignore whitespace */}
¥<¥!¥-¥-			{BEGIN(0); return CDO;}
¥-¥-¥>				{BEGIN(0); return CDC;}
.				{fprintf(stderr, "%d: Illegal character (%d)¥n",
				 lineno, *yytext);}

[#^目次へ]

付録C:符号化

(この付録は情報の提供で、規範的なものではありません。)

HTML文書は約30,000の異なる文字符号(キャラクター)がユニコードによって定議されています。多くの文書ではただ数百しか必要はないでしょう。多くのフォント(書体)もただ数百の絵文字(記号、glyphs)を内容にしているだけです。 セクション 5.2と組み合わせて、この付録は文書での文字符号やフォント(書体)での象形文字が、どのように一致させられるのかを説明します。

文字符号のコード化(Character Encoding)

HTML文書の内容は、一連の文字符号(キャラクター)とマーク付けです。これを通信をへて送るには、幾つかの可能な符号化(encodings)を使って、一連のバイトとして符号化(コード化)します。このHTML文書は、符号化を解かれ文字を見つけ出さなければなりません。例えば西欧語では抑音符号のあるもの(à)(仏語で graveと言う)はバイト224を使うのが普通ですが、ヘブライ語では Alephにバイト224を使うのが一般的です。日本語では、バイトの意味は通常その前にあるバイトによって決まります。符号化によっては、一つの文字符号(キャラクター)が二つ(乃至はより多くの)バイトとして符号化されます。

表示代行手段は、HTTPヘッダーの"charset"パラメーターを見てバイトをどのようにコード化を解くかを知っています。典型的な符号化(コード化)(charset値)は、"ASCII"(英語用)・"ISO-8859-1"(西欧語用)・"ISO-8859-8"(ヘブライ語用)・"Shift-JIS"(日本語用)です。

HTML [2][4]は、30,000の異なる文字符号キャラクター、つまりユニコードで定議されたもの、を可能にしています。多くの異なる文字符号キャラクターを使う文書は多くはありませんし、正しいコード化の選択で文書はただ文字符号キャラクター毎の一つのバイトだけを要求していることを通常保証しています。 時に必要なコード化範囲外の文字符号キャラクターは、数値文字符号参照として既に登録されています:'&#928;'は、どんな符号化が使われているにせよ、必ずギリシャ語大文字Piを意味します。表示代行手段は、如何なるユニコード文字符号キャラクター、たとえ幾つかのコード化しか取り扱わないにしても、を当然用意しておかなければならないことになります。

フォント(書体)コード化(Font encoding)

フォント(書体)は文字記号(キャラクター、characters)を内容にしていません、 絵文字(記号、glyphs)として分かるだけです。絵文字(記号、glyphs)、輪郭乃至はビットの書式、は文字符号(キャラクター)の特殊な表現を構成します。明示的であれ暗黙的であれ、各フォント(書体)はそれに伴う表、 フォント(書体)コード化表(font encoding table)、を持っていて各絵文字(記号、glyph)がどんな文字符号(キャラクター)を表現するかを知らせます。タイプ1フォント(書体)では、表は符号化ベクトル(encoding vector)として参照されます。

事実多くのフォント(書体)は、同じ文字符号キャラクターに幾つかの絵文字(記号、glyph)を持っています。これらの記号のどれが使われるべきかは、言語の規則乃至は設計者の好みに係っています。

例えばアラビア語で全ての文字は四つの異なる形を持ち、文字が単語の最初で・途中において・終わりで乃至は離れて使われるかどうかに係っています。全てのケースで同じ文字符号キャラクターで、HTML文書にはただ一つの文字符号キャラクターがあるだけですが、印刷されるとそれぞれ異なって見えます。

提供されている色々な代替えの形の中から、グラフィック・デザイナーの選択に任せるフォント(書体)もあります。残念ながら、CSS1はまだこれらの代替えを選択する手段を提供していません。現在このようなフォント(書体)から選択されるのは、初期形だけです。

フォント(書体)組(Font sets)

単一のフォント(書体)では文書乃至は要素の全ての文字符号(キャラクター)を表示するには充分でないと言う問題を処理するするために、CSS1ではフォント(書体)組(font sets)の使用が可能です。

フォント(書体)組は、フォントのリストで、同じ様式やサイズすべてがあり、或る文字符号キャラクターの記号(glyph)があるかを順に探そうと試みます。数学記号が混在した英語テキストを内容としている要素は、二つのフォント(書体)組を必要とし、一つは文字と数値をもち、別のは数学記号を内容としています。フォント(書体)組の選択機序の詳しい説明は セクション 5.2を見てください。

ラテン・日本語・数学記号の文字符号キャラクターのあるテキストを含んでいると予想される分に適したフォント(書体)組の例をここにあげてみます:

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

Baskervilleフォント(ラテン文字符号キャラクターだけのフォント)で入手できる文字符号キャラクターはそのフォントから取られ、日本語はMinchoから取られそして数学記号はSymbolからきます。その他の文字はどんなものでも、汎用フォント系'serif'からきます(くると期待します)。'serif'汎用フォント系は、その他のフォントが入手できない場合にも使われます。

[#^目次へ]

付録D:ガンマ補正(Gamma correction)

(この付録は情報提供で、規範ではありません。)

ガンマ問題にまだ馴染みがないなら、 PNG仕様書[12]ガンマ・チュートリアルを見てください。

コンピューターでは、CRT上で表示する表示代行手段は理想的なCRTを想定し、混乱に起因する明らかなガンマ効果を無視します。これは、今のプラットフォーム上でしなけらばならない最小の処理を意味します:

MSウィンドウズを使っているパーソナル・コンピューター(PC)
なし
X11を使っているユニックス
なし
クイックドローを使っているマック
ガンマ1.39を適用 [13](ColorSync-savvyアプリケーションは、適切な色補正を行うために、単純にsRGB ICCプロフィル [14]に渡すだけかもしれません)。
Xを使っているSGI
/etc/config/system.glGammaValからガンマ値を適用しています(初期値1.70:Irix 6.2かそれ以上で作動するアプリケーションは、色管理システムにsRGB ICCプロフィルを単純に渡すだけかもしれません)。
NeXTStepを使ってるNeXT
ガンマ2.22を適用

「適用ガンマ」は、三つのR・G・Bの各々はOSで処理する前に、 R'=Rgamma・ G'=Ggamma・ G'=Bgammaに変換されなければならないことを意味します。

これは、ブラウザ呼び出す毎に256要素のテーブル検索を一回作成することで、迅速におこなわれます:

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

かくて、色属性毎の、ましてピクセル毎の、複雑な計算をする必要を避けます。

[#^目次へ]

付録E:CSS1の応用と拡張性(The applicability and extensibility of CSS1

(この付録は情報提供で、規範的なものではありません。)

CSS1の役目の目標は、HTML文書用の単純な様式規則機序を作り出すことです。この今の仕様書は、ウェブ上で様式規則を実感するのに要求される簡潔さとより豊富な視覚的な制御をという制作者要望との間にバランスをとったものです。CSS1は、以下のものを提供します:

CSS1が提供しないこと:

CSSの拡張を期待する方向:

CSS1が、発展してほしくない方向:

付録F:1996年12月17日版からの変更箇所

(この付録は、情報提供で規範的なものではありません)

この文書は、先に1996年12月17日出版されたCSS1勧告の改訂版で、以下のリストに変更箇所全てを記載しています。代替スタイル・シートである"errata"を選択すれば、変更箇所全てがハイライトで表現されます。

この改訂編集に際して協力くださったKomashi Yushi・Steve Byrne・Liam QuinそしてTantek Celikに感謝致します。

スペルや印刷間違い

エラー

構造と構成

Copyright C 1996 W3C (MIT, INRIA, Keio ), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.

[#^目次へ]


日本語翻訳版覚書

  1. W3C 文書著作権(知的所有権)覚書 によって要求された通り、オリジナルURL・文書の位置付け・原著著作権覚書を記載しています。
  2. この仕様書の正式版は、W3Cサイトの英語版です。
  3. 翻訳版は、翻訳からくる間違いがあり得ます。また、 [#^目次へ]と移動を補足しています。
iso-2022-jp LF 版で、
<http://www.asahi-net.or.jp/%7Ebd9y-ktu/W3Cccs1/index.html>
Yasutaka Kato 加藤泰孝
<email:y.kato@personal.email.ne.jp>
<email:ykato-ind@umin.ac.jp>