CSS の重みと優先度の問題_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS の重みと優先度の問題_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

CSS の重みと優先度の問題

いくつかの値の比較

初期値

指定された値

計算された値

値を適用

CSS 属性の指定された値は、次の 3 つの方法で取得されます。

適用された値 (使用値) は、すべての計算が完了した後に最終的に使用される値です完成しました。 CSS プロパティの最終値を計算するには 3 つの手順があります。

まず、指定された値は、スタイルカスケード (スタイルシート内で最も重みが高いルールを選択する)、継承 (属性を継承できる場合は親要素の値を取得する)、またはデフォルト値から取得されます。

その後、仕様に従って計算値を計算します。

最後に、レイアウト (自動やパーセンテージなどのサイズをピクセル値に変換) を計算し、その結果が適用された値として使用されます。

これらの手順は内部で実行され、スクリプトは最終的に適用された値を取得するために window.getComputedStyle のみを使用できます。

CSS 2.0 は、属性計算の最後のステップとして計算値のみを定義します。 CSS 2.1 では、親要素の計算値がパーセンテージである場合に、子要素がその高さと幅を明示的に継承できるように、個別のアプリケーション値の定義が導入されました。レイアウトに依存しない CSS プロパティ (表示、フォントサイズ、行の高さなど) の場合、計算された値は適用された値と同じになります。それ以外の場合は異なります

優先順位

優先順位はブラウザーが決定する方法ですどの属性値と一致するか、最も関連性の高い要素が決定され、その要素に適用されます。優先順位はセレクターで構成されるマッチングルールによってのみ決定されます。

優先度は、各セレクタータイプによって形成される連結文字列に基づいて計算されます。マッチング式に対応した重みです。

優先順位が同じ場合、後の CSS が要素に適用されます。

以下は優先度の高いセレクターのリストです:

ユニバーサルセレクター(*)

要素(型)セレクター

クラスセレクター

属性セレクター

擬似クラス

ID選択

インラインスタイル

!重要なルールの例外リンク

!重要なルールがスタイル宣言に適用されると、スタイル宣言は宣言リストのどこにあるかに関係なく、CSS 内の他の宣言をオーバーライドします。ただし、!重要なルールは優先度とは関係ありません。 ! important を使用すると、スタイルシートの元のカスケードルールが変更され、デバッグが困難になるため、推奨されません。

いくつかの経験則:

サイト全体の CSS では ! important を決して使用しないでください

! important は、サイト全体または外部 CSS (参照される ExtJ や YUI など) をオーバーライドする必要がある特定のページでのみ使用してください

プラグインでは ! important

を決して使用しないでください

常に最適化するには、 ! important

の代わりにスタイルルールの優先順位を使用して問題を解決することを検討してください

! important をオーバーライドする方法

簡単です。 ! important を追加するだけです。 CSS ステートメントを作成し、それをより高い優先度のセレクターに適用します (元のベースに追加のタグ、クラス、または ID セレクターを追加します)

または、セレクターを同じに保ちますが、位置を追加する必要があります (優先度の場合)。が同じ場合、後の定義は前の定義をオーバーライドします)。

:not 擬似クラス例外

:not 否定された擬似クラスは、優先度の計算では擬似クラスとはみなされません。実際、セレクターの数を計算するとき、セレクターは通常のセレクターとしてカウントされます。

DOM ツリー内の距離を無視します

次のスタイル宣言があります:

body h1 {  color: green;}html h1 {  color: purple;}

次の HTML に適用される場合:

<html><body>  <h1 id="Here-is-a-title">Here is a title!</h1></body></html>

ブラウザはそれを紫色で表示します。つまり、後のものが優先されます。

マージンの結合

マージンの結合とは、2 つの垂直マージンが交わると 1 つのマージンを形成することを意味します。マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。

マージンの結合は最初は少し奇妙に思えるかもしれませんが、実際には理にかなっています。たとえば、いくつかの段落で構成される典型的なテキストページを考えてみましょう。最初の段落の上のスペースは、段落の上マージンと同じです。マージンを結合しない場合、後続のすべての段落間のマージンは、隣接する上マージンと下マージンの合計になります。これは、段落間のスペースがページの上部の 2 倍であることを意味します。マージンのマージが発生すると、段落間の上下のマージンがマージされ、どこでも距離が一定になります。

置換可能な要素

CSS では、置換可能な要素とは、プレゼンテーションが CSS によって制御されない要素です。これらの外部要素の表現は CSS 仕様に依存しません。典型的な置換可能な要素には、 CSS の重みと優先度の問題_html/css_WEB-ITnose 、

CSS は、マージンの計算や auto の値の処理など、置換可能な要素に対して特別な処理を実行する場合があります。

一部の (すべてではない) 置換可能な要素にはサイズとベースライン自体があり、vertical-align などの一部の CSS プロパティで使用されることに注意してください。

リンク

MDN

w3school

声明

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

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

See all articles