CSSチュートリアル(2) 基本構文

1. 基本構文

CSS の定義は、セレクター (selector)、プロパティ (properties)、プロパティ値 (value) の 3 つの部分で構成されます。
基本的な形式は次のとおりです:
selector {property: value}
(selector {property: value})
セレクターはさまざまな形式で使用できます。通常は、BODY などのスタイルを定義する HTML タグです。 P、TABLE... の属性と値を次のメソッドで定義できます。属性と値はコロンで区切る必要があります。
body {color: black}
セレクターの本体は、ページ、color はテキストの色を制御する属性、black はその色です。この例の効果は、ページ上のテキストを黒にすることです。

属性の値が複数の単語で構成されている場合は、値を引用符で囲む必要があります。たとえば、フォント名は、次のように複数の単語の組み合わせであることがよくあります。
p {font-family: "sans serif" }
(段落フォントをサンセリフとして定義します)

セレクターに複数の属性を指定する必要がある場合は、セミコロンを使用してすべての属性と値を区切ります。
p {text-align: center color: red}
(段落は中央に配置され、段落内のテキストは赤色になります)

定義したスタイルシートを読みやすくするために、次のような分岐した記述形式を使用できます。 black;
font-family: arial
}
(段落は中央に配置され、段落内のテキストは黒、フォントは arial)

2. 同じ属性のセレクターを組み合わせることができます。と書き込む値を指定し、セレクターをカンマで区切ります。これにより、スタイルの重複を減らすことができます。 定義:
h1、h2、h3、h4、h5、h6 { color: green }
(このグループには、すべてのタイトル要素とテキストが含まれます)各タイトル要素は緑色です)
p, table{ font-size: 9pt }
(段落と表のテキスト サイズはサイズ 9 です)
効果は次と完全に同等です:
p { font-size: 9pt }
table { font-size: 9pt }

3. クラス セレクターを使用する

クラス セレクター 同じ要素を分類し、異なるスタイルを定義することができます。クラス セレクターを定義するときは、カスタム クラスの名前の前にピリオドを追加します。 2 つの異なる段落 (1 つは右揃え、もう 1 つは中央揃え) が必要な場合は、まず 2 つのクラスを定義します:
p.right {text-align: right}
p.center {text-align: center}
次に、それを で使用します。別の段落にするには、HTML タグに定義したクラス パラメータを追加するだけです:

この段落は右揃えです

;
この段落は中央に配置されています

注: クラスの名前は、任意の英単語、または英語と数字で始まる組み合わせにすることができます。通常、その機能と効果に基づいて簡単に名前が付けられます。

クラス セレクターを使用する別の方法もあります。セレクターで HTML タグ名を省略すると、複数の異なる要素を同じスタイルで定義できます:
.center {text-align: center}
(. center セレクターはテキストを中央に配置します)
このようなクラスは任意の要素に適用できます。以下では、h1 要素 (タイトル 1) と p 要素 (段落) の両方を「center」クラスに分類します。これにより、両方の要素のスタイルが「.center」クラス セレクターに従います:

このタイトルは中央揃えです

この段落も中央揃えです

注: このクラス選択では HTML タグが省略されています 文字が最も一般的ですこのメソッドを使用すると、事前に定義されたクラス スタイルを任意の要素に簡単に適用できます。

4. ID セレクター

HTML ページでは、ID パラメーターは単一の要素を指定し、ID セレクターはこの単一の要素の別のスタイルを定義するために使用されます。
ID セレクターのアプリケーションはクラス セレクターのアプリケーションと似ており、CLASS を ID に置き換えるだけです。上記の例のクラスを ID に置き換えます:

この段落を右に揃えます

ID セレクターを定義するには、ID の前に「#」記号を追加します名前。クラス セレクターと同様に、ID セレクターの属性を定義するには 2 つの方法があります。次の例では、ID 属性は id="intro" を持つすべての要素と一致します:
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:透明
}
(フォント サイズはデフォルト サイズの 110%、太字、青、背景色は透明です)
次の例では、ID 属性は id="intro" を持つ段落要素のみに一致します:
p#intro
{
font-size :110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
注: ID セレクターは非常に制限されており、特定の要素のスタイルを個別に定義することしかできません。 、通常は特別な場合にのみ使用します。

5. 包含セレクター

は、特定の要素の包含関係のスタイル シートを定義するために使用できます。このメソッドは、要素 1 の要素 2 に対してのみ定義されます。単一の要素 1 または要素 2 に対してのみ定義されます。定義なし。例:
table a
{
font-size: 12px
}
テーブル内のリンクはスタイルを変更し、テキスト サイズは 12 ピクセルですが、テーブルの外側のリンクのテキストはデフォルト サイズのままです。 。

6. スタイルシートのカスケード性

カスケードは継承です。スタイル シートの継承ルールは、外部要素のスタイルが保持され、この要素に含まれる他の要素によって継承されることです。実際、要素内でネストされたすべての要素は、外側の要素で指定された属性値を継承し、特に変更しない限り、ネストされたスタイルの多くのレイヤーを積み重ねることがあります。たとえば、P タグを p タグ内にネストします。
p { color: red; font-size:9pt}
...

この段落のテキストは赤色のフォント サイズ 9 です。

(P 要素のコンテンツは、p によって定義された属性を継承します)
注: 場合によっては、内部セレクターは周囲のセレクターの値を継承しませんが、理論上、これらは特別です。たとえば、上限の属性値は継承されません。段落はドキュメントの BODY と同じ上限の値を持ちません。

さらに、スタイル シートの継承で競合が発生した場合は、最後に定義されたスタイルが常に優先されます。上記の例で P の色が定義されている場合:
p { color: red; font-size:9pt}
p {color: blue}
……

段落は青色 カラー サイズ 9 フォント

段落内のテキスト サイズはサイズ 9 で、p 属性を継承し、色属性は最後の定義に基づいていることがわかります。 。

異なるセレクターが同じ要素を定義する場合、異なるセレクター間の優先順位を考慮する必要があります。 ID セレクター、クラス セレクター、および HTML タグ セレクター。ID セレクターは最後に要素に追加されるため、優先順位が最も高く、次にクラス セレクターが続きます。これら 3 つの関係を超えたい場合は、! important を使用してスタイル シートの優先順位を上げることができます。例:
p { color: #FF0000! important }
.blue { color: #0000FF}
#id1 { color: # FFFF00}
これら 3 つのスタイルをページ内の段落に同時に追加すると、最終的に ! important で宣言された HTML タグ セレクター スタイルに従って赤色のテキストになります。 ! important を削除すると、最も優先度の高い ID セレクターが黄色のテキストになります。

7. コメント

CSS にコメントを挿入して、コードの意味を説明することができます。コメントは、将来コードを編集したり変更したりするときに、コードの意味を理解するのに役立ちます。ブラウザではコメントは表示されません。 CSS コメントは次のように「/*」で始まり「*/」で終わります。
/* 段落スタイルシートを定義します*/
p
{
text-align: center; /* テキストを中央に配置します*/
color: black ; /* テキストは黒です*/
font-family: arial /* フォントは arial */

以上がCSSチュートリアル(2) 基本構文の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。