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

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

青灯夜游

リリース： 2023-01-06 11:14:56

オリジナル

3585 人が閲覧しました

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" src="/attachments/cover/cover_css.png"    style="max-width:90%"  style="max-width:90%" / alt="htmlタグの属性とcssの属性はどちらが優先されますか？" ><br>
<img  class="big" src="/attachments/cover/cover_css.png"    style="max-width:90%"  style="max-width:90%" / alt="htmlタグの属性とcssの属性はどちらが優先されますか？" ><br>
<img  class="small" 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" 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="cover_css.png"    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 サイトの他の関連記事を参照してください。