CSS 構文の概要

CSS の定義は

セレクター (selector)、

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

プロパティの値。

#構文: selector {property: value} (selector {property: value})

1. 説明

セレクターはさまざまな形式で使用できますが、一般的には、BODY、P、TABLE などのスタイルを定義する HTML タグです。その属性と値は、次のように定義できます。属性と値はコロンで区切る必要があります:

例: body {color: black}、この例の効果は、ページ上のテキストを黒にすることです。

属性の値が複数の単語で構成されている場合は、値に引用符を追加する必要があります。たとえば、フォントの名前は、多くの場合、複数の単語の組み合わせです。

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

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

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

2. セレクター グループ

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

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 の後にありますこのメソッドを使用すると、事前定義されたクラス スタイルを任意の要素に簡単に適用できます。

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

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

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

p#intro

{

フォントサイズ：110%;

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

color:#0000ff;

背景色: 透明

}

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

CSS アルバム

5. セレクターを含める

特定の要素のスタイル シートを個別に定義します。要素 1 には要素 2 が含まれます。このメソッドは要素 1 内の要素 2 のみを定義します。個別の要素 1 または要素 2 の定義はありません。例:

テーブル 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 */

}

CSS アルバム

css は、テキスト ツールや Dreamweaver 開発など、あらゆるテキスト作成ツールで開発できます。 。 CSS も言語です。この言語は HTML またはフォーラムと組み合わせる必要があります。現時点でページ上の式形式は垂直リストであり、十分に美しくありません。CSS を使用してこのリストを水平ナビゲーション バーに改善できます。およびハイパーリンク:

css 部分 :

ul{

list-style:none;

margin:0px;/ *IE ブラウザのインデントを設定*/

padding:0px; /*標準ブラウザのインデントを設定*/

}

ul li{マージン:0px; パディング:0px; float:left;}

ul li a{表示:ブロック;幅: 100px;高さ:30px;背景:#efefef;色:#333;テキスト装飾:なし;テキスト配置:センター}

#ul li a:hover{background:#333 ;color:#fff;}

CSS を追加すると、このリストは水平ナビゲーション バーになります。ハイパーリンクには明るい背景、灰色のフォント、下線なし、高さ 30 ピクセル、幅は 100 ピクセルです。このハイパーリンクの上をマウスが通過すると、灰色の背景と白いフォントに変わります。ホームページを作成するときに CSS 技術が使用されます。これにより、ページのレイアウト、フォント、色、背景、その他の効果をより正確に制御できるようになります。対応するコードに簡単な変更を加えるだけで、同じページのさまざまな部分、または別のページを持つ Web ページの外観や形式を変更できます。

実現できる機能:

(1) ほぼすべてのブラウザで使用できます。

(2) 従来は画像変換を行う必要があった一部の機能を CSS を使用して簡単に実装できるようになり、ページのダウンロードが高速化されます。

(3) ページ上のフォントをより美しく、配置しやすくして、本当に目を楽しめるページにします。

(4) ページのレイアウトを簡単に制御できます。

(5) 多くの Web ページのスタイルと形式を同時に更新できるため、ページごとに更新する必要がなくなりました。 CSS ファイルを使用して、サイト上のすべての Web ページのスタイルを制御できます。CSS ファイル内の対応する行が変更される限り、サイト全体のすべてのページがそれに応じて変更されます。

CSS を使用する前に、フォントの色とサイズ、および使用するフォントを制御するにはどうすればよいですか?通常、HTML タグを使用して実装されますが、コードは非常に複雑です。ページ上でフォントの色やサイズを頻繁に変更する必要がある場合、生成される HTML コードの長さが膨大になることは想像しにくいです。 CSS はそうした作業を簡素化するために生まれましたが、もちろんその機能は決して単純ではありません。 CSSはページ構造のスタイルコントロールという考え方を通じてページ全体のスタイルをコントロールします。スタイル シートはページ上に配置され、ブラウザによって解釈されて実行されます。完全なテキストであり、HTML を理解している人であれば誰でも習得でき、非常に簡単です。一部の非常に古いブラウザであっても、ページの混乱は発生しません。 CSS の大きな利点の 1 つは、画像の送信速度が完全な HTML Web ページよりも速いことです。

次のセクション