各プロパティは、それらが取ることのできる値の型が決められています。例えば、colorプロパティには「色」を指定することはできても「長さ」を指定することはできません。このページでは基本的なデータ型を説明します。
数値には整数と実数があります。どちらも"-"か"+"をつけることができます。10進数で表記します。
数値に単位をつけたものが長さです。長さが0のときは単位を省略することができます。
単位は何かに対する比率で長さを表す相対単位と物理的な長さを表す絶対単位に分類されます。
相対単位は次の三つです。
emfont-sizeプロパティの算出値を1emとします。ただし、emがfont-sizeプロパティに対して使われたときは、親要素のfont-sizeプロパティの値を1emとします。exfont-sizeプロパティに対して使われたときは、親要素のフォントを参照します。px絶対単位は次の五つです。
cmmminptpc相対単位と絶対単位は必要に応じて使いわけることが肝要です。相対単位のemとexはフォントサイズを参照するため、参照するフォントサイズが変われば算出される値も変わります。pxは解像度が変わらなければ算出される値も変わらない固定的な単位です。
絶対単位は出力デバイスの特性が分かっているとき(プリンタ等)に利用すべきで、それ以外の場合には用いないほうがよいでしょう。
数値に"%"をつけたものがパーセント値です。パーセント値も相対単位を伴なう長さと同じように、相対的な値です。何を参照するのかはプロパティごとに定義されています。
色はキーワードかRGBの数値を指定して表します。CSS 2.1で色を表すキーワードは次の17種類です。
| キーワード | 対応するRGB値 | 色 |
|---|---|---|
maroon |
#800000 | |
red |
#ff0000 | |
orange |
#ffa500 | |
yellow |
#ffff00 | |
olive |
#800000 | |
purple |
#800080 | |
fuchsia |
#ff00ff | |
white |
#ffffff | |
lime |
#00ff00 | |
green |
#008000 | |
navy |
#000080 | |
blue |
#0000ff | |
aqua |
#00ffff | |
teal |
#008080 | |
black |
#000000 | |
silver |
#c0c0c0 | |
gray |
#808080 |
これに加えて、利用者の環境に合わせたシステムカラーも利用できます。システムカラーについては18.2 System Colors - User interfaceを参照してください。
RGB値の形式で指定する場合は、"#"の後にR(赤)、G(緑)、B(青)の割合を16進数を用いて00?ffまでの範囲で示します。#rgbのように16進数を3桁で表記したときは、#rrggbbのように6桁の16進数に変換されます。
#ff0000#f00 (= #ff0000)またrgb()関数を使うこともできます。その場合は、かっこの中に0?255までの10進数の整数か0%?100%までのパーセント値を三つ、R、G、Bに対応する順番でカンマ(,)区切に並べます。
rgb(255, 0, 0) (= #ff0000)rgb(100%, 0%, 0%) (= #ff0000)文字列は二重引用符(")か単引用符(')で囲みます。二重引用符の中に単引用符を含めたり、単引用符の中に二重引用符を含めることができます。引用符の中に同じ引用符を含めるときは、バックスラッシュ(\)でエスケープする必要があります。
"This is a \"string\"."'This is a \'string\'.'文字列には直接改行を含めることができません。改行を含めるには行送り(LF)を表すエスケープ文字"\A"、もしくは"\00000a"を利用します。
"This is a string.\A This is a new line.""This is a string.\00000aThis is a new line."また、文字列を見た目の上だけで改行したいときは、改行の直前に"\"を置いて改行を無効にします。
"This is a not so\
very long string"URIはurl()関数を用いて表現します。URIは二重引用符か単引用符で囲むことができます。
url("http://www.example.com/image.png")url(http://www.example.com/image.png)引用符で囲まれていないURIに含まれる括弧、カンマ、空白文字類、引用符などは、バックスラッシュを用いてエスケープするか、"%"を用いたエスケープを行わなければいけません。例えば、"(" は "\(" か "%28" とします。
URIが相対URIのときは、スタイルシートのURIを基準として絶対URIに解決されます。例えば、URIがurl("back.png")で、スタイルシートのURIがhttp://www.example.com/css/style.cssなら、"back.png"は"http://www.example.com/css/back.png"に解決されます。ソース文書のURIを基準とするのではないことに注意してください。
内容生成 - カウンタを参照してください。
識別子はプロパティの値の他、タイプセレクタ、クラスセレクタ、IDセレクタやカウンタの名前になります。識別子に使用できる文字はアルファベット[a-zA-Z]、数字[0-9]、ハイフン(-)、アンダースコア(_)、ASCII以外のUnicode文字に限られています。識別子は数字やハイフンに続く数字で始めることができません。
特定のプロパティは特定のキーワードを値にすることができます。例えばbackground-colorプロパティには透明を表す"transparent"を指定できます。キーワードは引用符で囲んではいけません。引用符で囲まれたものは<文字列>となります。
○background-color: transparent×background-color: "transparent"