Values

<length>

+または-（デフォルトでは+）の直後に正負の記号のない整数または実数が続き、直後に以下の単位識別子（2文字省略形）のいずれかが続く。「 0 」の後の単位識別子は任意。

• em: the 'font-size' of the relevant font
• ex: the 'x-height' of the relevant font
• px: pixels, relative to the viewing device

• in: inches -- 1in = 2.54cm
• cm: centimeters
• mm: millimeters
• pt: points -- 72pt = 1in
• pc: picas -- 1pc = 12pt

<color>

CSS1で定義されているキーワード

◆aqua, ◆black, ◆blue, ◆fuchsia, ◆gray, ◆green, ◆lime, ◆maroon, ◆navy, ◆olive, ◆purple, ◆red, ◆silver, ◆teal, ◆white, ◆yellow

CSS2で追加されたキーワード

◆ActiveBorder, ◆ActiveCaption, ◆AppWorkspace, ◆Background, ◆ButtonFace, ◆ButtonHighlight, ◆ButtonShadow, ◆ButtonText, ◆CaptionText, ◆GrayText, ◆Highlight, ◆HighlightText, ◆InactiveBorder, ◆InactiveCaption, ◆InactiveCaptionText, ◆InfoBackground, ◆InfoText, ◆Menu, ◆MenuText, ◆Scrollbar, ◆ThreeDDarkShadow, ◆ThreeDFace, ◆ThreeDHighlight, ◆ThreeDLightShadow, ◆ThreeDShadow, ◆Window, ◆WindowFrame, ◆WindowText

RGBによる表記

#f00 /* #rgb */

#ff0000 /* #rrggbb */

rgb(255,0,0)

rgb(100%, 0%, 0%) }

<uri>

url(URI), url( URI ), url("URI"), url( "URI" ), url('URI'), url( 'URI' )などが可能。URI中の括弧「 ( ) 」, コンマ「 , 」, 空白類文字, アポストロフィー「 ' 」, 引用符「 " 」は、引用するかバックスラッシュでエスケープしなければならない。

以下の指定は等価。ただし、2番目をきちんと認識するUAは少ない。

1. url( "UR I" )
2. url( UR\ I )

CSS property definitions

Value

A B C

複数の値が並記されている場合、順番通りに全て。

A | B | C

1本線で区切られている場合、そのうち一つだけ。

A || B || C

2本線で区切られている場合、順不同で少なくとも一つ。

{ }

グループ化。

*

0回以上の繰り返し。

+

1回以上の繰り返し。

?

0回または1回。

{A, B}

A回以上B回以下の繰り返し。

<generic-family>

• serif
• sans-serif
• cursive
• fantasy
• monospace

<absolute-size>

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

<relative-size>

[ larger | smaller ]

次のように、画像にfont-sizeを設定しても問題ない。全ての要素に有効。

font-size: 10pt;margin-left: 1em

font-size: 50pt;margin-left: 1em

CSS2では、システムフォントも指定できる。システムフォントにはファミリやウェイトといった情報も含まれていて、定義からもstyle="font: bold caption"のような指定はできない。ただし、style="font: caption;font-weight: bold"とするなら可。

• <SPAN style="font: caption">caption</SPAN> → ボタンやドロップダウン
• <SPAN style="font: icon">icon</SPAN> → アイコン
• <SPAN style="font: menu">menu</SPAN> → メニュー
• <SPAN style="font: message-box">message-box</SPAN> → メッセージボックス
• <SPAN style="font: small-caption">small-caption</SPAN> → スモールキャプション
• <SPAN style="font: status-bar">status-bar</SPAN> → ステータスバー

WinIE4/5はシステムフォントをサポートしていることになっているが、caption | icon | menu | messagebox | smallcaption | statusbarと間違えて実装している。

• <SPAN style="font: messagebox">messagebox</SPAN> → メッセージボックス
• <SPAN style="font: smallcaption">smallcaption</SPAN> → スモールキャプション
• <SPAN style="font: statusbar">statusbar</SPAN> → ステータスバー

キーワードによる指定

指定1	指定2	指定3	解釈
top left	left top		0% 0%
top	top center	center top	50% 0%
right top	top right		100% 0%
left	left center	center left	0% 50%
center	center center		50% 50%
right	right center	center right	100% 50%
bottom left	left bottom		0% 100%
bottom	bottom center	center bottom	50% 100%
bottom right	right bottom		100% 100%

CSS2では、vertical-align属性に長さを指定できる。0はbaselineと同じ。

<string>という値は、セル要素にのみ有効。指定した文字列を基準軸にして、書字方向に従いセルの内容を配列する。

セルの内容に指定した文字列が含まれていない場合、内容の終端が基準軸に接する。セルの内容が複数行の挙動は未定義。

TD { text-align: "." }
   
<TABLE>
<TR><TD>1.50
<TR><TD>10.5
<TR><TD>105.05
<TR><TD>55.
<TR><TD>50
<TR><TD>.05
</TABLE>

  1.50
 10.5
105.05
 55.
 50
   .05

CSS2では、紙面などのページ媒体への出力モデル（@page規則)が導入されている。その規則内では、%で指定した垂直方向のマージン計算法が異なる。

border-color属性値をtransparentに設定すると、幅はあるが透明な状態になる。

定義をみると、CSS1では一つの値しか指定できないが、一つ以上四つ以下値を指定できると解説されている。

hiddenという値はnoneとほぼ同じではあるが、境界の競合が生じた場合の優先順位が異なる。

• <border-width>: thin | medium | thick | <length>
• <border-style>: none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden (CSS2)

• <border-width>: thin | medium | thick | <length>
• <border-style>: none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden (CSS2)

CSS2では、ブロックレベル, 置換要素の内容の高さを、%でも指定できる。参照するのは、包含ブロックの高さ。非置換インライン要素の高さは、line-height属性で決まる（非置換インライン要素のマージン, 境界, パディングは、行の高さに影響を及ぼさない）。

compactという値は、要素をコンパクトボックスにする。浮動せず、絶対配置でもないブロックボックスがコンパクトボックスに続くとき、日本語なら後に続くブロックボックスの左マージンと比較して、一行で収まるのであればコンパクトボックスはマージン領域にインラインボックスとして配置される。そうでなければ、コンパクトボックスはブロックボックスになる。

DT { display: compact }
DD { margin-left: 2em }

<DL>
<DT>ok
<DD>Description
<DT>too long
<DD>Description
</DL>

ok  Description
too long
    Description

run-inという値は、要素をランインボックスにする。浮動せず、絶対配置でもないブロックボックスがランインボックスに続くとき、ランインボックスは後に続くブロックボックスの最初のインラインボックスになる。そうでなければ、ランインボックスはブロックボックスになる。

ランイン要素における継承は、視覚的にその一部となったブロック要素ではなく、本来の親から行われる。

H3 { display: run-in }

<H3>見出し</H3>
<P>段落のテキスト</P>

inline-tableという値は、要素をインラインの表にする。

TABLE.inline { 
  display: inline-table;
  margin: 0.5em;
}

表示テスト

1. disc
2. circle
3. square
4. decimal
5. lower-roman
6. upper-roman
7. lower-alpha
8. upper-alpha
9. none

1. decimal-leading-zero (01, 02, 03)
2. lower-greek (έ, ή, ί)
3. lower-latin (=lower-alpha)
4. upper-latin (=upper-alpha)
5. hebrew (Alef, Bet, ...)
6. armenian
7. georgian
8. cjk-ideographic (一、二、三)
9. hiragana (あ、い、う)
10. katakana (ア、イ、ウ)
11. hiragana-iroha (い、ろ、は)
12. katakana-iroha (イ、ロ、ハ)