htmlタグの属性とcssの属性はどちらが優先されますか？-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

htmlタグの属性とcssの属性はどちらが優先されますか？

青灯夜游

May 21, 2021 pm 02:31 PM

CSSスタイル優先度ラベルの属性

HTML タグの属性と CSS 属性を比較すると、CSS 属性の方が優先されます。理由: W3C 標準では CSS スタイルの使用を推奨し、HTML タグ属性を CSS スタイルで置き換えることが推奨されています。Web ページ制作標準ではタグとスタイルが分離されており、タグ属性でスタイルを設定すると再利用が難しくなります。

htmlタグの属性とcssの属性はどちらが優先されますか？

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

今日、私は w3c CSS チュートリアルのディメンションセクションを見て、次の実験を実施しました:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>

<body>
<img  class="normal lazy"  src="/static/imghwm/default1.png"  data-src="/attachments/cover/cover_css.png"       style="max-width:90%"  style="max-width:90%" / alt="htmlタグの属性とcssの属性はどちらが優先されますか？" ><br>
<img  class="big lazy"  src="/static/imghwm/default1.png"  data-src="/attachments/cover/cover_css.png"       style="max-width:90%"  style="max-width:90%" / alt="htmlタグの属性とcssの属性はどちらが優先されますか？" ><br>
<img  class="small lazy"  src="/static/imghwm/default1.png"  data-src="/attachments/cover/cover_css.png"       style="max-width:90%"  style="max-width:90%" / alt="htmlタグの属性とcssの属性はどちらが優先されますか？" >
</body>
</html>

実行結果は次のとおりです:

htmlタグの属性とcssの属性はどちらが優先されますか？ # 当時私が疑問に思ったのは、なぜ img タグの height 属性ではなく、内部スタイルシートの img の height 属性が機能するのかということで、Baidu をいろいろ検索してみました。

最終的に適切な結論に達しました: (1) タグ内の属性設定とインラインスタイルを変更したことがわかりました。最初はびっくりして理解できず、インラインスタイルを試してみました

<img  class="big lazy"  src="/static/imghwm/default1.png"  data-src="/attachments/cover/cover_css.png"       style="max-width:90%" / alt="htmlタグの属性とcssの属性はどちらが優先されますか？" ><br>

実験の結果、やはり内部スタイルシートよりもインラインスタイルの方が優先度が高いことがわかりました。

(2) 改めて概念を明確にした後、さらに観察すると、htmlタグ属性のスタイル設定よりも内部スタイルシートのスタイル設定の方が優先されることが分かり、実験を行った。外部スタイルシート

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<img  src="/static/imghwm/default1.png"  data-src="cover_css.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="htmlタグの属性とcssの属性はどちらが優先されますか？" >
</body>
</html>

imgタグ内のheight属性よりも外部スタイルシートの優先度が高いことが分かります。 css はタグの属性

よりも優先されます。 (3) W3C 標準は CSS スタイルの使用を推奨し、HTML タグ属性を CSS スタイルで置き換えることを推奨しています。Web ページ作成標準ではタグとスタイルを分離します。タグ属性に設定されているため再利用が難しいのが、タグ属性よりもCSSスタイルの優先度が高い理由ではないかと個人的には推測しています。

(4) CSS スタイルの使用が推奨されていますが、W3School で詳しく紹介されています。「

画像の高さと幅の属性を指定するのは良い習慣です。

」これらの属性が設定されている場合、ページの読み込み時に画像用のスペースを予約できます。これらの属性がないと、ブラウザは画像のサイズを理解できず、画像用の適切なスペースを予約できないため、ページのレイアウトは画像の読み込み時に行われます。 "

"高さと幅のプロパティを使用して画像を拡大縮小しないでください。高さと幅のプロパティを使用して画像を縮小すると、ユーザーは大きな画像をダウンロードする必要があります (たとえ画像はページ上で小さく見えます)。正しいアプローチは、Web ページで画像を使用する前に、画像をソフトウェアによって適切なサイズに処理する必要があることです。"

"の 2 つの値高さと幅の属性は、実際のサイズより大きくても小さくても構いません。ブラウザによっては、この予約されたスペースに収まるように画像のサイズが自動的に変更されます。ただし、最終的に表示されたファイルに関係なく、ブラウザはファイル全体をダウンロードする必要があることに注意することが重要です。

高さと幅の属性を使用するもう 1 つのテクニックは、ドキュメントのパフォーマンスを向上させながら、ページ領域を簡単に埋めることです。ドキュメントに色付きの水平バーを配置したい場合を想像してください。フルサイズの画像を作成する必要はありません。代わりに、幅 1 ピクセル、高さ 1 ピクセルの画像を作成し、それに希望の色を付けます。次に、高さと幅の属性を使用して、より大きなサイズに拡張します。"

"幅のパーセント値が指定され、高さが省略された場合、ブラウザは画像のアスペクト比を維持します。 (

高さが設定されていない場合のデフォルト値は自動適応であるため

)これは、画像の高さと幅の比率が変化せず、画像が変化しないことを意味します。歪みはありません。」 Pandan 記事の ID「Yu Jiangshui」のコメントのように: 「img の alt 属性は必須であり、width と height が推奨されています。なぜなら、 img Web ページの読み込みはこれらの構造よりも遅いため、最初に構造とテキストが読み込まれてから画像が読み込まれることがよくありますが、このときブラウザは画像のサイズを事前に認識していないため、 Web ページで画像をレンダリングできません。位置とサイズ。画像がロードされてレンダリングされた後、再描画が発生します (つまり、ブラウザは関連する要素の位置を再計算します。具体的には、画像が表示され、テキストが表示されます)。 (画像の下は一番下まで続いています。淘宝網の商品紹介ページ、ここでは非常に明白です。)

幅と高さの画像については、ブラウザーが計算して空白のままにし、画像が読み込まれるのを待ちます、ページの再描画を回避し、フロントエンドのパフォーマンスとユーザーエクスペリエンスを向上させます。ここZhihuでは、答えは上の写真で見ることができます。

レスポンシブレイアウト (Web サイトは、端末ごとに特定のバージョンを作成するのではなく、複数の端末と互換性があります。このコンセプトは、モバイルインターネットブラウジングの問題を解決することです)画像処理 (ボーン) では、img タグに max-width: 100%; height: auto; を設定して、比例ストレッチを保証する必要があります。 ”

(学習ビデオ共有: css ビデオチュートリアル )

以上がhtmlタグの属性とcssの属性はどちらが優先されますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

HTML内の反応：動的WebページのJavaScriptを統合しますApr 16, 2025 am 12:06 AM

HTMLにReactを統合するには、次の手順に従ってください。1。HTMLファイルにReactとReactdomを導入します。 2。反応成分を定義します。 3. ReactDomを使用してコンポーネントをHTML要素にレンダリングします。これらの手順を通じて、静的HTMLページは動的でインタラクティブな体験に変換できます。

Reactの利点：パフォーマンス、再利用性などApr 15, 2025 am 12:05 AM

Reactの人気には、パフォーマンスの最適化、コンポーネントの再利用、豊富なエコシステムが含まれます。 1.パフォーマンスの最適化は、仮想DOMおよび拡散メカニズムを介して効率的な更新を実現します。 2。コンポーネントの再利用は、再利用可能なコンポーネントによって重複コードを削減します。 3.リッチなエコシステムと一方向のデータフローは、開発エクスペリエンスを向上させます。

反応：動的でインタラクティブなユーザーインターフェイスを作成しますApr 14, 2025 am 12:08 AM

Reactは、動的でインタラクティブなユーザーインターフェイスを構築するための選択ツールです。 1）コンポーネント化とJSXは、UIを分割して簡単に再利用します。 2）国家管理は、UIの更新をトリガーするためにUseStateフックを通じて実装されます。 3）イベント処理メカニズムは、ユーザーの相互作用に応答し、ユーザーエクスペリエンスを向上させます。

React vs.バックエンドフレームワーク：比較Apr 13, 2025 am 12:06 AM

Reactは、ユーザーインターフェイスを構築するためのフロントエンドフレームワークです。バックエンドフレームワークは、サーバー側のアプリケーションを構築するために使用されます。 Reactはコンポーネントで効率的なUIアップデートを提供し、バックエンドフレームワークは完全なバックエンドサービスソリューションを提供します。テクノロジースタックを選択するときは、プロジェクトの要件、チームのスキル、およびスケーラビリティを考慮する必要があります。

HTMLとReact：マークアップとコンポーネントの関係Apr 12, 2025 am 12:03 AM

HTMLとReactの関係は、フロントエンド開発の中核であり、最新のWebアプリケーションのユーザーインターフェイスを共同で構築します。 1）HTMLはコンテンツ構造とセマンティクスを定義し、Reactはコンポーネントを介して動的インターフェイスを構築します。 2）ReactコンポーネントはJSX構文を使用してHTMLを埋め込み、インテリジェントなレンダリングを実現します。 3）コンポーネントライフサイクルは、状態および属性に従ってHTMLレンダリングと動的に更新を管理します。 4）コンポーネントを使用して、HTML構造を最適化し、保守性を向上させます。 5）パフォーマンスの最適化には、不必要なレンダリングの回避、重要な属性の使用、およびコンポーネントの単一の責任を維持することが含まれます。

ReactとFrontend：インタラクティブエクスペリエンスの構築Apr 11, 2025 am 12:02 AM

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1）Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2）コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3）Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4）国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5）基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6）一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

反応とフロントエンドスタック：ツールとテクノロジーApr 10, 2025 am 09:34 AM

Reactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1）コンポーネントと州の管理を通じてUIの開発を簡素化します。 2）作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3）基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4）不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5）パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。

See all articles