DIV+CSS の学習 -- ID と CLASS_html/css_WEB-ITnose について-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 12:31:26

オリジナル

1034 人が閲覧しました

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 を使用する場合についての理解が深まりました。