cssファイルとstyle属性

style属性とcssファイルを理解することで、cssファイルが何かを理解します。

htmlファイルにはweb画面の構造を記載します。cssファイルにはスタイルを記載します。
構造とスタイルを分離するという考え方のようです。

cssファイルを利用せず、style属性にスタイルを記載しhtml画面を作成してみてください。
style属性の値が長くなり、htmlファイルの内容が煩雑になります。

<div style="color:blue;font-size: 20px;font-family: 'serif';">テストA</div>
<div style="color:blue;font-size: 20px;font-family: 'serif';">テストB</div>

テストA

テストB

スタイルの再利用

cssに記載した内容は再利用出来ます。
以下は、先ほどのテストA、テストBの “class属性” に “sample_style” という値を設定することで、同じスタイルを適用しています。

.sample_style {
  border-color: #ffffff;
  color:blue;
  font-size: 20px;
  font-family: 'serif';
}

<div class="sample_style">テストA</div>
<div class="sample_style">テストB</div>

テストA

テストB

コードの明瞭化

style属性の内容が切り出される為、htmlコードがスッキリします。
先ほどの例の通り、スタイルを”class属性” に記載している為、style属性の値の煩雑さがなくなりました。

style属性はhtmlタグに対して直接属性を指定する為、style属性の内容が1番に優先されます。
以下は、テストAの文字が赤くなります。
style属性に指定した文字の色がredに指定されている為です。

<div class="sample_style" style="color:red">テストA</div>
<div class="sample_style">テストB</div>

テストA

テストB

前回の記事についても参照頂くとよりcssファイルについて理解が深まります。
前の記事