classとid

1. id属性、class属性を使おう
<h3 class=“about”>会社概要</h3>
<h3 id=“contact”>お問い合わせ</h3>
h3.about{
color:#009900;
}
#contact{
color:#990000;
}
【Index.html】
【style.css】

2. セレクターの意味
.
classの指定
#
idの指定
＊ページ内に１つしか
出てこない要素

3. タグでの絞り込み
h3.about ⇦ h3タグのabout
p.about ⇦ pタグのabout
.about ⇦ about class全部

4. 階層での絞り込み
<div class=“about”>
<h3>…</h3>
</div>
<div class=“contact”>
<h3>…</h3>
</div>
.about h3{
color:#009900;
}
.contact h3{
color:#990000;
}
【Index.html】 【style.css】

5. CSSの上書き
P{
color:#009900;
}
P{
color:#000000;
}
セレクタが一緒

6. CSSの上書き
P{
color:#009900;
}
P{
color:#000000;
}
後ろが優先

7. CSSの上書き
.about h3{
color:#009900;
}
h3{
color:#000000;
}
セレクターが多い方が優先
<div class=“about”>
<h3>…</h3>
</div>
【Index.html】
【style.css】

8. CSSの上書き
#aaa{
color:#009900;
}
.bbb{
color:#000000;
}
IDが優先
<h3 id=“aaa” class=“bbb”>…</h3>
【Index.html】
【style.css】

9. * ユニバーサルセレクタ
すべての要素が対象
*{
margin:0;
padding:0;
}
優先順位は最下位

10. !important
p {
color: red !important;
}
最優先になる

11. CSSのポイント換算
タグ 1 point
クラス 10 point
ID 100 point