DIV+CSS Web ページの CLASS と ID の違いproduction_html/css_WEB-ITnose

転載元: http://blog.onlygrape.com/divcss-3/381

最近、PNG背景画像の背景を透明にするエフェクトをかけていたら、その前にIDに適用していました。 , ここではページのスタイルシートを定義する際のCLASSとIDの適用を分析します。

1. CSS ファイルに記述する場合、ID には「.」が付けられます。

ページ内でのクラスと ID の使用方法:

class:

< / css" >
.header { 背景 : red ; }

< div class ="header" > header

id:

< style type ="text/css" > #header { 背景 : red ; }

/ div >クラスのドットを使用します: "." (.header など) ID を定義するための CSS は #header
などのシャープ記号 "#" を使用します

2 ID はページ上で 1 回のみ使用できます。クラスは複数回参照できます。

3. ID は、異なる構造とコンテンツを区別するために使用されるラベルです

名前と同じように、家の中に同じ名前を持つ 2 人がいる場合、混乱が生じます
CLASS は、次のことに適用できるスタイルです。衣服のような構造とコンテンツ。

id は 2 つの要素を定義した後にのみ使用できます。ページには問題はありませんが、W3 がそれを検出すると、そのページは標準を満たしていないと判断され、同じクラスで複数の要素を定義できます。

ページ効果に関する限り、この 2 つの視覚効果はほぼ同じです。

4. 概念的に言うと、これらは異なります:
id は最初に構造/コンテンツを見つけてから、そのスタイルを定義します; クラスは、最初にスタイルを定義してから、それを複数の構造/コンテンツに適用します。

クラスは、ユーザー定義の標準に基づいて 1 つ以上の要素を定義するために使用されます。より適切な例えはスクリプトです。クラスはスクリプト内の各キャラクターのストーリーラインを定義できます。このクラスは CSS や JavaScript などを通じて使用できます。したがって、ページ上で class="Frodo"、class="Gandalf"、class="Aragorn" を使用して、さまざまなストーリー ラインを区別できます。もう 1 つの非常に重要な点は、ドキュメント内で Class を何度でも使用できることです。

ID に関しては、通常、ページ上で 1 回だけ表示されるタグを定義するために使用されます。ページ レイアウトの構造化レイアウト (たとえば、通常、ページはヘッダー、マストヘッド、コンテンツ領域、フッターなどで構成されます) を作成する場合、ID は一般に ID を使用するのが理想的です。文書内で 1 回のみ使用してください。これらの要素が同じページに複数回出現することはほとんどありません。

それを一言でまとめると、クラスは繰り返し使用できますが、ID はページ内で 1 回しか使用できません。同じ ID を繰り返し使用しても、多くのブラウザでは問題が発生しない可能性がありますが、これは標準に従えば間違いなく間違った使用であり、一部のブラウザでは実際に問題が発生する可能性があります。

実際のアプリケーションでは、テキストのレイアウトなどには Class の方が便利ですが、マクロ レイアウトやさまざまな要素のデザインの配置には ID の方が便利です。