CSS 構文の概要

CSS の定義は

セレクター (selector)、

# # の 3 つの部分で構成されます。 #Properties

プロパティの値。

1. 説明

##例: p {font-family: "sans serif"} (段落フォントをサンセリフとして定義)

指定する必要がある場合セレクターに複数の属性を指定するには、ポイントを使用します。すべての属性と値を数値で区切ります。

例: p {text-align: center; color: red} (段落は中央に配置され、テキストは段落内は赤色です)

同じ属性と値を持つセレクターを組み合わせることができます記号を記述し、コンマを使用して選択範囲を区切ると、スタイルの繰り返し定義を減らすことができます:

h1、h2、h3、h4、h5、h6 {色: 緑} (このグループにはすべてのタイトル要素が含まれます。各タイトル要素のテキストはすべて緑色です)

p, table{ font-size: 9pt} (段落と表のテキスト サイズは9pt)

効果は次と完全に同等です:

#p { font-size: 9pt }

table { font-size: 9pt }

3. クラス セレクター

クラス セレクターを使用すると、同じ要素を分類して異なるスタイルを定義できます。クラス セレクターを定義する場合は、カスタム クラスの名前の前にピリオドを追加します。 2 つの異なる段落 (1 つは右揃え、もう 1 つは中央揃え) が必要な場合は、まず 2 つのクラスを定義します。

p.right {text-align: right}

p.center {text-align:center}

この場合、別の段落では使用せず、HTML タグに定義を追加するだけです。 class パラメーター:

right この段落は右揃えです

center この段落は中央揃えです

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

この段落も中央揃えです

HTML タグを省略するこのクラス セレクターは、最も一般的に使用される CSS の後にありますこのメソッドを使用すると、事前定義されたクラス スタイルを任意の要素に簡単に適用できます。

#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:transparent

} (フォント サイズはデフォルト サイズの 110%、太字、青、背景色は透明)

次の例では、ID 属性は id="intro" を持つ段落要素のみに一致します:

p#intro

{

フォントサイズ：110%;

##フォントの太さ：太字;

color:#0000ff;

背景色: 透明

}

ID セレクターは非常に制限されており、特定の要素のスタイルを個別に定義することしかできず、通常は特殊な状況でのみ使用されます。

CSS アルバム

5. セレクターを含める

テーブル a

{

font-size：12px

}

テーブル内のリンクのスタイルは変更され、テキスト サイズは 12 ピクセルですが、テーブル外のリンクのテキストはデフォルト サイズのままです。

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

##カスケードの性質は継承であり、スタイル シートの継承ルールare external 要素のスタイルは保持され、この要素に含まれる他の要素によって継承されます。実際、要素内でネストされたすべての要素は、外側の要素で指定された属性値を継承し、特に変更しない限り、ネストされたスタイルの多くのレイヤーを積み重ねることもあります。たとえば、P タグを DIV タグにネストします:

div { color: red; font-size: 9pt}

テキストこの段落の赤い 9 ポイントのフォントです (P 要素の内容は DIV で定義された属性を継承します)

内部セレクターが値を継承しない場合があります。周囲のセレクターの一部ですが、理論的にはこれらは特別です。たとえば、上限の属性値は継承されないため、段落はドキュメントの BODY と同じ上限の値を持たないことが直感的にわかります。さらに、スタイル シートの継承が競合する場合は、最後に定義されたスタイルが常に優先されます。上記の例で P の色が定義されている場合:

div { color: red; font-size:9pt}

p { color: blue}

CSS アルバム

この段落のテキストは青色のフォント サイズ 9 です。段落内のテキストのサイズはサイズ 9 で、div 属性を継承しますが、色属性 は最後に定義された に続きます。異なるセレクターが同じ要素を定義する場合、異なるセレクター間の優先順位を考慮する必要があります。 ID セレクター、クラス セレクター、HTML タグ セレクター ID セレクターは最後に要素に追加されるため、優先順位が最も高く、次にクラス セレクターが続きます。これら 3 つの関係を超えたい場合は、! important を使用してスタイル シートの優先順位を上げることができます。たとえば、次のようになります。

p { color: #FF0000! important }

ブルー { カラー：#0000FF}

#id1 { カラー：#FFFF00}

ページ上でも これら 3 つのスタイルを段落に追加すると、最終的には ! important で宣言された HTML タグ セレクター スタイルに従って赤色のテキストになります。 ! important を削除すると、最も優先度の高い ID セレクターが黄色のテキストになります。

#7. コメント

CSS にコメントを挿入して、コードの意味を説明します。コメントは、あなたや他の人が将来コードを編集および変更するときに、コードの意味を理解するのに役立ちます。ブラウザではコメントは表示されません。 CSS コメントは、次のように「/*」で始まり「*/」で終わります:

/* 段落スタイル シートの定義*/

# p

{

text-align: center; /* テキストは中央に水平に配置されます*/

color: black; /* テキストは黒です*/

font-family: arial /* フォントは arial */