HTML実践学習14 CSSの書き方（後）

CSSの書き方についてご説明します。

こちらの記事は後編です。
＊前編はこちら↓

HTML実践学習13 CSSの書き方（前）

CSSの書き方についてご説明します。こちらの記事は前編です。＊後編はこちら↓CSSの文法例えばp要素に対して文字色を赤、文字の大きさを22px、太字とする場合は下記のように記述します。p { color: #ff0000; fo

menter.jp

スタイルの継承

ある要素に含まれている要素にのみスタイルをかける場合は「div img {}」のように親要素と子要素の間にスペースを空けて記述します。

また下記のように親要素と子要素に対してスタイルをかけたとします。

body {
  color: #ff0000;
  font-size: 16px
}

p {
  color: #000000;
}

この場合はp要素に記述された値（#000000）が優先されますが、文字サイズはbody要素に記述した16pxに変更されます。このように親となる要素（この場合はbody要素）から子となる要素（この場合はp要素）にスタイルが引き継がれることを「スタイルの継承」と言います。
ページ全体に必要なスタイルをかけてから、各細かい要素にスタイルを記述することで、文書の省略化にも繋がり、綺麗なソースに仕上げることができます。
ただし、継承されないプロパティ（border、background、paddingなど）も存在しますので注意してください。

idセレクタ

idに対してスタイルを記述する場合は「#id名 { }」と記述します。

例えばdiv要素内のidに対して文字を赤くする場合は下記のように記述します。

  <div id="name">木村太郎</div>

#name {
  color:red;
}

または

div #name{
  color:red;
}

classセレクタ

classに対してスタイルを記述する場合は「.class名 { }」と記述します。div要素に含まれるclassに対して文字を赤くする場合は下記のように記述します。

<div class="house">マンション</div>

.house {
  color:red;
}

または

div .house{
  color:red;
}

POINT

「スタイルの継承」とは親要素で記述したスタイルを子要素が引き継ぐことです。