CSSの適用方法は？どのに記述したらいいのかを解説
ブラウザがスタイルシートを読み取ると、スタイルシートの情報に従ってHTMLドキュメントをフォーマットします。
CSSを挿入する3つの方法
スタイルシートを挿入するには、次の3つの方法があります。
- 外部CSS
- 内部CSS
- インラインCSS
外部CSS
外部スタイルシートを使用すると、1つのファイルを変更するだけでWebサイト全体の外観を変更できます。
各HTMLページには、headセクション内の<link>要素内に外部スタイルシートファイルへの参照を含める必要があります。
例
外部スタイルは、HTMLページの<head>セクション内の<link>要素内で定義されます。
外部スタイルシートは任意のテキストエディターで記述でき、.css拡張子を付けて保存する必要があります。
外部.cssファイルにはHTMLタグを含めないでください。
「mystyle.css」ファイルは次のようになります。
「mystyle.css」
注：プロパティ値と単位の間にスペースを追加しないでください: 誤り(スペースあり):margin-left: 20 px;正しい (スペースなし):margin-left: 20px;
内部CSS
1つのHTMLページに固有のスタイルがある場合は、内部スタイルシートを使用できます。
内部スタイルは、headセクション内の<style>要素内で定義されます。
例
内部スタイルは、HTMLページの<head>セクション内の<style>要素内で定義されます。
インラインCSS
インラインスタイルを使用して、単一の要素に独自のスタイルを適用できます。
インラインスタイルを使用するには、関連する要素にstyle属性を追加します。style属性には、任意のCSSプロパティを含めることができます。
例
インラインスタイルは、関連する要素の「style」属性内で定義されます。
ヒント：インラインスタイルでは、スタイルシートの利点の多くが失われます(コンテンツとプレゼンテーションが混在するため)。この方法は慎重に使用してください。
複数のスタイルシート
異なるスタイルシートで同じセレクター(要素)に対していくつかのプロパティが定義されている場合、最後に読み込まれたスタイルシートの値が使用されます。
仮定します外部スタイルシート<h1> 要素のスタイルは次のとおりです。
次に、内部スタイルシート<h1> 要素の次のスタイルもあります。
例
内部スタイルが定義されている場合後外部スタイルシートへのリンク、<h1>要素は「オレンジ」になります。
例
ただし、内部スタイルが定義されている場合前外部スタイルシートへのリンク、<h1>要素は「ネイビー」になります。
カスケード順序
HTML要素に複数のスタイルが指定されている場合、どのスタイルが使用されますか?
ページ内のすべてのスタイルは、次のルールによって新しい「仮想」スタイルシートに「カスケード」されます。ここで、1番の優先度が最も高くなります。
- インラインスタイル(HTML要素内)
- 外部および内部スタイルシート(headセクション内)
- ブラウザのデフォルト
そのため、インラインスタイルが最も優先度が高く、外部および内部のスタイルとブラウザのデフォルトをオーバーライドします。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。