Selectors, Properties, and Values - Enrich Human Knowledge

Selectors, Properties, and Values | HTML Dog

HTMLはタグを持つ一方で、CSSはセレクター(selector)を持つ。セレクターは内部と外部スタイルシート内のスタイルに与えられた名前である。このビギナーチュートリアルではHTMLセレクターを扱う。これは単にHTMLタグの名前であり、要素の中の特別なタイプのスタイルを変えるために用いられる。

それぞれのセレクターには中括弧の中にプロパティが置かれている。例えばcolor, font-weight, background-colorなどである。

プロパティの値はコロン（colon）の後に続いて与えられる。（イコールでは無いことに注意する。）そしてセミコロン（semi-colon）で各プロパティが区切られる。

例

body {
    font-size: 14px;
    color: navy;
}

この例ではbodyセレクターのプロパティfont-sizeとcolorに値を与えている。

だから、基本的に、このCSSがHTMLドキュメントに適応されると、bodyタグの間に置いてあるテキスト（つまりそれはブラウザウィンドウに表示されている全てのテキスト）のサイズが14pixelとなり、また色がnavyになる。

Lengths and Percentages

色々とプロパティ専用の単位が値についてあるが、多くのプロパティに対して一般的に使える単位があるので、理解しておくと良い。

px（font-size: 12px）：pixel単位
em（font-size: 2em）：2emは現在のフォントサイズの二倍を意味する。
pt（font-size: 12pt）：印刷媒体で用いられるポイント(point)単位。
%（width: 80%）：割合単位（後述）

他にはpc(picas), cm(centimeters), mm(millimeters), in(inches)など。

値として０を与えるときは、単位を指定する必要はない。例えばボーダー(border)が必要ないときは、

border: 0

とする。

注意：この場合pxは本来の意味のpixelを意味しない。（pixelはコンピュータディスプレイを構成すると小さい正方形一つ一つを指す。）現代のブラウザはユーザーに画面の拡大や縮小をすることを許している。この場合、こちらがサイズをpxで指定したとしても、それはズームされていないブラウザだけの話であって、ユーザーの好きなように大きくなったり小さくなったりする。ただ、これは良いことである。