CSSスタイル作成の詳しい解説

スタイルシートが読み取られると、ブラウザはそれに応じて HTML ドキュメントをフォーマットします。

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

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

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

内部スタイルシート

単一のドキュメントに特別なスタイルが必要な場合は、内部スタイルシートを使用する必要があります。次のように、c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用してドキュメントの先頭で内部スタイルシートを定義できます:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

インラインスタイル

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

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

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

複数のスタイル

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

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

h3
{
color:red;
text-align:left;
font-size:8pt;
}

そして、内部スタイルシートには h3 セレクターの 2 つの属性があります:

h3
{
text-align:right;
font-size:20pt;
}

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

color:red;
text-align:right;
font-size:20pt;

つまり、色の属性は外部スタイルシートから継承され、テキストの配置 (text-alignment) とフォントサイズ (font-size) は次のようになります。内部スタイルシートのルールに置き換えられます。

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

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

カスケード順序

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

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

ブラウザのデフォルト

外部スタイルシート

内部スタイルシート(1d04079a578bbde1e255f3f55c53adb9 でスタイルを定義すると、内部スタイルシートが外部ファイルのスタイルを置き換えます。 [関連の推奨事項]

3. )-CSS ビデオチュートリアル

以上がCSSスタイル作成の詳しい解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

続きを見る