CSSにおけるタグの意味

醉折花枝作酒筹
リリース: 2023-01-07 11:43:16
オリジナル
4310 人が閲覧しました

CSS では、タグは「#tag{スタイル コード;}」や「.tag{スタイル コード}」などのセレクターを表します。 TAG タグは、分類よりも正確かつ具体的で、記事の主な内容を要約できる独自定義のキーワードです。

CSSにおけるタグの意味

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css タグはセレクターを表します。たとえば、

#tag{样式代码;}
.tag{样式代码}
ログイン後にコピー

各 CSS スタイル定義は 2 つの部分で構成され、形式は次のとおりです。 [code] selector {style} [/code] in { }より前の部分が「セレクター」です。 「セレクター」は、{} 内の「スタイル」のオブジェクト、つまり「スタイル」が Web ページ内のどの要素に作用するかを指定します。

カテゴリ セレクター

クラス セレクターは、クラス名に基づいて選択します

先頭に「.」が付いています。

.demoDiv{
color:#FF0000;
}
ログイン後にコピー

HTML では、要素でクラス属性を定義できます。

例:

<div class="demoDiv">
这个区域字体颜色为红色
</div>
ログイン後にコピー

同時に、別の要素を定義できます:

<p class="demoDiv">
这个段落字体颜色为红色
</p>
ログイン後にコピー

最後に、ブラウザで閲覧すると、すべての要素がクラスdemoDivであることがわかります。このスタイルが適用されます。ページに div 要素と p 要素を含めます。

上記の例では、両方の要素にクラスを定義しましたが、この要素を適用する要素が多数ある場合は、要素を 1 つずつ定義する必要があり、コードの繰り返しが多すぎます。 page. この現象は「多発性症候群」と呼ばれています。

これを変更して次のように定義できます。

<div class="demoDiv">
<div>
这个区域字体颜色为红色
</div>
同时,我们可以再定义一个元素:
<p>
这个段落字体颜色为红色
</p>
</div>
ログイン後にコピー

このようにして、クラスを定義し、スタイルをすべての要素に適用するだけです。

ID セレクター

ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。 ID に基づいて要素を選択することは一意です。つまり、同じ ID は同じドキュメント ページに 1 回だけ表示されます。たとえば、要素の ID 値を「navi」に設定した場合、その ID 値を再度変更することはできません。他の要素 ID の名前は「navi」です。同じ ID 名を持つ複数の要素に名前を付けた場合でも、CSS セレクターは引き続きこれらの要素を選択してスタイルを適用することがわかります (クラス セレクターなど)。CSS セレクターの場合、id 属性の一意性はないようです。同じである、存在する。ただし、js の場合は、同じ ID 名を持つ最初の要素のみが選択されます。プログラミングの適切な実践として、ページ上に同じ ID が 2 回表示されるべきではありません。

は先頭に「#」記号が付いています。これはスタイルで次のように定義できます。

#demoDiv{
color:#FF0000;
}
ログイン後にコピー

これは、demoDiv の ID が赤に設定された要素のフォントの色を表します。 。

ページ上で要素を定義し、その ID をdemoDiv として定義します。たとえば:

<div id="demoDiv">
这个区域字体颜色为红色
</div>
ログイン後にコピー

ブラウザで参照すると、領域の色が赤に変わることがわかります

別の領域を定義します

<div>
这个区域没有定义颜色
</div>
ログイン後にコピー

ブラウザで参照します。予想どおり、その領域にはスタイルが適用されないため、領域のフォントの色はデフォルト色の黒のままです。

推奨学習: css ビデオ チュートリアル

以上がCSSにおけるタグの意味の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート