CSS 追加方法
ウェブブラウザがスタイルシートを読み込むと、その情報に従ってHTMLドキュメントを書式設定します。
目次
3つのCSSの挿入方法
CSSを挿入する方法には以下の3つがあります:
外部CSS
外部スタイルシートを使用すると、1つのファイルを変更するだけでウェブサイト全体の外観を変えることができます。
This is a heading
This is a paragraph.
外部スタイルシートは任意のテキストエディタで作成し、.css拡張子で保存します。ファイルにはHTMLタグは含めません。
内部CSS
1つのHTMLページだけに適用するスタイルを内部スタイルシートで定義することができます。
This is a heading
This is a paragraph.
インラインCSS
1つの要素に対して直接スタイルを適用するには、インラインスタイルを使用します。スタイル属性には任意のCSSプロパティを含めることができます。
This is a heading
This is a paragraph.
インラインスタイルはスタイルシートの利点を失う可能性があるため、極力使用は控えるべきです。
複数のスタイルシート
同じセレクター（要素）に対して異なるスタイルが複数のスタイルシートで定義されている場合、最後に読み込まれたスタイルシートの値が使用されます。
例
外部スタイルシートで<h1>要素のスタイルが次のように定義されているとします:
h1 {
color: navy;
}
その後、内部スタイルシートで同じ<h1>要素に別のスタイルが定義された場合:
内部スタイルシートが外部スタイルシートの後に定義されている場合、<h1>要素は「オレンジ」になります。
しかし、内部スタイルシートが外部スタイルシートの前に定義されている場合、<h1>要素は「ネイビー」になります:
カスケーディングオーダー
HTML要素に複数のスタイルが指定されている場合、どのスタイルが適用されるでしょうか？全てのスタイルは以下の規則に従って新しい「仮想的な」スタイルシートに「カスケード」されます。優先順位が高い順に:
- インラインスタイル（HTML要素内部）
- 外部および内部スタイルシート（headセクション内）
- ブラウザのデフォルトスタイル
したがって、インラインスタイルが最も優先され、外部および内部スタイルシート、そしてブラウザのデフォルトスタイルよりも優先されます。