CSS： Cascading Style Sheetの略で、「カスケードスタイルシート」と訳され、整形ルールのセットです。 Web ページのスタイルを (拡張) 制御し、Web コンテンツからスタイル情報を分離できるようにするために使用されるマークアップ言語です。
CSS の構成: CSS の定義は、セレクター (Selector)、プロパティ (property)、プロパティ値 (value) の 3 つの部分で構成されます。構文: selector{プロパティ:値} (セレクター{プロパティ:プロパティ値})
注意すべき点:
1. CSS 宣言ブロックは、セレクター + "{" + 1 つ以上の CSS 属性 + "}" で構成されます。
2. CSS では大文字と小文字が区別されないため、CSS 構文では小文字を使用することが推奨されます。
1.CSSセレクター
CSS スタイルを HTML 文書内で表示する際に使用される CSS スタイルの名前です。使い方は？このとき、CSSセレクター（CSS名）を使用して、このHTMLタグがこのCSSスタイルを使用することを指定します。
2. セレクターの構文
CSS セレクターはスタイルを定義します。
セレクター名 {宣言;}
例えば：
p{font-size:12px;}.dreamdublue{color:blue;}.dreamdu18px{font-size:18px;}#dreamdured{color:red;}P、dreamdublue、dreamdured はすべてセレクターです。
3. セレクターの命名規則
CSS セレクターでは、大文字と小文字の英字、数字、ハイフン、下線、コロン、ピリオドを使用できます。
(1) 英字の大文字と小文字 AZ az
(2) 0～9の数字
(3) ハイフン -
(4) 下線_
(5) コロン:
(6) 期間。
注: CSS セレクターは文字でのみ始めることができます。
4. セレクタの分類
CSS セレクターは、タイプ セレクター、ID セレクター、クラス セレクター、ユニバーサル セレクター、グループ セレクター、包含セレクター、要素固有のセレクター、サブオブジェクト セレクター、属性セレクター、関連セレクター、近隣セレクターなどの多くのカテゴリに分類できます。以下に一つずつ紹介し、分析していきます。
1. タイプ セレクター: タイプ セレクターは Web ページ要素そのものであり、要素名は定義時に直接使用されます。
Body{/*ページ属性を定義します*/}Div{Width:774px;/*すべての div 要素の幅を 774 ピクセルに定義します*/}2. ID セレクター: 異なる要素の ID 値を繰り返すことはできません。ID セレクターは、各要素の特定のオブジェクトに対して異なるスタイルを定義するため、ユーザーはページをより正確に制御できます。 ID セレクターを使用する場合は、まず各要素の ID 属性を定義する必要があります。
<divid="top"></div>ID セレクターを使用する場合は、識別に # を使用する必要があります: #top{Width:774px;/*すべての div 要素の幅を 774 ピクセルに定義します*/}3. クラス セレクター: ドキュメント内の異なるタイプの要素に対して同じクラス名を定義できます。クラスは、同じスタイルの要素を 1 つのカテゴリに統合できます。クラス セレクターを使用する場合は、最初に各要素のクラス属性を定義する必要があります。 :
<divclass="red"></div><spanclass="red"></span><pclass="red"></p>クラス セレクターを使用する場合は、識別に英語 (ドット) を使用する必要があります。 : .赤{色:赤;}4. ユニバーサル セレクター: * で表される特別なセレクターであり、使用されますが無視されやすいセレクターです。
*{font-size:12pt;/*ドキュメント内のすべてのフォントのサイズを 12pt に定義します*/}5. グループ セレクター: グループ セレクターはセレクター タイプではなく、セレクター メソッドです。複数のオブジェクトが同じスタイルを定義する場合、それらを 1 つのグループにグループ化できます。これにより、次のようなコードの読み取りと書き込みが簡素化されます。
.class1{font-size:13px;color:red;text-decrootian:underline;}.class2{font-size:13px;color:blue;text-decroation:underline;}次のようにグループ化できます。
.class1,class2{font-size:13px;text-decroation:underline;}.class1{color:red;}.class2{color:blue;}グループ化の使用には 2 つの原則があります: 1. アスペクトの原則、2. 近接性の原則 (複数の要素が隣接している場合は、モジュール内でグループ化セレクターの使用を検討できます)
6. セレクターを含む: コードを簡素化し、幅広いスタイル制御を実現できる、最も便利なタイプのセレクターです。例えば：
.div1h2{/*クラス div1 レイヤーのすべての h2 のタイトル スタイルを定義します*/font-size:18px;}.div1p{/*クラス div1 レイヤーのすべての p のタイトル スタイルを定義します*/font-size:12px ;}7. 要素指定セレクター: 特定の範囲内で特定の要素のスタイルを制御したい場合があります。この場合、クラスまたは ID セレクターを組み合わせて使用できます。例えば：
scan.red{/*span 要素内のクラス red を持つ要素の色を red として定義します*/color:red;}div#top{/*div 要素内の id が top である要素の幅を 100 として定義します%*/width:100% ;}例:<div><h2><h2><p></p><span></span></div>上記のコードではニュース セレクターを使用することはできません。P を直接使用することもできません。その場合は、要素を使用してセレクターを指定することもできます。
p.ニュース{} h2.ニュース{} スパン.ニュース{}
8. サブオブジェクト セレクター: 要素セレクターと同様に、これらは制限セレクターです。つまり、制限条件を満たす要素スタイルは要素の特定の範囲内で定義されます。一方、要素固有のセレクターは制限として class 属性と id 属性を使用します。 -object selectors セレクターは、制約として ID とサブオブジェクトを使用します。
#main>table{/*ID を main としてメイン モジュールのサブオブジェクト テーブルのスタイルを定義*/width:788px;font-size:12px;}#main>.title{/*サブオブジェクトを定義id が main のメインモジュール内 オブジェクトのクラスは title*/color:red;font-style:italic;} のスタイルです9. 属性セレクター: 属性セレクターは要素の後に括弧を追加するもので、さまざまな属性または式が括弧内にリストされます。属性セレクターには 7 つの特定の形式があります。
(1) 存在属性の一致: 既存の属性と一致させることで要素のスタイルを制御します。一般に、一致する属性は括弧で囲み、値を割り当てずに名前のみをリストする必要があります。
h1[class]{color:red;/*class の値に関係なく、class 属性を持つ任意の h1 要素に適用されます*/}img[alt]{border:none;/*alt に関係なく、alt 属性を持つ任意の img 要素に適用されます値は何ですか*/}a[href][title]{font-weight:bold;/*href 属性と title 属性の両方を持つ要素として機能します*/}(2) 正確な属性の一致: スタイルは、属性値が指定された属性値と完全に一致する場合にのみ適用されます。id セレクターとクラス セレクターは、実際には正確な属性選択です。
a[href=www.163.com][title=NetEase]{font-size:12px;/*関数のアドレスは www.163.com を指し、タイトル プロンプトは NetEase の a 要素です*/}(3) 空白は個別に照合されます。属性の文字列のリストを定義することで、いずれかの文字列に一致する限り、要素のスタイルを制御できます。
<spanclass=abc>私のスタイルを制御するのは誰か</span> 次のスタイルを使用して制御できます: [class^=a]{color:red;} または: [class^=b]{color:red;} または: [クラス^=c]{カラー:レッド;} または: スパン[クラス^=c]{カラー:レッド;}(4) ハイフン マッチング: 機能と使用法はホワイトスペース マッチングと同じですが、ハイフン マッチングでは文字列リストがハイフンで区切られます。
<span>私のスタイルを誰がコントロールするのか</span>
これは、次のスタイルを使用して制御できます。
[class|=a]{color:red;} または: [class|=a]{color:red;} または: [class|=b]{color:red;} または: [class|=c]{color :red;} または:span[class|=c]{color:red;}(5) プレフィックスセレクター: 属性値の開始文字が指定された文字列と一致する限り、スタイルを要素に適用できます。接頭辞の一致は、[^=] 形式を使用して実装されます。
<div>プレフィックス マッチング</div>
次のスタイル コントロールを使用できます。
[クラス^=私の]{色:赤;}(6) 接尾辞の一致: 接頭辞とは逆に、属性の末尾文字が指定された文字と一致する限り、[$=] フォーム制御を使用します。
<div>サフィックスマッチング</div>
次のスタイル コントロールを使用できます。
[クラス$=テスト]{色:赤;}(7) 部分文字列一致: スタイルは指定された文字列が属性に存在する限り適用され、[*=] 形式で制御されます。
<div>部分文字列の一致</div>
次のスタイル コントロールを使用できます。
[クラス*=est]{色:赤;}10. 隣接セレクター: 要素に隣接する次の要素を参照します。
div+p{font-size:24px;/*div 要素の直後のすべての p 要素に適用され、p 要素のフォント サイズを 14px として定義します*/}例:<divid=wrap><divid=sub_wrap><h1 >< /h1><p></p></div><p></p></div>class 属性と id 属性を定義しない限り、下部の p 要素を個別に制御するには、隣接するセレクターを使用します。
#sub_wrap+p{font-size:14px;}