css学習ノート ～3つのスタイルシートの使い方と違い_html/css_WEB-ITnose

スタイルシートの挿入方法

スタイルシートを挿入するには3つの方法があります:

外部スタイルシート

内部スタイルシート

インラインスタイル

外部スタイルシート

多くのページにスタイルを適用する必要がある場合、外部スタイルシートが理想的です。外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。各ページは、 タグを使用してスタイル シートにリンクします。 タグは (ドキュメントの) head 内にあります:

/head> ;

ブラウザは、ファイル mystyle.css からスタイル宣言を読み取り、それに応じてドキュメントをフォーマットします。

外部スタイルシートは、任意のテキストエディタで編集できます。ファイルには HTML タグを含めることはできません。スタイル シートは .css 拡張子を付けて保存する必要があります。以下はスタイルシート ファイルの例です:

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("/images/back40.gif");}

属性値と単位の間にスペースを入れないでください。 「margin-left: 20px」の代わりに「margin-left: 20 px」を使用すると、IE 6 でのみ機能し、Mozilla/Firefox または Netscape では機能しません。

内部スタイルシート

単一のドキュメントに特別なスタイルが必要な場合は、内部スタイルシートを使用する必要があります。次のように



プレゼンテーションとコンテンツが混在しているため、スタイルでは、スタイル シートの利点の多くが失われます。たとえば、スタイルを要素に 1 回だけ適用する必要がある場合など、この方法は注意して使用してください。

インライン スタイルを使用するには、関連するタグ内で style 属性を使用する必要があります。 Style プロパティには、任意の CSS プロパティを含めることができます。この例は、段落の色と左余白を変更する方法を示しています。

これは段落です。

複数のスタイル

いくつかのプロパティが異なるスタイル シートの同じセレクターによって定義されている場合、プロパティ値はより具体的なスタイル シートから継承されます。

たとえば、外部スタイルシートには h3 セレクターの 3 つのプロパティがあります:

h3 {
text-align:left;

テーブルには h3 セレクターの 2 つの属性があります:

h3

{

text-align:right:20pt; }


内部スタイル シートを持つこのページが外部スタイルにもリンクされている場合Sheet の場合、h3 によって取得されるスタイルは次のようになります:

color:red; font-size:20pt;

つまり、 color 属性は外部スタイル シートから継承されます。テキストの配置 ( text-alignment ) と font-size は、内部スタイル シートのルールに置き換えられます。

複数のスタイルが 1 つにカスケードされます

スタイル シートを使用すると、スタイル情報を複数の方法で指定できます。スタイルは、個々の HTML 要素、HTML ページのヘッダー要素、または外部 CSS ファイルで指定できます。同じ HTML ドキュメント内で複数の外部スタイルシートを参照することもできます。

カスケード順序

同じ HTML 要素が複数のスタイルで定義されている場合、どのスタイルが使用されますか?

一般に、すべてのスタイルは次のルールに従って新しい仮想スタイル シートにカスケードされ、番号 4 が最も高い優先順位を持ちます。

ブラウザのデフォルト

外部スタイルシート

内部スタイルシート(タグ内)

インラインスタイル(HTML要素内)

したがって、インラインスタイル(HTML要素内)の内部)が最も高いprecedence は、タグ内のスタイル宣言、外部スタイル シート内のスタイル宣言、またはブラウザ内のスタイル宣言 (デフォルト) よりも優先されることを意味します。

ヒント:

外部ファイルのスタイルを使用し、 でスタイルを定義すると、内部スタイル シートが外部ファイルのスタイルを置き換えます。