CSSルールの基本的な形式は何ですか

CSS ルールの基本形式は「セレクター {属性: 属性値;}」です。 「セレクター」は、「{}」でラップされたスタイルがページ内のどのオブジェクトに作用するかをブラウザーに伝えるために使用されます。「属性」は、CSS によって提供される設定スタイル オプションです。「属性値」は、効果を表示するために使用されるパラメーターです。属性の。

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

スタイルは CSS の最小構文単位であり、各スタイルには、次の図に示すように、セレクターと宣言 (ルール) の 2 つの部分が含まれます。

1) セレクター

セレクターは、ページ内のどのオブジェクトにスタイルが作用するかをブラウザーに伝えます。特定のタグ、すべての Web ページ オブジェクト、指定されたクラスまたは ID 値などです。ブラウザがこのスタイルを解析すると、セレクターに基づいてオブジェクトの表示効果がレンダリングされます。

2) 宣言

1 つまたは無数の宣言を追加できます。これらの宣言は、セレクターで指定されたオブジェクトをレンダリングする方法をブラウザーに指示します。

ステートメントには属性と属性値の 2 つの部分を含める必要があり、セミコロンを使用してステートメントの終わりをマークする必要があります。スタイルの最後のステートメントではセミコロンを省略できます。

すべての宣言は中括弧のペア { } 内に配置され、宣言全体がセレクターの直後に配置されます。

3) プロパティ

プロパティは、CSS によって提供されるセット スタイル オプションです。属性名は 1 つ以上の単語で構成され、複数の単語はハイフンで接続されます。これにより、スタイル設定される属性の効果を直感的に表現できます。

4) 属性値 (Value)

属性値は、属性効果のパラメーターを表示するために使用されます。数値や単位、あるいはキーワードなどが含まれます。

[例 1] Web ページのフォント サイズを 12 ピクセル、フォントの色をダーク グレーに定義すると、次のようなスタイルを設定できます。

body{ font-size: 12px; color: #CCCCCC; }

複数のスタイルは、分割方法を考慮せずに並べて配置できます。

[例 2] 段落テキストの背景色を紫に定義すると、上記のスタイルを基に次のスタイルを定義できます。

body{ font-size: 12px; color: #CCCCCC;} p{ background-color: #FF00FF; }

CSS 言語はスペース (セレクター内のスペースを除く) を無視するため、CSS ソース コードの書式設定にスペースを使用できます。上記のコードは次のように美化できます:

body {
    font-size: 12px;
    color: #CCCCCC;
}
p {
    background-color: #FF00FF;
}

This CSS ソースコードを読むと、読みやすく、保守しやすいことが一目でわかります。

どの言語にもコメントが必要です。HTML ではコメントに が使用されますが、CSS ではコメントに /* コメント ステートメント */ が使用されます。

[例3] 上記のスタイルに対して以下のようなコメントが可能です。

body {  /*页面基本属性*/
    font-size: 12px;
    color: #CCCCCC;
}
/*段落文本基础属性*/
p {
    background-color: #FF00FF;
}

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSルールの基本的な形式は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。