ブラウザはスタイルシートを読み込む際には、スタイルシート内の情報に基づいてHTML文書をフォーマットします。
CSSを挿入する3つの方法
スタイルシートを挿入する3つの方法があります。
外部スタイルシート
外部スタイルシートを使用すると、1つのファイルだけを変更することにより、Webサイト全体の外観を変更することができます！
各ページは、内部、外部スタイルシートファイルへの参照含まれている必要があります<link>要素を。 <link>要素には、内側に行く<head>セクション：
外部スタイルシートは、任意のテキストエディタで書くことができます。 ファイルには任意のHTMLタグを含めることはできません。 スタイルシートファイルが一緒に保存されなければならない.css拡張子。
ここではどのようにある"myStyle.css"になります。
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | プロパティ値と単位の間にスペースを追加しないでください（のようなmargin-left:20 px; ）。 正しい方法は次のとおりです。 margin-left:20px; |
|---|
内部スタイルシート
一つのページは、固有のスタイルを持っている場合、内部スタイルシートを使用することができます。
内部スタイルが内で定義されている<style>要素、内側<head> HTMLページのセクション：
例
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> »それを自分で試してみてください インラインスタイル
インラインスタイルは、単一の要素に固有のスタイルを適用するために使用することができます。
インラインスタイルを使用するには、該当する要素にstyle属性を追加します。 style属性は、任意のCSSプロパティを含めることができます。
次の例では、色との左余白を変更する方法を示しています<h1>要素を：
| インラインスタイルは、（プレゼンテーションとコンテンツを混合することによって）スタイルシートの利点の多くを失います。 控えめに、このメソッドを使用します！ |
|---|
複数のスタイルシート
いくつかのプロパティは、異なるスタイルシート内の同じセレクタ（要素）に定義されている場合は、最後の読み取りスタイルシートからの値が使用されます。
例
外部スタイルシートがために次のスタイルがあるとし<h1>要素を：
h1
{
color: navy;
}その後、内部スタイルシートはまたのために次のスタイルがあることを前提とし<h1>要素を：
h1
{
color: orange;
}内部スタイルを外部スタイルシートへのリンク後に定義されている場合は、 <h1>要素になります"orange" ：
例
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> »それを自分で試してみてください 内部スタイルを外部スタイルシートにリンクする前に定義されている場合は、 <h1>要素になります"navy" ：
例
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> »それを自分で試してみてください カスケーディング注文
HTML要素に複数のスタイルが指定されている場合、どのようなスタイルが使用されますか？
一般的に、我々はすべてのスタイルは、番号1が最高の優先順位を持っている以下の規則によって新しい "仮想"スタイルシートへの「カスケード」、意志と言うことができます話します。
- （HTML要素の内側）インラインスタイル
- （ヘッド部での）外部と内部スタイルシート
- ブラウザのデフォルト
だから、（特定のHTML要素内）インラインスタイルは、それが内部に定義されたスタイルよりも優先されますことを意味最高の優先順位、持っている<head>タグ、または外部スタイルシートで、またはブラウザのデフォルト値を。