cssの概念は、htmlファイルが家の柱や壁などの骨格を作っていると
仮定すると、cssはその壁やカーペットの色やブラインドにするかカーテンにするか
などの装飾を担当するものと考えること。
htmlにそれらも同様に記載してしまうと表示速度の遅れやサーバー側での処理の負荷の増加、
個別に細かく装飾が出来ない、同じ装飾は2つの記述を省く、など様々な理由で開発された概念。
【セレクタ（適用先）】の中には【要素】と【クラス】があることをまず覚えておくこと。
要素にclass属性を適用させるのが基本。
【要素】 ＝ <div>、<p>、<h1>、<ul>、<li>、<a>など。
※その中でもブロックレベルとインラインレベルというカテゴリに分けられる。
【クラス名】 ＝ クラスは基本的に自由に設定できる。
・大文字と小文字の区別がる。
・使用できる文字は、半角の英数字、ハイフン（ – ）、アンダーバー（ _ ）のみ。
・アンダーバー（ _ ）をクラス名に含めると、一部の古いブラウザではクラス名が認識されなくなる。
・アルファベットで始めなければならない。（数字や記号で始めてはならない）
【基本文法】
【適用方法】
①クラス名だけで指定する場合
■CSSファイル側
.example { color: #000; }
適用先 何を どうする？
【example】の【色】を【黒】にする
※クラス名を指定する場合は始めに【.(ドット)】、ID名を指定する場合は始めに【#(シャープ)】を付ける。
■htmlファイル側
<p class=”example”>適用されるテキストや画像</p>
②要素名に続けてクラス名を指定する場合
※この場合、そのタイプの要素でのみクラスの指定が適用される。
※.exampleだけだと他の要素に同様のclass属性を指定する場合にも適用されるが、
要素名の後にスペースを入れずにクラス属性を指定するとその要素のみのclassでしか適用されなくなる。
■CSSファイル側
p.example { color: #000; }
■htmlファイル側
<p class=”example”>適用されるテキストや画像</p>
③子孫セレクタ
最初の要素とクラス名は半角スペースを空けずに、その後のセレクタとセレクタを半角スペースで
区切って記述すると、特定の範囲内にある要素にのみスタイルを適用させることができる。
【class バージョン】
■CSSファイル側
div.example p { color: #000;}
【example】が指定された【div要素内】の【p要素】にのみ適用され、それ以外のファイルやその他の【p】では適用されない。
■htmlファイル側
<div class=”example”>
<p>ここのテキストのみ適用される</p>
</div>
【id バージョン】
■CSSファイル側
div#contents p { color: #000;}
【contents】が指定された【div要素内】の【p要素】にのみ適用され、それ以外のファイルやその他の【p】では適用されない。
■htmlファイル側
<div id=”contents”>
<p>ここのテキストのみ適用される</p>
</div>
④複数クラスの適用方法
■cssファイル側
.example { color: #000 }
.example2 { font-size: 12px }
■htmlファイル側
class指定の際に、半角スペースで区切って2つクラス名を並べて指定するとどちらも適用される。
<p clas=”example example2″>
<p></p>で囲まれたテキストでは、色は黒、大きさは12pxと指定される。
⑤複数のセレクタへの適用方法
セレクタ,セレクタ { color: #000; }というように【,】カンマで分けてセレクタを記述する。
■cssファイル側
#main,#footer { width: 900px; }
■htmlファイル側
<div id=”main”>ここの間に記述されるコンテンツの幅は900px以内ということになる。</div>
<div id=”footer”>ここの間に記述されるコンテンツの幅は900px以内ということになる。</div>
【応用編①】
div.example ul li a,
#main.contents h2 { color: #000; }
【example】で指定された【div】要素内の【ul】要素内の【li】要素内の【a】要素(リンク)、と
【main】の【id】指定、【contents】の【class】指定を受けた要素内の【h2】、の2つの箇所のみ適用される。