CSS構造と規則

基本構文

規則

セレクター（Selectors）

どのようなHTML要素でもCSS1セレクターになり得ます。セレクターは、単に特別なスタイルと結び付いた要素です。例えば、以下ののものは、

P { text-indent: 3em }

Pです。

クラス・セレクター

一つのセレクターは異なるクラスを持つことができ、かくて要素は異なったスタイルを持つことができます。例えば、制作者は言語に応じて異なる色で表示したいと思うでしょう：

code.html { color: #191970 }
code.css  { color: #4b0082 }

上の例は二つのクラス、HTMLのCODE要素に cssとhtml、を作り上げています。 CLASS属性は、HTMLで要素のクラスを示唆するのに使われ、例えば、

<P CLASS=warning>Only one class is allowed per 
 selector. For example, code.html.proprietary is invalid.</p>

クラスは、伴う要素がなくても宣言されます：

.note { font-size: small }

このケースでは、 noteクラスは何らのかの要素と一緒に使われていません。

見え方でなく機能によってクラスに名前を付けるのが実践的です。上の例でのnoteクラスは、 smallと名付けられていますが、制作者がこのクラスのスタイルを変えることにしたらもはや文字サイズは小さくなく、意味がなくなります。

IDセレクター

ID selectorsは、要素毎に定義する目的で一つ一つに割り当てられます。このセレクター・タイプは、継承制限に従って限られるときだけに使用されるべきです。IDセレクターは、名前に先行して同定子"#"を使って指定します。例えば、以下のように指定され得ます：

#svp94O { text-indent: 3em }

これは、HTML内では ID属性によって参照されます：

<P ID=svp94O>Text indented 3em</P>

文脈セレクター（Contextual selectors）

文脈セレクターは、空白スペースで区切られた二つ以上の単純なセレクターの単なる文字列です。これらのセレクターは、普通のプロパティーに割り振れられ、カスケーディング序列規則に従って単純なセレクターより優先されます。例えば、以下の文脈セレクター

P EM { background: yellow }

は、 P EMです。この規則によればパラグラフ内の強調文は背景が黄色です；見出しの強調文は影響されません。

宣言（定義）

プロパティー（固有性）

プロパティーには、スタイル（様式）を扱うためにセレクターに指定されます。 propertiesの例としては、 color・ marginそして fontがあります。

値

値宣言は、プロパティーが受ける役割です。例えば colorプロパティーは値 redを受け取ることもあります。

グループ化

スタイル・シートの声明の繰り返しを減らすために、セレクターや宣言のグループ化ができます。例えば、文書内の全ての見出しをグループ化によって一つの宣言にすることができます：

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif }

継承

セレクター内で入れ子化された全てのセレクターは、修正されないなら、外側（親）のセレクターに割り当てられたプロパティ値を実質的に引き継ぎます。例えば ボディ用に定義された色は、パラグラフ内のテキストにも適応させられます。

内側のセレクターがそれを囲むセレクターを継承しないケースもありますが、これらは論理的には例外であるべきです。例えば margin-topプロパティーは、引き継がれません；パラグラフは文書ボディとして同じ上部余白（マージン）を持たないと直観的にわかります。

コメントは、Cプログラム言語で使われると同じ慣例でスタイル・シート内で*印で示されます。CSS1の例は以下のような形式です：

/* COMMENTS CANNOT BE NESTED */

擬似クラスと擬似要素

擬似クラス（Pseudo-classes）と擬似要素（pseudo-elements）は、CSSサポート・ブラウザが自動的に認識する特別な"クラス"と"要素"です。擬似クラスは色々な要素タイプ（ 例えば、訪問済のリンクと作動時のリンクはアンカーの二つタイプを表現します）の中から区別されます。擬似要素は、パラグラフの最初の文字といった、要素のサブ部分を参照します。

擬似クラス乃至は擬似要素は形式をともなう規則は、一定の形式を取ります

selector:pseudo-class { property: value }

乃至は

selector:pseudo-element { property: value }

擬似クラス乃至と擬似要素は、HTMLのCLASS属性とともに特定されるべきではありません。普通のクラスは、以下の様に擬似クラス乃至と擬似要素とともに使いましょう：

selector.class:pseudo-class { property: value }

selector.class:pseudo-element { property: value }

アンカー擬似クラス

擬似クラスで、リンク・訪問済リンク・作動時リンクを異なって表示するように A要素を割り当てることができます。アンカー要素は、 link・ visited乃至 active擬似クラスを与えることができます。訪問済リンクは色々な色や色々な文字サイズ・スタイルで表示するように定義されます。

今選ばれた（作動時）のリンクを色々な色のやや大きい文字で画面に表わされるといった面白い効果が得られます：

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

最初の行の擬似要素

新聞記事、 Wall Street Journalなど、ではよく記事のテキストの最初の行が太文字で全て大文字になっています。CSS1は擬似要素としてこの能力を持っています。 最初の行の擬似要素は、ブロック－レベル要素（ P・ H1など）内でつかいましょう。 最初の行の擬似要素の例は：

P:first-line {
  font-variant: small-caps;
  font-weight: bold }

最初の文字の擬似要素

最初の文字の擬似要素は、大文字やその他効果を作りだすのに使われます。割り当てられたセレクター内のテキストの最初の文字は割り当てられた値に従って表示されます。 最初の文字の擬似要素は、如何なるブロック－レベル要素内でも使われます。例えば：

P:first-letter { font-size: 300%; float: left }

は、大文字を文字サイスで普通の三倍に作り上げます。

カスケーディング（滝状）序列

多元スタイル・シートが使われる場合そのスタイル・シートは、特殊なセレクターの制御とぶつかり合います。この状況下で、どのスタイル・シートの規則が勝るのかという規則があります。以下の特徴が、

! important
! importantを特定することで、規則が重要なものとして指定され得ます。重要なものとして指定されたスタイルは、それがなけれが同等の重みの矛盾するスタイルを凌駕します。おなじように、制作者とユーザーの両者が重要な規則を特定するかもしれないので、重要なケースでは制作者の規則が読み手のものを上書きします。 ! important声明の使用例は：
```
BODY { background: url(bar.gif) white;
       background-repeat: repeat-x ! important }
```
規則の元（制作者のそれ対読み手のそれ）
前に述べたように制作者と読み手の両者はスタイル・シートを特定できます。二つの間の規則が衝突する場合、制作者の規則がそれがなければ同等の重みのある読み手の規則より優先します。制作者と読み手の両者のスタイル．シートは、ブラウザに組み込まれているスタイル・シートを上書きします。

制作者は ! important規則を使うことに慎重になるべきで、というのは如何なるユーザーの! important規則をも上書きするからです。例えばユーザーは視覚的な問題から大きな文字乃至は特別な色を必要としているのかも知れなく、そのようなユーザーはスタイルはページを読むことができるユーザーにとって不可欠である故にある種の ! importantスタイル規則を宣言したいわけです。如何なる ! important規則も、普通の規則を上書きし、だから特別なスタイル要求のあるユーザーがそのページを読むことができるのを確実にするためにもっぱら普通の規則を使うように、と制作者は忠告されます。
セレクター規則：特殊性の計算
スタイル・シートは特殊性のレベルに基づいて衝突するスタイル・シートを上書きもし、一層特徴的なスタイルが必ずより特徴がないものに優先します。これは簡単な計算ゲームで、セレクターの特殊性を計算します。
1. セレクター内のID属性の数をかぞえる。
2. セレクター内のCLASS属性の数をかぞえる。
3. セレクター内のHTMLタグ名の数をかぞえる。
最後に三つの数値をえるために、正確な順位で三つの数を空白がないコンマで記載します（注意、三文字で終わるために数値をより大きな基準に置き代える必要があるかもしれません）。最終的なセレクターに対応する数値リストが低い数値に優先する高い数値で容易に特殊性が決められます。以下は、特殊性によって並べ代えられたセレクターのリストです：
```
#id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
```
特殊性の序列
容易にするために、二つの規則が同じ重みを持っている場合最後の特殊化された規則が優先します。

[ 基本構文 | 擬似クラスと擬似要素 | カスケーディング序列 ]

Maintained by John Pozadzides and Liam Quinn