ホームページ  >  記事  >  ウェブフロントエンド  >  CSS スタイル シートの 3 つのスタイルのうち、どれが優先されますか?

CSS スタイル シートの 3 つのスタイルのうち、どれが優先されますか?

下次还敢
下次还敢オリジナル
2024-04-06 03:00:22655ブラウズ

CSS スタイルの優先順位は、インライン スタイル (最高)、組み込みスタイル (2 番目)、外部スタイル シート (最低) です。優先順位が最も高いものが優先され、インライン、組み込み、外部の順に同じ優先順位が適用されます。

CSS スタイル シートの 3 つのスタイルのうち、どれが優先されますか?

#CSS スタイル シートで優先度の高い 3 つのスタイル

CSS スタイル シートでは、優先度は「使用」です。をクリックして、適用するスタイルを決定します。最も優先度の高いスタイルは、優先度の低いすべてのスタイルをオーバーライドします。

優先度の高い 3 つのスタイル タイプは次のとおりです:

1. インライン スタイル

優先度: 最高

インライン スタイルは、

style 属性を使用して HTML 要素に直接記述されます。例:

<code class="html"><p style="color: red;">This text is red.</p></code>

2. 組み込みスタイル

優先度: 2 番目

組み込みスタイルは次のように定義されます。ブラウザのデフォルトのスタイル。他のタイプのスタイルでオーバーライドすることはできません。例:

<code class="html"><h1>Heading</h1> <!-- 默认使用粗体和较大的字体 --></code>

3. 外部スタイル シート

優先度: 最低

外部スタイル シートは別のファイルに保存されます。スタイリッシュに。これらは、

link 要素を介して HTML ドキュメントにリンクされています。例:

<code class="html"><link rel="stylesheet" href="style.css"></code>

優先ルール

最も優先度の高いスタイルが常に優先されます。複数のスタイルが同じ優先度を持つ場合、それらは次の順序で適用されます。

    インライン スタイル
  1. 組み込みスタイル
  2. 外部スタイル シート

たとえば、次の CSS スタイル:

<code class="css">p { color: blue; } /* 外部样式表 */
p { color: green; } /* 内置样式 */
<p style="color: red;">This text is red.</p> /* 内联样式 */</code>
適用される最終スタイルは、優先度が最も高いため、インライン スタイルになります。したがって、テキストは赤色で表示されます。

以上がCSS スタイル シートの 3 つのスタイルのうち、どれが優先されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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