REC-CSS1-961217
REC-CSS1-961217
この文書は、W3C勧告である。この文書はW3C (http://www.w3.org/) の会員によって検討され、仕様書が利用に適しているとの全体的な合意に達している。これは確定的な文書であり、参照資料として用いたり、他の文書からの規範的リファレンスとして引用してもよい。W3Cは、この勧告の広範な普及を推進する。
現行のW3C勧告およびその他の技術文書の一覧は http://www.w3.org/pub/WWW/TR/ で見られる。
この文書は、カスケーディングスタイルシート機構の第1水準(CSS1)を規定するものである。CSS1は、制作者や読者がHTML文書にスタイル(例. フォント、色、間隔指定)を添付できるようにする簡素なスタイルシート機構である。CSS1言語は人が読み書き可能なものであり、一般的なデスクトップパブリッシング用語でスタイルを表現するものである。
CSSの基本的な機能のひとつは、スタイルシートがカスケードすることである。制作者は好みのスタイルシートを添付できるし、読者もまた個人的なスタイルシートを持って人的あるいは技術的なハンディキャップを調整してもよい。異なるスタイルシート間の矛盾を解決するための規則は、この仕様書の中で定義される。
この勧告は スタイルシートの領域における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 長さ単位 (length units)
6.2 百分率単位 (percentage units)
6.3 色単位 (color units)
6.4 URL
7 CSS1適合性
7.1 前方互換的 (forward-compatible) 解析
8 参照資料
9 謝辞
付録A: HTML 2.0 のためのサンプルスタイルシート
付録B: CSS1文法
付録C: エンコーディング
付録D: ガンマ補正
付録E: CSS1の応用性および拡張性
この仕様書のテキストにおいて、単引用符 ('...') はHTMLやCSSの抜粋を示す。
単純なスタイルシートを設計することは、簡単である。HTMLを少しと、いくらかの基本的なデスクトップパブリッシング用語とを知りさえすればよいのである。たとえば 'H1' エレメントのテキスト色を青に設定するには、
H1 { color: blue }
とすればよい。
上記の例は単純なCSSルールである。1つのルールは2つの主要な部分からなる。セレクタ ('H1') と宣言 ('color:blue') である。上記の例は、HTML文書をレンダリングするために必要なプロパティのうちのたった1つに影響を与えようとするにすぎないが、それ自体でスタイルシートとしての資格を満たしている。他のスタイルシートと組み合わされて(スタイルシートが組み合わされることは、CSSの基本的な機能のひとつである)、このスタイルシートは文書の最終的な表現を決定することになる。
セレクタはHTML文書とスタイルシートとの間の掛け橋であり、すべてのHTMLエレメント型がセレクタとなりうる。HTMLエレメント型は、HTML仕様書 [2] において定義されている。
'color' プロパティは、HTML文書の表現を決定する50前後のプロパティのひとつである。プロパティとその取りうる値の一覧は、この仕様書において定義される。
HTML制作者は、自分の文書に特別なスタイルを示唆したいときにだけスタイルシートを書けば足りる。ユーザエージェント(しばしば「ウェブブラウザ」または「ウェブクライアント」)は各自、合理的な - しかしおそらく平凡な - 方法で文書を表示するデフォルトのスタイルシートを有しているであろう。付録Aには、HTML 2.0 仕様書 [3] で示唆されているようにHTML文書を表現するためのサンプルのスタイルシートがある。
CSS1言語の形式的文法は 付録Bにおいて定義されている。
スタイルシートが表現に影響を与えるためには、ユーザエージェントがその存在に気づいていなければならない。HTMLをスタイルシートとどのようにリンクすればよいかは、HTML仕様書 [2] が定義している。したがって、この節は参考情報であって、規範的ではない。
<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>見出しは青</H1>
<P STYLE="color: green">だが段落は緑色
</BODY>
</HTML>
この例は、スタイルとHTMLとを結合する4つの方法を示している。'LINK' エレメントを用いて外部スタイルシートをリンクする、 'HEAD' エレメントの内部に 'STYLE' エレメントを置く、 CSSの '@import' 表記を用いてスタイルシートをインポートする、 'BODY' 内部のエレメントに 'STYLE' アトリビュートを設定する、の4つである。最後の選択肢は、スタイルを内容と混ぜ合わせ、伝統的なスタイルシートの一致する利点を失うものである。
'LINK' エレメントは読者が選択できる代替スタイルシートを参照するが、インポートされたスタイルシートは残りのスタイルシートと自動的に併合される。
伝統的に、ユーザエージェントは未知のタグを黙って無視している。結果として、古いユーザエージェントは 'STYLE' エレメントを無視するが、その内容は文書本文の一部として扱われ、そうしたものとしてレンダリングされることになる。移行局面にある間は、'STYLE' エレメントの内容はSGML注釈を用いて隠してもよい。
<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
'STYLE' エレメントは([2] で定義されているように)DTDにおいて "CDATA" として宣言されているから、適合的なSGMLパーサは上記のスタイルシートを除去されるべき注釈とみなさないことになる。
スタイルシートのサイズを縮小するため、コンマで区切られたリストの中にセレクタをグループ化することができる。
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 }
これは前記の例と等価である。
最初の例では 'H1' エレメントの色が青に設定された。強調されたエレメントが内部にある '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 */
百分率値 (percentage value) を許容するプロパティそれぞれについて、それがどのプロパティを参照するかが定義されている。'P' の子エレメントは、'line-height' の計算後の値(すなわち 12pt)を継承するのであって、百分率を継承するのではない。
エレメントの制御のきめ細かさを増すため、HTML [2] に 'CLASS' という新しいアトリビュートが追加されている。'BODY' エレメント内部のエレメントはすべてがクラス化でき、またそのクラスはスタイルシート内で扱うことができる。
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>緑濃き道</H1>
</BODY>
</HTML>
クラス化されたエレメントには通常の継承規則が適用される。文書構造における親エレメントから値を継承するのである。
セレクタ内のタグ名を省略することにより、同じクラスのすべてのエレメントをアドレスできる。
.pastoral { color: green } /* pastoral クラスをもつエレメントすべて */
指定できるクラスはセレクタごとに1つだけである。したがってCSS1では 'P.pastoral.marine' は不法なセレクタである。(後述するが、文脈的セレクタは単純セレクタごとに1つのクラスをもつことができる。)
CSSは CLASS アトリビュートにとても大きな力を与えるので、多くの場合、どのHTMLエレメントにクラスが設定されているかが問題とさえならない - どのようなエレメントでも、他のほとんどどのエレメントをエミュレートさせることができるのである。この力に頼ることは、広域的な意味をもつ文書構造のレベル(HTMLエレメント)を除去するから、勧められない。CLASS を基礎とした構造が有益なのは、クラスの意味が相互に合意されているような限られた地域の内部においてだけである。
HTML [2] は、文書を通じて一意な値をもつことが保証された 'ID' アトリビュートも導入する。それゆえ、このアトリビュートスタイルシートセレクタとして特別な重要性をもつものとなりうる。前に '#' をつけてアドレスできる。
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>横に広いテキスト</P>
上記の例では、最初のセレクタは 'ID' アトリビュート値のせいで 'P' エレメントに合致する。2番目のセレクタは、エレメント型 ('H1') と ID 値との両方を指定しており、したがって 'P' エレメントとは合致しないことになる。
ID アトリビュートをセレクタとして用いることにより、スタイルプロパティをエレメント単位の基盤で設定することができる。スタイルシートは文書構造を高めるために設計されているが、この機能は、制作者が、キャンバス上で見栄えよく表現される文書を、HTMLの構造的エレメントを利用しないで制作することを可能にする。こうしたスタイルシートの利用は推奨されない。
継承はCSS設計者のタイピングの手間を節約する。すべてのスタイルプロパティを設定する代わりに、デフォルトを制作して例外を列挙できるのである。'H1' の内部の 'EM' エレメントに違う色を与えるため、
H1 { color: blue }
EM { color: red }
と指定する者もいるかもしれない。
このスタイルシートが有効となるとき、'H1' の内部であると外部であるとを問わず、強調部分はすべて赤に変わることになる。おそらく 'H1' 内部の 'EM' エレメントだけが赤に変わって欲しかったのであろうが、これは
H1 EM { color: red }
と指定できる。
このとき、セレクタは開放エレメントのスタック上の検索パターンであり、この型のセレクタは文脈的セレクタ (contextual selector) と呼ばれる。文脈的セレクタは、空白で区切られた数個の単純セレクタからなる(ここまで説明してきたセレクタはすべて単純セレクタである)。最後の単純セレクタに合致するエレメント(この場合では 'EM' エレメント)だけが、しかも検索パターンが合致するときだけ、アドレスされる。CSS1における文脈的セレクタは祖先関係を探すが、他の関係(例.親-子関係)は今後の見直しにおいて導入されるかもしれない。上記の例では、検索パターンは、'EM' が 'H1' の子孫であれば、すなわち 'EM' が 'H1' エレメントの内部にあれば、合致する。
UL LI { font-size: small }
UL UL LI { font-size: x-small }
ここでは、最初のセレクタは、少なくとも1つの 'UL' を祖先にもつ 'LI' エレメントを照合する。2番目のセレクタは、最初のセレクタの下位セット、すなわち、少なくとも2つの 'UL' を祖先にもつ 'LI' エレメントを照合する。衝突は、2番目のセレクタがより長い検索パターンであるためにより特定的であるということにより、解決される。これについては カスケードの順序 (3.2) を見ること。
文脈的セレクタは、エレメント型や、CLASS アトリビュート、ID アトリビュート、あるいはこれらの組み合わせを探すことができる。
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
最初のセレクタは、祖先の中に 'DIV' をもつ 'P' エレメントすべてを照合する。2番目のセレクタは、'reddish' というクラスの祖先をもつ 'H1' エレメントすべてを照合する。3番目のセレクタは、'ID=x78y' をもつエレメントの子孫である 'CODE' エレメントすべてを照合する。4番目のセレクタは、'sidenote' というクラスをもつ 'DIV' という祖先を有する 'H1' エレメントすべてを照合する。
数個の文脈的セレクタは、ひとまとめにグループ化できる。
H1 B, H2 B, H1 EM, H2 EM { color: red }
これは、
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
と等価である。
CSSスタイルシートにおけるテキスト注釈は、Cプログラミング言語 [7] における注釈に似ている。
EM { color: red } /* 赤い、まさに赤い!! */
コメントはネストできない。CSS1パーサにとって、注釈は空白と等価である。
CSS1では、スタイルは通常、文書構造における位置に基づいてエレメントに添付される。この単純なモデルは、多種多様なスタイルにとって充分であるが、いくつかの一般的な効果をカバーしていない。擬似クラスおよび擬似エレメントの概念は、CSS1におけるアドレッシングを拡張して、外部的情報がフォーマット処理に影響を与えられるようにする。
擬似クラスおよび擬似エレメントは、CSSセレクタ内で使うことができるが、HTMLソース内には存在しない。それらはむしろ、スタイルシート内のアドレッシングに用いるために一定の条件でユーザエージェントによって「挿入される」ものである。「クラス」や「エレメント」と呼ばれるのは、その挙動を説明するのに便利な方法だからである。具体的には、それらの挙動は仮想タグ列 (fictional tag sequence) によって定義される。
擬似エレメントはエレメントのサブパート (subpart) を処理するために用いられ、擬似クラスはスタイルシートが異なるエレメント型を区別できるようにする。
ユーザエージェントは一般的に、最近訪問したアンカーを、古いアンカーと違えて表示する。これはCSS1においては 'A' エレメント上の擬似クラスを通じて扱われる。
A:link { color: red } /* 未訪問リンク */
A:visited { color: blue } /* 既訪問リンク */
A:active { color: lime } /* アクティブリンク */
'HREF' アトリビュートのある 'A' エレメントはすべて、これらのグループのうちの1つ、しかも1つだけに分けられることになる(ターゲットアンカーは影響を受けない)。ユーザエージェントは、一定時間後にエレメントを 'visited' から 'link' に移動させることを選んでもよい。'active' リンクとは、読者によって(たとえばマウスボタンを押すことにより)現在選択されているリンクである。
アンカー擬似クラスのフォーマッティングは、あたかもクラスが手作業で挿入されているかのようである。ユーザエージェントは、アンカー擬似クラスの転移により現在表示されている文書を再フォーマットすることを要求されない。たとえば、スタイルシートは合法的に 'active' リンクの 'font-size' を 'visited' リンクのものより大きく指定できるが、ユーザエージェントは、読者が '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/">外部リンク</A>
上記の例におけるリンクが訪問済みであれば、青でレンダリングされる。セレクタの中では、通常のクラス名が擬似クラスに先行することに注意すること。
一般的な印刷術的効果の中には、構造的エレメントではなく、むしろキャンバス上にフォーマットされるときの印刷術的項目と関連するものがある。CSS1では、擬似エレメントを通じて、そのような2つの印刷術的項目をアドレスできる。エレメントの最初の行と、最初の文字とである。
CSS1コア: ユーザエージェントは、セレクタ内の ';first-line' または ':first-letter' のあるルールをすべて無視し、または代わりにこれらの擬似エレメント上のプロパティの下位セットだけをサポートしてもよい。(7 を見ること)
'fisrt-line' 擬似エレメントは、キャンバス上にフォーマットされたときの最初の行に特別なスタイルを適用するために用いられる。
<STYLE TYPE="text/css">
P:first-line { font-style: 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>である。
'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).
'first-letter' 擬似エレメントは、一般的な印刷術的効果である "initial caps" や "drop caps" を表わすために使われる。その 'float' プロパティが 'none' であればインラインエレメントに似ており、そうでない場合は浮動エレメント (floating element) に似ている。'first-letter' 擬似エレメントに適用されるプロパティは、これらのものである。フォントプロパティ (5.2), 色および背景プロパティ (5.3), 'text-decoration' (5.4.3), 'vertical-align ('float' が 'none' の場合のみ.5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), マージンプロパティ (5.5.1-5.5.5), パディングプロパティ (5.5.6-5.5.10), ボーダープロパティ (5.5.11-5.5.22), 'float' (5.5.25), 'clear' (5.5.26).
これは、2行にまたがる dropcap 頭文字の作り方である。
<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>
テキストベースのユーザエージェントが '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-letter' 擬似エレメントタグは内容(すなわち頭文字)に隣接することに注意すること。
ユーザエージェントは、どのキャラクタが 'first-letter' エレメント内部にあるかを定義する。通常、最初の文字に先行する引用符は、含まれるべきである。
|| /\ bird in
/ \ the hand
/----\ is worth
/ \ two in
the bush," says an
old proverb.
段落がその他の句読点(例.括弧、省略符号)や、普通は文字とみなされないその他のキャラクタ(例.数字、数学記号)で始まるときは、'first-letter' 擬似エレメントはたいていは無視される。
言語によっては、一定の文字の組み合わせ方について特別な規則をもつ場合がある。たとえば、オランダ語では "ij" という文字の組み合わせが単語の始めに現れれば、それらは両方とも 'first-letter' 擬似エレメント内部のものとみなされるべきである。
'first-letter' 擬似エレメントはブロックレベルエレメントにしか添付できない。
文脈的セレクタ内では、擬似エレメントはセレクタの最後でだけ許される。
BODY P:first-letter { color: purple }
擬似エレメントはセレクタ内でクラスと組み合わせることができる。
P.initial:first-letter { color: red }
<P CLASS=initial>第一段落</A>
上記の例だと、'CLASS=initial' のある 'P' エレメントすべての最初の文字を赤にすることになる。クラスや擬似クラスと組み合わされるときには、擬似エレメントはセレクタの最後に記述されなければならない。記述できる擬似エレメントは、セレクタにつき1つだけである。
数個の擬似エレメントは、組み合わせることができる。
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 のフォントサイズをもつことになる。(キャンバス上にフォーマットされた)最初の行の残りは青であり、段落の残りは赤になる。改行が "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>となる。
CSSにおいては2つ以上のスタイルシートが同時に表現に影響を与えることができる。この機能には主要な理由が2つある。モジュール性と、制作者-読者のバランスである。
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);
H1 { color: red } /* インポートされたスタイルシートを上書きする */
ときには、表現に影響を与えるスタイルシートの間に矛盾衝突が生じるであろう。衝突の解決は各スタイルルールがウエイトを有することに基づく。デフォルトでは、読者のルールのウエイトは制作者の文書内のルールのウエイトよりも小さい。すなわち、もし読み込み中の文書のスタイルシートと読者の個人的なスタイルシートとの間に矛盾衝突があれば、制作者のルールが用いられることになるのである。読者のルールも制作者のルールも、ユーザエージェントのデフォルト値を上書きする。
インポートされたスタイルシートも、下記に定義されたカスケード規則に従い、インポートされた順に、互いにカスケードする。スタイルシート自体に記述されたルールはどれでも、インポートされたスタイルシート内のルールを上書きする。すなわち、インポートされたスタイルシートは、スタイルシート自体のルールよりもカスケード順が低いのである。インポートされたスタイルシート自身も、他のスタイルシートを再帰的にインポートして上書きできる。
CSS1では、'@import' 文はすべて、スタイルシートの最初に、どの宣言よりも前に現れなければならない。このことは、スタイルシート自体のルールがインポートされたスタイルシート内のルールを上書きすることをわかりやすくする。
スタイルシート設計者は自身の宣言のウエイトを増加することができる。
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
上記の例では、最初3つの宣言は積み増されたウエイトをもち、最後の宣言は通常のウエイトをもつ。
important 宣言のある読者ルールは、通常宣言のある制作者ルールを上書きすることになる。important 宣言のある制作者ルールは、important 宣言のある読者ルールを上書きすることになる。
ルールの矛盾抵触は、CSS機構にとって本質的である。エレメント/プロパティの組み合わせの値を知るには、以下のアルゴリズムをたどらなくてはならない。
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 */
擬似エレメントおよび擬似クラスは、それぞれ通常のエレメントおよびクラスとして数えられる。
あるルールが同じエレメント/プロパティの組み合わせに適用される他のルールよりも高いウエイトをもつならば、プロパティ値の検索はいつでも打ち切ることができる。
この戦略は、読者のスタイルシートよりも相当高いウエイトを制作者のスタイルシートに与える。そのため、たとえばプルダウンメニューを通じて、スタイルシートの影響をオフにできる能力を読者が有することが重要である。
エレメントの 'STYLE' アトリビュート内の宣言(例は 1.1 を見ること)は、スタイルシートの最後に記述されたIDベースのセレクタのある宣言と同じウエイトをもつ。
<STYLE TYPE="text/css">
#x97z { color: blue }
</STYLE>
<P ID=x97z STYLE="color: red">
上記の例では、'P' エレメントの色は赤になる。特定性は両方の宣言で同じであるが、カスケード規則5番により、'STYLE' アトリビュート内の宣言が 'STYLE' エレメント内の宣言を上書きすることになる。
ユーザエージェントは、たとえば 'ALIGN' というような他のスタイル的HTMLアトリビュートを優先することを選んでもよい。もしそうするのであれば、これらのアトリビュートは、特定性1の対応するCSSルールに翻訳される。ルールは、制作者のスタイルシートの最初にあるものとして考えられるのであり、後続のスタイルシートルールによって上書きされる可能性がある。移行局面では、この政策は、スタイル的アトリビュートがスタイルシートと共存することをより容易にするであろう。
CSS1は、単純なボックス指向フォーマットモデルを想定している。そこでは、各エレメントは1つ以上の長方形のボックスとなる。('display' の値に 'none' をもつエレメントはフォーマットされず、したがってボックスにならないことになる。) すべてのボックスは、核になる内容領域をもち、これには周囲に任意的 (optional) なパディング領域、ボーダー領域、マージン領域がつく。
_______________________________________
| |
| マージン(透明) |
| margin (transparent) |
| _________________________________ |
| | | |
| | ボーダー | |
| | border | |
| | ___________________________ | |
| | | | | |
| | | パディング | | |
| | | padding | | |
| | | _____________________ | | |
| | | | | | | |
| | | | 内容 | | | |
| | | | content | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| エレメントの幅 |
| element width |
| ボックスの幅 |
| box width |
マージン、パディング、ボーダーのサイズはそれぞれ、 マージン (5.5.1-5.5.5)、 パディング (5.5.6-5.5.10)、 ボーダー (5.5.11-5.5.22) プロパティで設定される。パディング領域はエレメント自身と同じ背景を使う(背景プロパティ (5.3.2-5.3.7) で設定される)。ボーダーの色およびスタイルはボーダープロパティで設定される。マージンはつねに透明であり、よって親エレメントが透けて見えることになる。
ボックスのサイズはエレメント幅(すなわちフォーマット済みテキストや画像)と、パディング、ボーダー、マージン領域との合計である。
フォーマッタの視点からは、エレメントの主要なタイプは2つある。ブロックレベルとインラインとである。
'display' の値が 'block' または 'list-item' であるエレメントは、ブロックレベル (block-level) エレメントである。また、浮動エレメント(floating element. 'float' の値が 'none' 以外であるエレメント)もブロックレベルエレメントとみなされる。
以下の例は、どのようにしてマージンやパディングが、2つの子エレメントをもつ 'UL' エレメントをフォーマットするかを示す。解説図を単純化するために、ボーダーはない。また、この例にある1文字「定数」は合法的な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>リストの2つ目のエレメント
</UL>
_________________________________________________________ | | | A UL マージン(透明) | | _________________________________________________ | | D | | B | | | E UL パディング(赤) | | | | _________________________________________ | | | | H | | F | | | | | a LI マージン(透明であり、 | | | | | | 赤が透けて見える) | | | | | | _________________________________ | | | | | | d | | b | | | | | | | e LI パディング(青) | | | | | | | | | | | | | | | | h リストの最初のエレメント f | | | | | | | | | | | | | | | | g | | | | | | | |_________________________________| | | | | | | | | | | | | a と c の最大値 | | | <- 最大値に注意 | | | _________________________________ | | | | | | | | | | | | | | d | e LI パディング(青) | | | | | | | | | | | | | | | | h リストの2つ目のエレメント f | | | | | | | | | | | | | | | | g | | | | | | | |_________________________________| | | | | | | | | | | | | c LI マージン(透明であり、 | | | | | | 赤が透けてみえる) | | | | | |_________________________________________| | | | | | | | | G | | | |_________________________________________________| | | | | C | |_________________________________________________________|
概して、パディングやマージンプロパティは継承されない。しかし、例が示すように、エレメントの配置は祖先や兄弟との相対関係だから、これらのエレメントのパディングやマージンプロパティは、その子エレメントに影響をもつ。
上記の例にもしボーダーがあったならば、ボーダーはパディングとマージンとの間に現れたはずである。
以下の解説図は、いくつかの有益な用語を紹介する。
---------------- <-- 上端 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 outer edge left inner edge right inner edge right outer edge
下部パディング
bottom padding
----------------
下部ボーダー
bottom border
----------------
下部マージン
bottom margin
---------------- <-- 下端 bottom
外左端 (left outer edge) は、パディング、ボーダー、マージンを考慮に入れたエレメントの端である。内左端 (left inner edge) は、内容だけの端であり、パディング、ボーダー、マージンの内側にある。右についても同じである。上端 (top) は、パディング、ボーダー、マージンを含めたオブジェクトの上端である。インラインエレメントおよび浮動エレメントにだけ定義され、非浮動ブロックレベルエレメントには定義されない。内上端 (inner top) は内容の上端であり、パディング、ボーダー、マージンの内側にある。下端 (bottom) はエレメントの下端であり、パディング、ボーダー、マージンの外側にある。インラインエレメントおよび浮動エレメントにだけ定義され、非浮動ブロックレベルエレメントには定義されない。内下端 (inner bottom) はエレメントの下端であり、パディング、ボーダー、マージンの内側にある。
エレメントの幅 (width) は、内容の幅、すなわち内左端と内右端との間の距離である。高さ (height) は内容の高さ、すなわち内上端から内下端までの距離である。
非浮動のブロックレベルエレメントのマージンの幅は、周囲のボックスの端までの最短距離を指定する。2つまたはそれ以上の隣接する(すなわち、間にボーダーやパディング、内容がない)垂直方向のマージンは押しつぶされ、マージン値の最大値が使われる。たいていの場合、垂直方向のマージンを押しつぶした後のほうが、結果が視覚的により快適であり、設計者が期待したものにより近い。上記の例だと、2つの 'LI' エレメントの間のマージンは、1つ目の LI エレメントの 'margin-bottom' と2つ目の LI エレメントの 'margin-top' との最大値を用いることにより押しつぶされる。同様に、もし 'UL' と1つ目の 'LI' エレメントの間のパディング(定数 "E")が 0 であったならば、UL と1つ目の LI エレメントのマージンは押しつぶされていただろう。
負マージンの場合には、隣接する正のマージンの最大値から隣接する負のマージンの絶対値の最大値が差し引かれる。もし正のマージンがなければ、隣接する負のマージンの絶対値の最大値が0から差し引かれる。
非浮動ブロックレベルエレメントの水平方向の位置およびサイズは、7つのプロパティによって決定される。'margin-left'、'border-left'、'padding-left'、'width'、'padding-right'、'border-right'、'margin-right' である。これら7つの合計は、つねに親エレメントの 'width' に等しい。
デフォルトでは、エレメントの 'width' は 'auto' である。これは、エレメントが置換エレメントでなければ、ユーザエージェントにより、上述した7つのプロパティの合計が親エレメントの幅と等しくなるよう 'width' が計算されるということである。エレメントが置換エレメントならば、'width' の 'auto' という値は自動的にエレメントの本来的な幅で置き換えられる。
7つのプロパティのうち3つは 'auto' に設定できる。'margin-left'、'width'、'margin-right' である。置換エレメントについては、'width' の 'auto' という値は本来的な幅で置き換えられるから 'auto' の値は2つしかあり得ない。
'width' は、ユーザエージェントが定義した非負の最小値をもっている(これは、エレメントごとに違っていてよく、他のプロパティに依存していてもよい)。'width' が明示的に設定されるか、'auto' であって下記の規則のために小さくなりすぎたためにこの限界を下回れば、その値は代わりにこの最小値で置き換えられることになる。
'margin-left'、'width'、'margin-right' のうちちょうど1つが 'auto' であれば、ユーザエージェントは、7つのプロパティの合計が親エレメントの幅に等しくなるような値をそのプロパティに割り当てる。
'auto' のプロパティがひとつもなければ、 'margin-right' の値が 'auto' を割り当てられることになる。
3つのうち2つ以上が 'auto' であり、そのうちの1つが 'width' であれば、残り('margin-left' および/または 'margin-right')は 0 に設定され、'width' は7つのプロパティの合計を親エレメントの幅と等しくするために必要な値を得ることになる。
そうではなくて、'margin-left' と 'margin-right' の両方が 'auto' であれば、それらは等しい値を設定される。これははエレメントをその親エレメントの内側で中央寄せにすることになる。
インラインまたは浮動のエレメントの7つのプロパティの1つの値として 'auto' が設定されれば、あたかも 0 が設定されたかのように扱われることになる。
垂直方向のマージンとは異なり、水平方向のマージンは押しつぶされない。
'display' プロパティ値に 'list-item' をもつエレメントは、ブロックレベルエレメントとしてフォーマットされるが、リスト項目マーカーがその前に立つ。マーカーの型は 'list-style' プロパティによって決定される。マーカーは 'list-style' プロパティの値にしたがって置かれる。
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>最初の項目が最初に来る
<LI>2つ目の項目が2つ目に来る
</UL>
<UL CLASS=COMPACT>
<LI>最初の項目が最初に来る
<LI>2つ目の項目が2つ目に来る
</UL>
上記の例は、たとえばこうフォーマットされるであろう。
* 最初の項目が
最初に来る
* 2つ目の項目が
2つ目に来る
* 最初の項目が
最初に来る
* 2つ目の項目が
2つ目に来る
右横書きのテキストだったならば、マーカーはボックスの右側に来ただろう。
'float' プロパティを用いて、エレメントを通常のエレメントの流れの外部に来るように宣言でき、そのときはブロックレベルエレメントとしてフォーマットされる。たとえば、ある画像の 'float' プロパティを 'left' に設定することで、その画像は、他のブロックレベルエレメントのマージン、パディング、ボーダーに達するまで、左に動かされる。通常の流れは右側で折り返すことになる。エレメント自体のマージン、ボーダー、パディングは尊重され、マージンは隣接するエレメントのマージンと押しつぶされることはない。
浮動エレメントは以下の制約に従って位置決めされる(用語の説明は、4.1 を見ること)。
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG SRC=img.gif>
サンプルテキストのマージンは...
</BODY>
上記の例だと、たとえばこうフォーマットされる。
__________________________________________ | | BODY マージンと P マージンの最大値 | ________________________________ | | | サンプルテキスト | B | P | IMG マージン のマージンは、浮 | O | | _____ 動エレメントがマ | D | マ | | | ージン、ボーダー、 | Y | | | | IMG | パディングを尊重 | | ジ | | | しつつ親エレメン | マ | ン | |_____| トの端へ動かされ | │ | | るとはどういうこ | ジ | | とかを示す以外に | ン | | は何の目的もない。 | | |隣接する垂直方向のマージンは、非 | | |浮動ブロックエレメントの間では押 | | |しつぶされる。
'P' エレメントのマージンが浮動の 'IMG' エレメントを取り囲んでいることに注意すること。
他のエレメントのマージン、ボーダー、パディング領域に浮動エレメントが重なりうる状況は、2つある。
ブロックレベルエレメントとしてフォーマットされないエレメントは、インライン (inline) エレメントである。インラインエレメントは、他のエレメントと行空間を共有できる。この例を考えてみよう。
<P>いくつかの<EM>強調を受けた</EM>単語が<STRONG>現れる</STRONG>。</P>
'P' エレメントは通常はブロックレベルエレメントであるが、'EM' と 'STRONG' はインラインエレメントである。もし 'P' エレメントが、エレメント全体を1行にフォーマットできるだけ広ければ、その行には2つのインラインエレメントがあることになる。
いくつかの強調を受けた単語が現れる。
もし1行にフォーマットするのに充分な場所がなければ、インラインエレメントは数個のボックスに分割されることになる。
<P>いくつかの<EM>強調を受けた単語が</EM>ここに現れる。</P>
上記の例は、このようにフォーマットされることもある。
いくつかの強調を受けた 単語がここに現れる。
インラインエレメントがマージン、ボーダー、パディング、添付されたテキスト装飾をもっていても、エレメントが改行されるところでは何の影響もないであろう。
-------------
いくつかの|強調を受けた
-------------
-------
単語が|ここに現れる。
-------
(上記の「図」は、アスキーグラフィックを用いているため、少し歪んでいる。行の高さの計算方法の解説については 4.4 を見ること。)
置換エレメントは、エレメントから指し示された内容で置き換えられるエレメントである。たとえば、HTMLでは 'IMG' エレメントは 'SRC' アトリビュートで指し示された画像で置き換えられる。置換エレメントは、それ自身の本来的な寸法 (intrinsic dimensions) を携えて到来すると考えることができる。'width' プロパティの値が 'auto' であれば、本来的な幅がエレメントの幅として用いられる。'auto' 以外の値がスタイルシートで指定されていれば、この値が使われ、置換エレメントは適宜サイズ変更される(サイズ変更の方法はメディアの型に依存することになる)。'height' プロパティも同じように使われる。
置換エレメントは、ブロックレベルにもインラインにもなりうる。
すべてのエレメントは 'line-height' プロパティをもつ。これは主にテキストの行の合計の高さを与える。その行の高さに達するよう、行のテキストの上下には空白が追加される。たとえば、テキストが 12pt の高さで、'line-height' が '14pt' に設定されていれば、2pt、すなわち行の上に 1pt、下に 1pt の余分の空白が追加される。空エレメントは、内容をもったエレメントのように、これらの計算に影響を及ぼす。
フォントサイズと 'ling-height' との間の差は リーディング (leading) と呼ばれる。リーディングの半分は 半リーディング (half-leading) と呼ばれる。フォーマット後は、各行は長方形の行ボックス (line-box) を形成することになる。
もし1行のテキストが(その行に複数のインラインエレメントがあるために)異なる 'line-height' 値を含んでいれば、それらの節のそれぞれが、自身の半リーディングを上下に有する。行ボックスの高さは、最も高い節の上端から最も低い節の下端までである。上端および下端は必ずしも最も背の高いエレメントとは一致するとは限らない。エレメントは 'vertical-align' プロパティで垂直方向に位置決めできるからである。段落を形成するために、それぞれの行ボックスは前の行の直下に積み重ねられる。
非置換インラインエレメントの上下のパディング、ボーダー、マージンは行の高さに影響しないことに注意すること。換言すると、選ばれたパディングやボーダーの割に 'line-height' が小さすぎれば、他の行にあるテキストと重なることになるのである。
その行にある置換エレメント(例.画像)は、置換エレメントの上端(すなわち、そのパディング、ボーダー、マージンを全部含めて)が最も背の高いテキスト節の上にあるか、または下端が最も低いものの下にあるならば、行ボックスを拡張することができる。
通常の場合、段落を通じて 'line-height' の値が1つしかなく背の高い画像もないとき、上記の定義は連続する行のベースラインがちょうど 'line-height' だけ離れていることを保証することになる。たとえばテーブル(組み表)のように異なるフォントのテキストの列を整列する必要があるとき、このことは重要である。
これは隣接する2つの行が互いに重なりあうことを防止しないことに注意すること。'line-height' はテキストの高さよりも小さくてもよく、この場合にはリーディングは負になる。このことは(たとえば、大文字しか含んでいないために)テキストがディセンダを含んでいないことがわかっていれば便利であって、行をより密着させることができる。
キャンバスは、文書がレンダリングされる、ユーザエージェントの描画面の部分である。文書の構造エレメントにはキャンバスに対応するものがなく、このことは文書をフォーマットするときに2つの問題を生じさせる。
最初の質問に対する合理的な答の1つは、キャンバスの初期サイズはウィンドウサイズを基礎とするということであるが、CSS1はこの問題をユーザエージェントの決定に委ねる。ウィンドウがサイズ変更されたときには、ユーザエージェントにはキャンバスのサイズを変更することを期待することも合理的であるが、これもまたCSS1の射程外である。
HTML拡張は、2つ目の質問に対する先例を設定している。'BODY' エレメント上のアトリビュートがキャンバス全体の背景を設定するのである。設計者の期待をサポートするために、CSS1はキャンバスの背景を知るための特別な規則を導入する。
もし 'HTML' エレメントの 'background' の値が 'transparent' と異なればそれを使うが、そうでなければ 'BODY' エレメントの 'background' 値を使う。結果の値が 'transparens' であれば、レンダリングは定義されない。
この規則は、
<HTML STYLE="background: url(http://style.com/marble.png)"> <BODY STYLE="background: red">というスタイル記述を許容する。
上記の例では、キャンバスが "marble" で覆われることになる。'BODY' エレメントの背景(キャンバスを完全にカバーするかもしれないし、しないかもしれない)は赤ということになる。
キャンバスに働きかける他の方法が利用可能になるまで、キャンバスプロパティは 'BODY' エレメント上で設定されることが勧められる。
現行のCSS1プロパティや値は、'BR' エレメントの挙動を記述できない。HTMLでは 'BR' エレメントは単語間の改行を指定する。効果面では、このエレメントは改行で置き換えられる。CSSの将来のバージョンは追加または置き換えられた内容を扱うかもしれないが、CSS1ベースのフォーマッタは 'BR' を特別に扱わなければならない。
スタイルシートは、スタイルプロパティに値を割り当てることにより、文書の表現に影響を与える。この節は、CSSの、定義されているスタイルシートプロパティとそれに対応する取りうる値とのリストを列挙するものである。
以下のテキストにおいて、各プロパティに許容されている値は、次のような統語論を使って列挙される。
値: N | NW | NE
値: [ <length> | thick | thin ]{1,4}
値: [<family-name> , ]* <family-name>
値: <url>? <color> [ / <color> ]?
値: <url> || <color>
"<" と ">" との間の語は、値の型を与える。もっともよくある型は <length>、<percentage>、<url>、<number> であり、これらは 6 で解説されている。より特化された型(例.<font-family>、<border-style>)は、対応するプロパティの下に解説されている。
その他の語は、引用符抜きで文字どおりに現れなくてはならないキーワードである。スラッシュ (/) やコンマ (,) も文字どおりに現れなくてはならない。
併置されているいくつかのものは、そのすべてが与えられた順序で発生しなければならないことを意味する。縦棒 (|) は選択肢を分離する。それらのうちの1つが発生しなければならない。二重縦棒 (A || B) は、AもしくはBのいずれか一方、または両者が任意の順序で発生しなければならないことを意味する。角括弧 ([]) は、グループ化のためのものである。併置は二重縦棒よりも強く、二重縦棒は縦棒よりも強い。したがって "a b | c || d e" は "[ a b ] | [ c || [ d e ]]" と等価である。
型、キーワード、括弧でくくられたグループはどれも、次の修飾子のうちの1つが続けられる場合がある。
フォントプロパティの設定は、スタイルシートの最も一般的な利用のうちのひとつである。残念ながら、フォント分類についてよく定義されて万国共通に受け入れられている分類学は存在せず、あるフォントファミリーにあてはまる用語が他のフォントファミリーには適切でない場合がある。たとえば、'italic' は斜字体テキストを類型化するために一般的に用いられるが、斜字体テキストは Oblique、Slanted、Incline、Cursive、Kursiv と類型化される場合もある。それゆえ、典型的なフォントプロパティを特定のフォントに割り付けることは、単純な問題ではないのである。
CSS1が定義するプロパティは、 'font-family'、 'font-style'、 'font-variant'、 'font-weight'、 'font-size'、 'font' である。
受け入れられている万国共通のフォントプロパティの分類学はないから、プロパティのフォントフェイスへの照合は注意深く行われなければならない。多数のユーザエージェントにわたって照合処理の結果が(それぞれに同じフォントフェイスライブラリが存在していれば)可能な限り一貫性を有することを確保するために、プロパティはよく定義された順序で照合される。
(上記のアルゴリズムを最適化すれば、キャラクタごとにCSS1プロパティを再訪問する必要を避けることができる。)
上記(2)からのプロパティごとの照合規則は、以下の通りである。
値: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
初期値: ユーザエージェント特有
適用対象: すべてのエレメント
継承: される
百分率値: N/A
値は、フォントファミリー名および/または一般的ファミリー名の、優先順位つきリストである。他のほとんどのCSS1プロパティとは異なり、選択肢であることを示すため、値はコンマで区切られる。
BODY { font-family: gill, helvetica, sans-serif }
リストの値には2つの型がある。
スタイルシート設計者は、最後の選択肢として一般的フォントファミリーを提供するように勧められる。
空白を含んでいるフォント名は、引用符で括られるべきである。
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
引用符で括ることが省略されていれば、フォント名の前後の空白キャラクタは無視され、フォント名内部の空白キャラクタの連なりは1つのスペースに変換される。
値: normal | italic | oblique
初期値: normal
適用対象: すべてのエレメント
継承: される
百分率値: N/A
'font-style' プロパティは、フォントファミリー内部で、標準のフェイス(ときに、"roman" や "upright" といわれる)と斜字体フェイス(itaric、oblique)との間で選択する。
'normal' という値はユーザエージェントのフォントデータベース内で 'normal' として分類されているフォントを選択し、'oblique' は 'oblique' に分類されているフォントを選択する。'italic' という値は、'italic' に分類されているフォント、またはもしそれが利用可能でなければ 'oblique' に分類されているフォントを選択する。
ユーザエージェントのフォントデータベース内で 'oblique' に分類されているフォントは、実際には標準フォントを電子的に傾けることによって生成されたものであってもよい。
Oblique または Slanted、Incline を名前の中にもっているフォントは一般的に、ユーザエージェントのフォントデータベース内では 'oblique' に分類されるであろう。Italic または Cursive、Kursiv を名前の中にもっているフォントは一般的に、'italic' に分類されるであろう。
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
上記の例では、'H1' 内部の強調を受けたテキストは、標準フェイスで現れることになる。
値: normal | small-caps
初期値: normal
適用対象: すべてのエレメント
継承: される
百分率値: N/A
フォントファミリー内のもう一つのバリエーション型は、小大文字 (small-caps) である。小大文字フォントでは、小文字が大文字と同じように見えるが、サイズが小さくて比率もわずかに異なっている。'font-variant' プロパティはそのフォントを選択する。
'normal' という値は小大文字フォントでないフォントを選択し、'small-caps' は小大文字フォントを選択する。もし小大文字フォントが標準フォントを取って、縮小された大文字キャラクタによって小文字を置き換えることで作成されれば、それは受け入れられる(が要求はされない)。最後の手段としては、大文字が小大文字フォントの代わりとして用いられることになる。
以下の例は、強調を受けた単語が斜字体 (oblique) の小大文字になる、小大文字の 'H3' エレメントを帰結する。
H3 { font-variant: small-caps }
EM { font-style: oblique }
オールドスタイルの数字や、小大文字の数字、密着文字や拡大文字などをもつフォントのように、フォントファミリー内に他の変種がある場合もある。CSS1はそれらを選択するプロパティをもっていない。
CSS1コア: このプロパティがテキストを大文字に変形させる限りにおいて、'text-transform' と同じ考慮が妥当する。
値: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初期値: normal
適用対象: すべてのエレメント
継承: される
百分率値: N/A
'font-weight' プロパティは、フォントのウエイトを選択する。'100' から '900' までの値は順序つきの並びを形成し、そこではそれぞれの数が、少なくともその前に来るものと同じだけ濃いウエイトを示している。'normal' というキーワードは '400' と同義であり、'bold' は '700' と同義である。'normal' と 'bold' 以外のキーワードはフォント名とよく混同されているようであり、したがって数的スケールが9値リストのために選ばれた。
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
'bolder' および 'lightet' という値は、親エレメントから継承されたウエイトとの相対比較のフォントウエイトを選択する。
STRONG { font-weight: bolder }
子エレメントは、結果のウエイトを継承するのであって、キーワード値を継承するのではない。
フォント(フォントデータ)は一般的に、プロパティの値がフォントの「ウエイト」を説明する名前であるようなプロパティを1つまたは以上有している。これらのウエイト名には、万国共通の受け入れられている意味論が存在しない。それらの主要な役割は、単一フォントファミリー内部で異なる濃さのフェイスを区別することである。多数のフォントファミリーにわたる利用は、きわめて多様である。たとえば、あなたが bold だと思うかもしれないフォントが、そのデザイン内部で「標準」フェイスがどれだけ黒いかによって、Regular、Roman、Book、Medium、Semi- または DemiBold、Bold、Black と記述されているかもしれないのである。名前の標準的な使用法はないので、CSS1におけるウエイトプロパティ値は、'400'(または 'normal')がそのファミリーの「標準」テキストフェイスに対応する数的スケール上で与えられる。そのフェイスに関連づけられるウエイト名は、一般的に、Book、Regular、Roman、Normal や、ときには Medium ということになるであろう。
ファミリー内部の他のウエイトの、数的ウエイト値への関連づけは、そのファミリー内部の濃さの順を保存することだけを意図している。しかしながら、以下の発見的教授法は、典型的な場合にどのように割り当てがなされるかを教えてくれる。
以下の2つの例は、その処理を解説するものである。"Example1" ファミリーには4つのウエイトがあり、薄いものから濃いものへと順に Regular、Medium、Bold、Heavy であるとする。また、"Example2" ファミリーには6つのウエイト Book、Medium、Bold、Heavy、Black、ExtraBlack があるとする。2つ目の例で、どのようにして "Example2 ExtraBlack" を何にも割り当てないことと決めているのかに注意すること。
利用可能なフェイス | 割り当て | 穴埋め
----------------------+---------------+-------------------
"Example1 Regular" | 400 | 100, 200, 300
"Example1 Medium" | 500 |
"Example1 Bold" | 700 | 600
"Example1 Heavy" | 800 | 900
利用可能なフェイス | 割り当て | 穴埋め
----------------------+---------------+-------------------
"Example2 Book" | 400 | 100, 200, 300
"Example2 Medium" | 500 |
"Example2 Bold" | 700 | 600
"Example2 Heavy" | 800 |
"Example2 Black" | 900 |
"Example2 ExtraBlack" | (none) |
'bolder' や 'lighter' という相対指定キーワードの目的は、そのファミリー内部でフェイスを濃くしたり薄くしたりすることであり、またファミリーはすべての記号的ウエイト値に割り当てられるフェイスをもっていない場合があるから、 'bolder' の合致はそのファミリー内部でクライアント上で利用可能な次に濃いフェイスに対してのものであり、'lighter' の合致はそのファミリー内部の次に薄いフェイスに対してのものである。厳密には、'bolder'、'lighter' という相対指定キーワードの意味は以下の通りである。
'font-weight' 値のそれぞれについて、それより濃いフェイスがあるという保証はない。たとえば、フォントによっては標準とボールドフェイスしかないかもしれないし、他のフォントは異なる8つのフェイスウエイトをもっているかもしれない。ユーザエージェントがどのようにファミリー内のフォントフェイスをウエイト値に割り付けるかについては、保証はない。唯一の保証は、与えられた値のフェイスは、より薄い値のフェイスよりも濃くないことはないであろうということである。
値: <absolute-size> | <relative-size> | <length> | <percentage>
初期値: medium
適用対象: すべてのエレメント
継承: される
百分率値: 親エレメントのフォントサイズとの相対比較
長さ値や百分率値は、エレメントのフォントサイズを計算するときに、フォントサイズ対応表を考慮に入れるべきではない。
負の値は許されない。
他のすべてのプロパティでは、'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つの宣言は同じである。
値: [ <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 }
2つ目のルールでは、フォントサイズの百分率値('80%')は親エレメントのフォントサイズを参照する。3つ目のルールでは、行高の百分率はエレメント自身のフォントサイズを参照する。
上記の最初3つのルールでは、'font-style'、'font-variant'、'font-weight' は明示的に言及されていないが、このことはこれら3つすべてがその初期値('normal')に設定されることを意味する。4つ目のルールは、'font-weight' を 'bold' に、'font-style' を 'italic' に設定し、黙示的に 'font-variant' を 'normal' に設定する。
5つ目のルールは、'font-variant'('small-caps')、'font-size'(親エレメントの 120%)、'line-height'(フォントサイズの 120%)、'font-family'('fantasy')に設定する。残りの2つのプロパティ 'font-style' と 'font-weight' には、'normal' というキーワードが適用されることになる。
これらのプロパティは、エレメントの色(しばしば前景色:foreground color と呼ばれる)および背景(すなわち、内容がレンダリングされる面)を記述する。背景色および/または背景画像が設定できる。画像の位置、画像が繰り返されるか、またどのように繰り返されるか、キャンバスとの相対比較で画像が固定されるかスクロールされるか、も設定できる。
'color' プロパティは普通に継承される。背景プロパティは継承されないが、'background-color' の初期値が 'transparent' であるため、デフォルトでは親エレメントの背景画像が透けて見えることになる。
値: <color>
初期値: ユーザエージェント特有
適用対象: すべてのエレメント
継承: される
百分率値: N/A
このプロパティは、エレメントのテキスト色(しばしば 前景:foreground 色といわれる)を記述