CSSの構文
CSSルール・セットは、セレクタと宣言ブロックで構成されています。
あなたはスタイルにしたいHTML要素セレクタポイント。
宣言ブロックは、セミコロンで区切られた1つ以上の宣言が含まれています。
各宣言は、コロンで区切られたCSSプロパティ名と値を、含まれています。
CSS宣言は必ずセミコロンで終了し、宣言ブロックは、中括弧で囲まれています。
次の例では、すべての<p>要素には赤い文字色で、中央揃えになります。
CSSセレクタ
CSSセレクタをするために使用されている"find" (または選択)、それらの要素名、ID、クラス、属性、および複数に基づいてHTML要素。
要素セレクタ
要素セレクタは、要素名に基づいて要素を選択します。
あなたはすべてを選択することができます<p>このようなページの要素(この場合は、すべての<p>要素は、中央揃え、赤色のテキストの色となります)。
IDセレクタ
IDセレクタは、特定の要素を選択するために、HTML要素のid属性を使用しています。
IDセレクタは、1つのユニークな要素を選択するために使用されるように要素のidは、ページ内で一意でなければなりません!
特定のIDを持つ要素を選択するには、要素のidに続くハッシュ(#)文字を書きます。
以下のスタイルルールを持つHTML要素に適用されるid="para1"
注:id名は、数字で始めることはできません! |
クラスセレクタ
クラスセレクタは、特定のクラス属性を持つ要素を選択します。
書き込み、特定のクラスを持つ要素を選択するにはperiod (.)クラスの名前が続く文字を、。
以下の例では、とのすべてのHTML要素class="center"赤と中央揃えになります。
また、特定のHTML要素は、クラスによって影響されるべきであることを指定することができます。
以下の例では、唯一の<p>を持つ要素class="center"中央揃えになります。
HTML要素はまた、複数のクラスを参照することができます。
以下の例では、 <p>要素には、に応じてスタイル設定されますclass="center"とにclass="large" :
注:クラス名は数字で始めることはできません! |
セレクタのグループ化
あなたは同じスタイル定義を持つ要素を持っている場合は、このように:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}
これは、コードを最小限にするために、セレクタグループに良くなります。
グループセレクタに、カンマで各セレクタを区切ります。
以下の例では、上記のコードからセレクタをグループ化しています:
CSSのコメント
コメントは、コードを説明するために使用され、後日、ソースコードを編集するときに役立つことがあります。
コメントは、ブラウザによって無視されます。
CSSのコメントで始まり/* and ends with */ 。 コメントは、複数行にまたがることができます。
例
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
»それを自分で試してみてください