ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS スタイル シートと複数のスタイルの優先順位の概要
CSS スタイル シートと複数のスタイルの優先順位の概要
- 王林オリジナル
- 2020-05-25 17:41:282890ブラウズ
スタイル シートを挿入するには、次の 3 つの方法があります:
1. 外部スタイル シート;
2. 内部スタイル シート;
3. インライン スタイル
外部スタイル シート
外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。 。各ページは、2cdf5bf648cf2f33323966d7f58a7f3f タグを使用してスタイル シートにリンクします。 (ドキュメントの) head 内の 2cdf5bf648cf2f33323966d7f58a7f3f タグ:
例は次のとおりです:
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
ブラウザはファイル mystyle.css からスタイル宣言を読み取り、ドキュメントをフォーマットしますそれによると。
外部スタイル シートは、任意のテキスト エディタで編集できます。ファイルには HTML タグを含めることはできません。スタイル シートは .css 拡張子を付けて保存する必要があります。スタイル シート ファイルの例を次に示します:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}注: 属性値と単位の間にスペースを入れないでください (「margin-left: 20 px」など)。正しい書き方は「 margin-left: 20px」です。
(ビデオ チュートリアルの推奨: css ビデオ チュートリアル)
内部スタイル シート
単一のドキュメントが必要な場合特別なスタイルを設定するときは、内部スタイル シートを使用する必要があります。 c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用して、ドキュメントの先頭で内部スタイル シートを定義できます。例:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>インライン スタイル
スタイルにのみ必要な場合1 つの要素に適用する このメソッドは 1 回のみ使用できます。 (注意して使用してください)
インライン スタイルを使用するには、関連するタグ内で style 属性を使用する必要があります。 Style プロパティには、任意の CSS プロパティを含めることができます。
ここでは、段落の色と左マージンを変更する方法を示します:
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
複数のスタイル
特定のプロパティが別のスタイル シートで指定されている場合同じセレクター定義では、属性値はより具体的なスタイル シートから継承されます。
たとえば、外部スタイル シートには h3 セレクターの 3 つのプロパティ:
h3{
color:red;
text-align:left;
font-size:8pt;
}があり、内部スタイル シートには h3 セレクターの 2 つのプロパティ:
h3{
text-align:right;
font-size:20pt;
}If This内部スタイル シートを含むページは同時に外部スタイル シートにリンクされるため、h3 によって取得されるスタイルは次のようになります:
color:red;text-align:right;font-size:20pt;
つまり、Color プロパティは外部スタイル シートから継承され、text-align と font-size は内部スタイル シートのルールに置き換えられます。
複数のスタイルの優先順位
スタイル シートを使用すると、スタイル情報を複数の方法で指定できます。スタイルは、個々の HTML 要素、HTML ページのヘッダー要素、または外部 CSS ファイルで指定できます。同じ HTML ドキュメント内で複数の外部スタイルシートを参照することもできます。
通常、優先順位は次のとおりです:
インライン スタイル) インライン スタイル > (内部スタイル) 内部スタイル シート > (外部スタイル) 外部スタイル シート > ブラウザのデフォルト スタイル
注: 外部スタイルが内部スタイルの後に配置される場合、外部スタイルは内部スタイルをオーバーライドします。
推奨チュートリアル: CSS 基本チュートリアル
以上がCSS スタイル シートと複数のスタイルの優先順位の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。