CSSを作成します。
スタイルシートを読み込む際に、ブラウザは、HTML形式の文書に基づいて説明します。
スタイルシートを挿入する方法
3つの方法でスタイルシートを挿入します。
- 外部スタイルシート
- 内部スタイルシート
- インラインスタイル
外部スタイルシート
スタイルが必要な多くのページに適用した場合、外部スタイルシートは、理想的な選択であろう。 外部スタイルシートの場合には、サイト全体の外観を変更するファイルを変更することができます。 各ページには、スタイルシートにリンクするには、<link>タグを使用しています。 (文書)ヘッドの<link>タグ:
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
ブラウザは、文書の書式を設定するために、それに応じてファイルmystyle.cssスタイル宣言から読み込まれます。
外部スタイルシートは、任意のテキストエディタで編集することができます。 ファイルは任意のHTMLタグを含めることはできません。 スタイルシートは、拡張子の.cssで保存する必要があります。 ここでは、スタイルシートファイルの例です。
p {margin-left:20px;}
body {background-image:url("../images/back40.gif");}
プロパティ値と単位の間にスペースを残さないでください。 代わりに、「余白左:20ピクセル」:あなたが「20ピクセルのマージン左 "を使用している場合、それはIE 6でのみ有効であるが、それは中のMozilla / FirefoxやNetscapeで動作しません。
内部スタイルシート
単一のドキュメントは特別なスタイルを必要とする場合、内部スタイルシートを使用する必要があります。 あなたはこのように、内部スタイルシートを定義するために、文書の頭の中の<style>タグを使用することができます。
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
インラインスタイル
原因を一緒に混合性能およびコンテンツに、インラインスタイルは、スタイルシートの利点の多くを失うことになります。 スタイルは、一つの要素に一度だけ適用する必要があるとき、例えば、この方法を警告してください。
インラインスタイルを使用するには、関連するタグにスタイル(スタイル)属性を使用する必要があります。 style属性は、任意のCSSプロパティを含めることができます。 この例では、段落と左余白の色を変更する方法を示しています。
複数のスタイル
いくつかの属性が異なるスタイルシート内の同じセレクタを定義されている場合は、より具体的なスタイルシートのプロパティ値は継承されています。
例えば、外部スタイルシートは、H3セレクタのための3つのプロパティがあります。
{
color:red;
text-align:left;
font-size:8pt;
}
内部スタイルシートは、H3セレクタのための2つのプロパティがあります。
{
text-align:right;
font-size:20pt;
}
スタイルは内部スタイルシートと外部スタイルシートが同時にこのページにリンクしている場合は、H3のgetは、次のとおりです。
text-align:right;
font-size:20pt;
つまり、プロパティが外部スタイルシートから継承され、テキストの配置(テキストアライメント)とフォントサイズ(フォントサイズ)は、内部スタイルシートルールに置き換えられます色です。
複数のスタイルは、1を積層されています
スタイルシートは、様々な方法で指定されたスタイル情報を可能にします。 スタイルは、単一のHTML要素、HTMLページの最初の要素、または外部CSSファイル内で指定することができます。 偶数倍外部スタイルシートは、単一のHTML文書内で参照することができます。
スタッキング順序
同じHTML要素が複数のスタイルで定義されている場合、どのスタイルを使うのだろうか?
一般的には、すべてのスタイルは、数4が最も高い優先順位を持って、次の規則に従って新しい仮想スタイルシートに積層されます。
- デフォルトブラウザ
- 外部スタイルシート
- (内側の<head>タグ内の)内部スタイルシート
- インラインスタイル(内側のHTML要素)
だから、(HTML要素の内側)インラインスタイルは、それが次のスタイル宣言よりも優先されることを意味最も高い優先度を持っている:ラベルスタイルステートメント、外部スタイルシートのスタイルステートメント、またはブラウザのスタイルステートメント(デフォルト値)。
ヒント:あなたは<head>の中に外部のスタイルファイルを使用する場合も、スタイルを定義した場合、スタイルシートは内部スタイル外部ファイルを置き換えます。