htmlタグの属性とcssの属性はどちらが優先されますか？
HTML タグの属性と CSS 属性を比較すると、CSS 属性の方が優先されます。理由: W3C 標準では CSS スタイルの使用を推奨し、HTML タグ属性を CSS スタイルで置き換えることが推奨されています。Web ページ制作標準ではタグとスタイルが分離されており、タグ属性でスタイルを設定すると再利用が難しくなります。
このチュートリアルの動作環境: 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/imghw/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/imghw/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/imghw/default1.png" data-src="/attachments/cover/cover_css.png" style="max-width:90%" style="max-width:90%" / alt="htmlタグの属性とcssの属性はどちらが優先されますか？" >
</body>
</html>実行結果は次のとおりです:
# 当時私が疑問に思ったのは、なぜ img タグの height 属性ではなく、内部スタイルシートの img の height 属性が機能するのかということで、Baidu をいろいろ検索してみました。
最終的に適切な結論に達しました: (1) タグ内の属性設定とインライン スタイルを変更したことがわかりました。最初はびっくりして理解できず、インラインスタイルを試してみました
<img class="big lazy" src="/static/imghw/default1.png" data-src="/attachments/cover/cover_css.png" style="max-width:90%" / alt="htmlタグの属性とcssの属性はどちらが優先されますか？" ><br>
<!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/imghw/default1.png" data-src="cover_css.png" class="lazy" style="max-width:90%" style="max-width:90%" / alt="htmlタグの属性とcssの属性はどちらが優先されますか？" > </body> </html>
よりも優先されます。 (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では、答えは上の写真で見ることができます。##
(学習ビデオ共有: css ビデオ チュートリアル )
以上がhtmlタグの属性とcssの属性はどちらが優先されますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7909
15
1652
14
1411
52
1303
25
1248
29
Windows 11 でアプリの優先度を安全に設定するにはどうすればよいですか?
May 06, 2023 pm 06:28 PM
Windows は、システム リソースに優先順位を割り当てることで、システム リソースを最も必要とするプロセスやプログラムにうまく割り当てます。インストールするほとんどのアプリケーションは、デフォルトの「標準」優先度レベルでまったく問題なく動作します。ただし、パフォーマンスを向上させるために、ゲームなどのプログラムをデフォルトの通常レベルよりも高いレベルで実行する必要がある場合があります。しかし、これには代償が伴い、熟考する価値のある取引です。アプリを高優先度に設定するとどうなりますか? Windows には、さまざまなプロセスやプログラムの実行に対して、低、通常より下、通常、通常より上、高、リアルタイムの合計 6 つの優先順位レベルがあります。 Windows は、アプリケーションを優先度に基づいてランク付けし、キューに入れます。優先度が高いほど、アプリケーションは
Windows 11 で通知を無効にする 8 つの方法 (および 3 つのヒント)
May 05, 2023 pm 12:49 PM
通知は生産性を向上させる優れたツールですが、場合によっては気が散ってしまうことがあります。通知を完全に無効にする場合でも、選択したアプリに対して無効にする場合でも、このページが必要です。また、FocusAssist を使用して通知を自動的に無効または有効にする方法についても説明します。さらに、設定アプリが機能しない場合は、コマンド プロンプト、レジストリ エディター、グループ ポリシー エディターなどのツールを使用して、よりマニアックな方法で通知を無効にすることができます。 Windows 11 で通知を無効にする 7 つの方法については、次のチュートリアルをご覧ください。 Windows 11 で通知を無効にする必要があるのはなぜですか?通知を無効にするとさまざまな利点があり、その一部を以下に示します。ただし、重要なアプリの通知を無効にすると、
Windows 11のタスクマネージャーで優先度を変更する方法
May 17, 2023 am 10:26 AM
プロセスの優先順位とは何ですか?コンピュータはその作成者とそれほど変わりません。彼らはマルチタスクを行っているように見えますが、実際には自発的にタスク間をジャグリングしています。ただし、すべてのプロセスやプログラムにリソースが均等に割り当てられるわけではありません。システムをできるだけスムーズに実行し続けるために必要なプロセスなど、重要なプロセスには高い優先度が与えられますが、周辺的にのみ機能するプロセスには低い優先度が割り当てられることがあります。これにより、システムに大きなストレスがかかっている場合でも、システムがスムーズに動作するようになります。優先順位とは何ですか?プロセスには 6 つの異なる優先順位があります。これらは次のとおりです: 低 – これは最も低い優先順位です。優先度が「低い」プロセスは、他のすべてのタスクが完了するまで必要なリソースを受け取りません。ノルマの下
Windows 11 でアプリまたはプロセスの生産性モードをオンまたはオフにする方法
Apr 14, 2023 pm 09:46 PM
Windows 11 22H2 の新しいタスク マネージャーは、パワー ユーザーにとって有益です。実行中のプロセス、タスク、サービス、ハードウェア コンポーネントを監視するための追加データにより、より優れた UI エクスペリエンスが提供されるようになりました。新しいタスク マネージャーを使用している場合は、新しい生産性モードに気づいたかもしれません。それは何ですか？ Windows 11 システムのパフォーマンスの向上に役立ちますか?確認してみましょう！ Windows 11 の生産性モードとは何ですか?生産性モードはタスク マネージャーのタスクの 1 つです
Linuxのプロセス優先度調整方法を詳しく解説
Mar 15, 2024 am 08:39 AM
Linuxのプロセスの優先度調整方法を詳しく解説 Linuxシステムでは、プロセスの優先度によってプロセスの実行順序やシステム内のリソースの割り当てが決まります。プロセスの優先順位を合理的に調整すると、システムのパフォーマンスと効率が向上します。この記事では、Linuxでプロセスの優先度を調整する方法と具体的なコード例を詳しく紹介します。 1. プロセス優先度の概要 Linux システムでは、各プロセスには優先度が関連付けられています。優先順位の範囲は通常 -20 ～ 19 で、-20 は最高の優先順位を表し、19 は最高の優先順位を表します。
Windows 11 で通知設定をカスタマイズする方法
May 02, 2023 pm 03:34 PM
一般的な通知設定のカスタマイズ 通知設定の基本から始めましょう。まず、Windows 11 で通知を設定する場合、2 つの方法があります。最も簡単な方法は、タスクバーの隅にある日付と時刻の部分を右クリックし、[通知設定] を選択することです。または、[スタート] メニューを使用して設定アプリを開き、[システム] セクションの [通知] を選択することもできます (デフォルトで開きます)。ここに通知設定の概要が表示されます。通知を完全に無効にすることも、最初のオプション [通知] をクリックしてドロップダウン メニューを展開することもできます。このメニューには、通知音をオフにするなどの追加オプションがいくつかあります。リマインダーや着信の特定の設定など、ロック画面に通知を表示するかどうかを選択することもできます。
HTMLとCSSを使用してスライドショーのレイアウトページを作成する方法
Oct 16, 2023 am 09:07 AM
HTML と CSS を使用してスライド レイアウト ページを作成する方法 はじめに: スライド レイアウトは最新の Web デザインで広く使用されており、情報や画像を表示するときに非常に魅力的でインタラクティブです。この記事では、HTMLとCSSを使用してスライドレイアウトページを作成する方法と、具体的なコード例を紹介します。 1. HTML レイアウト構造 まず、スライド コンテナーと複数のスライド アイテムを含む HTML レイアウト構造を作成する必要があります。コードは次のようになります: <!DOCTYPEhtml&
C言語の優先順位は何ですか?
Sep 07, 2023 pm 04:08 PM
C 言語の優先順位: 1. 各種括弧、2. すべての単項演算子、3. 乗算演算子 *、除算演算子 /、剰余演算子 %、4. 加算演算子 +、減算演算子 - 、5. シフト演算子 <<、> >; 6. より大きい演算子 >、以上の演算子 >=、より小さい演算子 <、以下の演算子 <=; 7. 演算子 == と等しい、演算子と等しくない 記号 != 8. ビット単位AND 演算子 & 9. ビットごとの XOR 演算子 ^ 10. ビットごとの OR 演算子 | 11. 論理 AND 演算子 && など。
