Du HuguがCSSの構造とルールを教えます

基本的な構文規則 セレクター 任意の HTML 要素を CSS1 セレクターにすることができます。セレクターは、単に特定のスタイルを指す要素です。例えば、

P { テキストインデント: 3em }
セレクターはPです。

クラスセレクター 1 つのセレクターに異なるクラスを設定できるため、同じ要素に異なるスタイルを設定できます。たとえば、Web 作成者は言語に応じて異なる色でコードを表示したい場合があります。

code.html { 色: #191970 }code.css { 色: #4b0082 }
上記の例では、HTML CODE 要素で使用するために、 css と html の 2 つのクラスを作成します。 CLASS属性はHTMLで要素のクラスを指定するために使用されます。たとえば、

セレクターごとに 1 つのクラスのみが許可されます。たとえば、code.html.proprietary は無効です。

クラス宣言は、関連する要素なしでも行うことができます。

.note { フォントサイズ: 小 }
この例では、note という名前のクラスを任意の要素に使用できます。

クラスの名前を付ける際は、外観ではなく機能に応じて名前を付けるのが良い習慣です。上記の例の note クラスは small という名前にすることもできますが、Web 作成者がこのクラスのスタイルを変更して小さいフォントではなくなると、この名前は無意味になります。

IDセレクター
ID セレクターは各要素のコンポーネントを個別に定義します。このセレクターには一定の制限があるため、できるだけ使用しないでください。 ID セレクターは、名前の前にインジケーター「#」を付けて指定します。たとえば、ID セレクターは次のように指定できます。

#svp94O { テキストインデント: 3em }
これは HTML の ID 属性で参照できます。

テキストインデント 3em

コンテキスト セレクター コンテキスト セレクターは、スペースで区切られた 2 つ以上の単一セレクターの文字列にすぎません。これらのセレクターは一般的なプロパティを指定でき、カスケード順序のルールにより、単一のセレクターよりも優先順位が高くなります。たとえば、次のコンテキストセレクタ

P EM { 背景: 黄色 }
PEMです。この値は、段落内の強調されたテキストの背景が黄色になることを意味します。見出し内の強調されたテキストは影響を受けません。

宣言属性 スタイルを使用するために、プロパティがセレクターに割り当てられます。属性の例としては、色、境界線、フォントなどがあります。

値 宣言された値は、プロパティが受け入れる仕様です。たとえば、属性 color は値 red を取ることができます。

組み合わせ スタイルシート内の重複を減らすために、組み合わせたセレクタ宣言が許可されます。たとえば、次のコードを組み合わせることで、ドキュメント内のすべての見出しに同じ宣言を与えることができます。

H1、H2、H3、H4、H5、H6 { 色: 赤; フォントファミリ: サンセリフ }
実際、セレクター内にネストされたすべてのセレクターは、特に変更されない限り、外側のセレクターによって指定されたプロパティ値を継承します。たとえば、BODY で定義された色の値は、段落内のテキストにも適用されます。

内部セレクタが周囲のセレクタの値を継続しないケースもありますが、理論的にはこれらは些細なことです。たとえば、上余白プロパティは引き継がれません。直感的に、段落の上余白値はドキュメント本体と同じではありません。

注釈 スタイルシート内の注釈は、C プログラミングと同じ規則を使用して指定されます。 CSS1 コメントの例は次の形式になります。

/* コメントはネストできません */
疑似クラスと疑似要素 疑似クラスと疑似要素は、CSS をサポートするブラウザーによって自動的に認識される特別なクラスと要素です。疑似クラスは、異なる種類の要素を区別します (たとえば、訪問済みリンクとアクティブ リンクは 2 種類のアンカーを表します)。疑似要素は、段落の最初の文字など、要素の一部です。

擬似クラスまたは擬似要素ルールの形式は次のとおりです。

セレクター: 疑似クラス { 属性: 値 }
または

セレクター: 疑似要素 { 属性: 値 }
疑似クラスと疑似要素は、HTML CLASS 属性を使用して指定しないでください。通常のクラスは、次のように疑似クラスおよび疑似要素とともに使用できます。

元のタイトル: Du Hugu が CSS の構造とルールを説明します

キーワード: CSS