基礎14. CSSの指定方法について

CSSの指定方法

下記のbase01.zipをダウンロードして、style.cssに実際に記述してみましょう。
base01

CSSの指定方法は3つあります。index.htmlに下記を記述してCSSで装飾されたか確認してみてください。1つのCSSの指定方法を確認したら、元に戻してほかの指定方法も試してみてください。

CSSファイルの記述の注意点

CSSファイルの1行目には必ず下記のコードを記述します。

これはCSSの文字コードの指定です。特に理由がなければ、HTMLファイルと同じ文字コード「UTF-8」を指定しましょう。

CSSの記述場所による優先順位の違い

セレクタが同じ場合「要素に直接指定」のほうが優先順位が高くなり、ほかの指定場所のプロパティの値を上書きます。ただし同じプロパティがなければ引き継がれます（継承）
指定方法による優先順位は、下記のようになります。右側になるほど優先されます。

記述場所に関しては、どこが一番良いかは設計によって変わります。通常は外部CSSで指定する方法が一般的です。

外部CSSのメリット

「headタグ内に記述」「要素に直接指定」は、1つのHTMLファイルの装飾しかできません。「外部CSS」は、複数のHTMLファイルをまとめて装飾することができます。また複数のCSSファイルをリンクすることもできます。

複数のCSSファイルをリンクした場合は、後にリンクしたファイルの指定のほうが優先されます。

演習：「上書き」と「継承」

下記のコードを順番に記述して「上書き」を確認していきます。「上書き」により文字サイズと色が変わっていることを確認してみてください。

index.htmlに記述。

style.cssに下記を記述してブラウザで表示します。

次にheadタグ内に下記を記述しブラウザで表示します。

最後に、直接p要素にCSSを指定してブラウザで表示します。

次に「継承」の確認です。style.cssにtext-alignプロパティを追加します。text-alignプロパティは「行ぞろえ」の指定が行えます。記述したらブラウザで確認します。
このプロパティは、ほかの指定方法にないプロパティなので「継承」されます。

まとめ

• CSSの指定方法は、3種類
• 外部CSSで指定するのが一般的
• 外部CSSは、複数のHTMLファイルをまとめて装飾できる