CSS文法

このチュートリアルでは、スタイルシートでCSSルールを定義する方法を学びます。CSS属性を使用してHTML要素のスタイルを設定できます。異なるHTML要素には設定できる異なるCSS属性があります。CSS属性はCSSルールに構成されます。CSSルールは、一组のCSS属性を組み合わせて、それらの属性をCSSルールに一致するHTML要素に適用します。

CSS文法を理解する

CSSスタイルシートはルールのセットで構成されており、これらのルールはWebブラウザによって解釈され、それから文書の対応する要素（例えば段落、タイトルなど）に適用されます。

CSSルールには主に2つの部分があります、一つは選択子、もう一つは1つ以上の宣言です：

選択子はCSSルールがHTMLページのどの要素に適用されるかを指定します。

一方、ブロック内の宣言は要素がウェブページ上でどのようにフォーマットされるかを決定します。各宣言には属性と値があり、これらの値はコロン（:）で区切られ、セミコロン（;）で終わり、宣言グループは括弧で囲まれています{}。

この属性は変更したいスタイル属性です。これにはフォント、色、背景などが含まれます。各属性には値があります。例えば、color属性にはvalue blueまたは#0000FFetc。

h1　{color:blue;text-align:center;}

CSSをより読みやすくするために、各行に宣言を配置することができます。以下のように：

h1　{
　　　　color:　blue;
　　　　text-align:　center;
　　　}

上記の例では、h1はセレクタです。color、text-alignはCSS属性であり、指定されたblue（h1タグ内のテキストの色を青にするためのものです）、center（h1タグ内のテキストを中央に配置するためのものです）はこれらの属性の対応値です。

CSSでコメントを書く

通常、コメントはソースコードをより読みやすくするために追加されます。他の開発者（または将来ソースコードを編集するあなた自身）が、CSSで何を試みているかを理解するのに役立ちます。コメントはプログラマーにとって重要ですが、ブラウザは無視します。

CSSコメントはで始まります/*、で終わります*/、以下の例を参照してください：

/*　This　is　a　CSS　comment　*/
h1　{
　　　　color:　blue;
　　　　text-align:　center;
}
/*　This　is　a　multi-line　CSS　comment　that　spans　across　more　than　one　line　*/
p　{
　　　　font-size:　18px;
　　　　text-transform:　uppercase;
}

CSSコードの一部をコメントアウトしてデバッグを行うこともできます。以下のように：

h1　{
　　　　color:　blue;
　　　　text-align:　center;}
/*p　{
　　　　font-size:　18px;
　　　　text-transform:　uppercase;}
*/

CSSの大文字と小文字の区別

CSS属性名や多くの属性値は大文字と小文字を区別しませんが、CSSセレクターズは大文字と小文字を区別します。例えば：.maincontentと.mainContentは二つの異なるclassクラスセレクターズであり、大文字と小文字を区別します。

したがって、安全のために、CSSルールのすべてのコンポーネントが大文字と小文字を区別するべきと仮定することができます。

在次の章中、あなたはさまざまな種類のCSSセレクターズを学びます。