DIV+CSS の学習 -- ID と CLASS_html/css_WEB-ITnose について

DIV+CSS学習〜IDとCLASSについて 私がオススメする方法は、単語の間に下線を引いたり、単語をつなぎ合わせる方法です。 CSS では大文字と小文字が区別されるためです。ご覧のとおり、私が提供するダウンロード ファイルはすべて小文字で処理されます。

まずサイドバーのスタイルを扱います。分析後、これらの 4 つの部分を 4 つのレイヤーに分割することがわかります。

"bar_title"

bar_title">

< ;/div> ここには ID と CLASS があるため、友達によっては、どのような状況で ID を指定する必要があるのか​​尋ねるかもしれません。 CLASS はどのような状況で使用する必要がありますか?

ID は一意性を表し、このページで 1 回だけ表示されます。
CLASS は、スタイルを共有できる同じ性質のグループ (クラス) を表し、複数表示されます。ページ上の回数。

これらのエリアの会員ログイン、サイト情報、ページ基準、コンテンツワードのスタイルが同じになるため、グループにまとめました。

しかし、場合によっては、これらのレイヤー内の要素に異なるスタイルを設定する必要がある場合、どうすればよいでしょうか?たとえば、メンバー ログインのテキストは 14 ピクセルで太字になり、他の単語は 12 ピクセルで太字になります。以下のコードを参照してください。
.bar_title {font-size:12px;font-weight:bold}
#login .bar_title {font-size:14px}

#login .bar_title は、ID ログイン スタイルのレイヤーの下にある CLASS が bar_title である要素を表します。つまり、特定の要素のスタイルを的を絞った方法でカスタマイズできるということです。 #login .bar_title font-size:14px スタイルが個別に設定されている場合、.bar_title グループ (クラス) スタイル (font-weight:bold、bold) も継承されます。
中国ネットワーク管理同盟

title2< ; /a>

ここでは、title1 のテキスト スタイルを 14px、赤、title2 のテキスト スタイルを 10px、緑色に設定する必要があります。赤い 1 ピクセルを DIV に追加します。 境界線の場合、SPAN は緑の 1 ピクセルの境界線を追加します。スタイルは次のように記述できます。
.title {border:1px Solid #f00} /*デフォルトは 1 ピクセルの赤い境界線です*/

span。 title {border-color:#0f0}

.title a {font-weight:bold}
div.title a {font-size:14px;color:#f00}
span.title a {font-size:12px;color :#0f0}

ご覧のとおり、CLASS を使用すると、要素の異なる TagName を使用することで、多くの要素が同じスタイルを共有できるようになり、要素ごとに異なるスタイルをカスタマイズできるようになります。 ID を使用する場合と CLASS を使用する場合についての理解が深まりました。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。