CSS 概要 (パート 1)_html/css_WEB-ITnose

CSS入門

☆CSSとは「Cascading Style Sheets」の略で、主にブラウザ内でのHTMLコンテンツの文字サイズや色、フォントの太さなどの表示スタイルを定義するために使用されます。

☆CSS スタイルはセレクターと宣言で構成され、宣言は以下の図に示すように属性と値で構成されます:

☆セレクター: セレクターとも呼ばれ、Web ページ内の要素をどのスタイルに適用するかを示します。ルールが適用されることになります。
宣言：英語の中括弧「{}」で囲まれたものがステートメントであり、属性と値は英語のコロン「:」で区切られています。複数のステートメントがある場合は、以下に示すように英語のセミコロン「;」で区切ることができます:
p{font-size:12px;color:red;}
注:
1 最後のステートメントにはセミコロンは必要ありません。 , ただし、将来の変更の便宜のために、通常はセミコロンが追加されます。
2. スタイルを使用して読みやすくするために、以下に示すように、各コードを新しい行に記述できます。
p{
font-size:12px;
color:red;
}

☆があります。 CSS のコメント ステートメントも指定します。HTML では を使用してください。

CSSスタイルの基礎知識

☆CSSスタイルのコード挿入フォームは、基本的にインライン、埋め込み、外部の3種類に分けられます。

1. インライン CSS スタイル シートは、次のコードのように、既存の HTML タグに CSS コードを直接記述します:

ここのテキストは赤色です。

。

2. 埋め込み CSS スタイルとは、CSS スタイル コードを タグの間に記述できることを意味します。たとえば、次のコードは タグ内のテキストを赤色に設定します:

css スタイルは の間に記述する必要があり、一般に埋め込み CSS スタイルは

の間に記述します。

3. 外部 CSS スタイル (外部スタイルとも呼ばれます) は、CSS コードを別の外部ファイルに記述することです。この CSS スタイル ファイルは、拡張子名が「.css」であり、 内にありません。 style> タグ)、次のコードに示すように、 タグを使用して CSS スタイル ファイルを HTML ファイルにリンクします。

注:
1. CSS スタイル ファイル名は、main.css のように、意味のある英語の文字で名前が付けられます。
2. rel="stylesheet" type="text/css"は固定の記述方法であり、変更することはできません。
3. タグの位置は通常、

タグ内に記述されます。

3つのメソッドの優先順位は、インライン＞埋め込み＞外部、近接原則（設定されている要素に近いほど優先度が高くなります）です。
ただし、上でまとめた優先順位には前提があることに注意してください。インライン、埋め込み、外部スタイル シートの CSS スタイルは同じ重みを持ちます。

CSSセレクター

☆すべてのCSSスタイル宣言（定義）は2つの部分で構成されており、その形式は次のとおりです:
Selector {

Style

};

{}より前の部分は「セレクター」です。 「セレクター」は、{} 内の「スタイル」のオブジェクト、つまり、「スタイル」が作用する Web ページ内の要素を指定します。

1. タグセレクターは、実際には HTML コード内のタグです。

たとえば、次のコード:
p{font-size:12px;line-height:1.6em;}
上記の CSS スタイル コードの機能は、p タグと行のフォント サイズを 12px に設定することです。間隔は1.6emまで。

2. クラスセレクター: 最初に要素にクラス属性と属性名を設定し、次に埋め込みスタイルと外部スタイルで「.class name { style }」を使用してスタイルを選択して設定します。英語入力方法では以下に入力しますが、忘れないように注意してください。クラス名は任意に選択できますが、中国語にすることはできません。
構文:
.Class name {
Style
}

3. ID セレクター
多くの点で、ID セレクターはクラス セレクターと似ていますが、いくつかの重要な違いがあります。
1. ラベルに id= を設定します。 class="クラス名" の代わりに ID 名" を使用します。
2. ID セレクターの前には英語のドット (.) の代わりにポンド記号 (#) が付きます。

ID セレクターとクラス セレクター
同じ点: 任意の要素に適用可能
相違点:
1. ID セレクターはドキュメント内で 1 回のみ使用できます。クラス セレクターとは異なり、ID セレクターは HTML ドキュメント内で 1 回だけ使用できます。クラス セレクターは複数回使用できます。

4. サブセレクター、つまり大なり記号 (>) は、指定されたラベル要素の第一世代の子要素を選択するために使用されます。次のコード:
.food>li{border:1px 単色赤;}

このコード行は、クラス名 food の下の子要素 ​​li に赤い実線の境界線を追加します。

5. 指定されたラベル要素の下にある子孫要素を選択するために使用されるセレクターを含めます。つまり、スペースを追加します。次のコード:

.first span{color:red;}
このセレクターと子セレクターの違いに注意してください。子セレクターは、その直接の子孫のみを参照します

または、最初の世代に作用すると理解することもできます。子要素の子孫。子孫セレクターはすべての子子孫要素に作用します

子孫セレクターはスペースを介して選択しますが、子セレクターは「>」を介して選択します。
概要: > 要素の最初の世代の子孫に作用し、スペースは要素のすべての子孫に作用します。

6. ユニバーサル セレクターは、(*) 記号で指定されます。その機能は、HTML 内のすべてのラベル要素と一致するようにすることです。次のコードを使用して、HTML 内の任意のラベル要素のフォントの色を赤に設定します。 : red;}

7. HTML に存在しないタグ (タグの特定の状態) のスタイルを設定できる疑似クラス セレクター。たとえば、マウスオーバー状態のフォントの色を設定します。 HTML のタグ要素:

a:hover{color:red;}

上記のコード行は、マウスがラベル上にあるときのラベルのフォントの色を赤に設定します。

8. グループ化セレクター HTML 内の複数のタグ要素に同じスタイルを設定したい場合は、グループ化セレクター (,) を使用して、コード エディターで h1 タグと spam タグのフォントを設定します。色は赤です:

h1,span{color:red;}

これは、次の 2 行のコードと同等です:
h1{color:red;}
span{color:red;}

CSSの継承と特殊性、カスケード、重要性

☆CSSの継承

継承とは、スタイルを特定のhtmlタグ要素だけでなく、その子孫にも適用できるようにするルールです。

p{color:red;}

3年生のとき、私はネズミのように臆病な女の子でした​​。

この色の設定は、p タグだけでなく、p タグ内のすべてのサブ要素テキストにも適用されます。ここで、サブ要素は span タグです。

ただし、一部の CSS スタイルは継承されないことに注意してください。 border:1px Solid red;

p{border:1px Solid red;}

など

小学 3 年生のとき、私は ネズミのように臆病 な女の子でした​​。

上記の例では、コードの機能は、p タグの境界線を 1 ピクセル、赤、実線の境界線に設定することだけであり、サブ要素のスパンには影響しません。

☆CSS の特殊性

同じ要素に異なる CSS スタイル コードを設定する場合があります。そのため、次のコードを見てみましょう:

p{color:red }

。 first{color:green;}

3 年生のとき、私は ネズミのように臆病 の小さな女の子でした​​。

p と .first は両方とも p タグに一致します。では、どちらの色が表示されるでしょうか?緑色が正しい色ですが、なぜでしょうか?これは、ブラウザーが重みに基づいてどの CSS スタイルを使用するかを決定し、より高い重みを持つ CSS スタイルが使用されるためです。
重みのルールは次のとおりです:
ラベルの重みは 1、クラス セレクターの重みは 10、ID セレクターの最大重みは 100 です。たとえば、次のコード:
p{color:red;} /*重みは 1*/
p span{color:green;} /*重みは 1+1=2*/
.warning{color: white; } /*重みは 10*/
p scan.warning{color:purple;} /*重みは 1+1+10=12*/
#footer .note p{color: yellow;} /*重みは 100+10+1=111*/
注: 別の特別な重みがあります。継承にも重みがありますが、それは非常に低いものもあります。一部の文献では、それがわずか 0.1 であることが示唆されているため、継承が重みを持っていることが理解できます。最低の体重。

☆CSS のカスケードの性質

スタッキングとは、HTML ファイル内の同じ要素に対して複数の CSS スタイルが存在する可能性があることを意味し、同じ重みを持つスタイルが存在する場合、これらの CSS スタイルの順序に基づいて決定されます。これは最後にCSSスタイルが適用されます。

次のコードのように:

p{color:red;}
p{color:green;}

3年生の私はまだネズミのように臆病だった< ;/ スパン> 小さな女の子。

最後の p のテキストが緑色に設定されます。このカスケードは、前のスタイルを上書きすることが分かります。
したがって、前の CSS スタイルの優先順位を理解するのは難しくありません。
インライン スタイル シート (タグ内) > 埋め込みスタイル シート (現在のファイル内) > 外部スタイル シート (外部ファイル内)。

☆CSSの重要性

Web ページのコードを作成するとき、特定のスタイルに最高の重みを設定する必要がある特殊な状況がいくつかあります。現時点では、! important を使用してそれを解決できます。
次のコード:
p{color:red! important;}
p{color:green;}

3年生のとき、私はまだ小心者でした。ねずみ小さな女の子。

このとき、p段落内の文字が赤色で表示されます。
注: ! important はセミコロンの前に記述する必要があります
ここで、Web ページ作成者が CSS スタイルを設定しない場合、ブラウザは独自のスタイル セットに従って Web ページを表示することに注意してください。また、ユーザーはブラウザで独自のカスタム スタイルを設定することもできます。たとえば、Web ページのテキストをより鮮明に表示できるように、フォント サイズを大きめに設定することに慣れているユーザーもいます。このとき、スタイルの優先順位は、ブラウザのデフォルト スタイル < Web ページ作成者のスタイル < ユーザーが設定したスタイルであることに注意してください。ただし、!重要な優先スタイルは例外であり、によって設定されたスタイルよりも重要度が高いことに注意してください。ユーザー。