スタイルシート CSS レイアウト エクスペリエンス_CSS/HTML

時間の経過とともに、ここに記載されている内容が追加または変更され、将来の標準学習者にとって役立つことを願っています。

主な内容は、IE と MOZILLA の違いと見落とされやすい詳細、いくつかの古典的なアプリケーションの最適な実装方法、および避けるべき間違いです。

日々の経験の積み重ねですので、間違った説明があることは避けられませんので、もし専門家に見ていただけた場合は、必ずご指摘ください。 >

Mozilla では ul タグにデフォルトでパディング値がありますが、IE ではマージンのみが値を持ちます。

同じクラス セレクターはドキュメント内で繰り返し使用できますが、ID セレクターは 1 回のみ使用できます。CSS でラベルを定義する場合は、ID セレクターが使用されます。

互換性を調整する愚かな方法 (IE と Mozilla):

初心者は、同じラベルの属性が IE では A に設定されていると正常に表示されますが、Mozilla では正常に表示するには B に設定する必要がある、または 2 つが逆になるという状況に遭遇する可能性があります。

一時的な解決策:

セレクター {属性名: B !重要; 属性名: A;}

ネストされたタグのグループ間にスペースが必要な場合は、外側にあるタグのパディング

を定義するのではなく、内側にあるタグの margin 属性に任せます。

li タグの前のアイコンには list-style-image ではなく、background-image を使用することをお勧めします

IE は継承関係と父子関係の違いを区別できません。これらはすべて継承関係です。

タグにセレクターを追加するときは、CSS でセレクターをコメントすることを忘れないでください。将来 CSS を変更するときに、その理由がわかります。

ラベルに暗い背景画像と明るいテキスト効果を設定する場合は、現時点ではラベルに暗い背景色を設定することをお勧めします。

リンクの 4 つの状態を定義するときは、順序に注意してください: Link Visited Hover Active

内容と関係のない写真には背景

を使用してください。

定義された色は #8899FF = #89F と省略できます

テーブルは、いくつかの点で他のタグよりもはるかに優れたパフォーマンスを発揮します。列の配置が必要な場合に使用してください。