ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS Reset_html/css_WEB-ITnose
CSS Reset_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:16:511164ブラウズ
CSS リセット専用のサイトがあります。 site
主要なブラウザのユーザーエージェントスタイル（つまりデフォルトスタイル）が異なるため、ブラウザ間のスタイルの違いをできる限り避けるために、ブラウザが基本的に同じスタイルのベンチマークを持つことができるようにCSSスタイルがリセットされました。 、このベンチマークに基づいて開発します。
CSS Reset スタイルの導入
CSS Reset の導入とは、すべての要素にリセット スタイルを適用し、ページまたはビジネスに特定のスタイルを使用するようにブラウザーに指示することを意味します。これはページを読み込む最適な方法ではありませんが、ページはさまざまなブラウザーに合わせて統一されたベースで開発されるため、CSS コードを整理するには良い方法です。
一般に、インターネット上には既製の CSS Reset がたくさんあります (上記のリンクで見つけることができます) が、直接導入したり、直接コピーして貼り付けたりすることはお勧めできません。ここで直接引用します。ここで指定されているスタイルは、意図的に非常に汎用的なものであるため、独自のプロジェクトでこれを変更せずに使用することは特にお勧めしません。特定のリセット ベースラインに合わせて調整する必要があります。ページやリンクなどの好みの色
言い換えれば、これは開始点であり、手を加えない自己完結型のブラック ボックスではありません。
簡単に言うと、たとえブートストラップの導入後であっても。 html でクラスやインライン スタイルが定義されていない場合でも、エレガントなページを表示できます。つまり、CSS リセットを直接コピーするのではなく、必要に応じて独自の CSS リセットをカスタマイズすることをお勧めします (ただし、手間は省けます)。
CSS デザイン
サイトの CSS スタイルを記述するとき、グローバル層、モジュール層、ページロジック層の 3 つの層に分けることができると思います。
グローバル レイヤーはすべてのページに適用されるスタイルを表し、モジュール レイヤーは同じスタイル ルールで各要素に適用されるスタイルを表し、ページ ロジック レイヤーは各ページで共有されないいくつかの特別なスタイルを表します。 CSS リセットをグローバル レイヤーの一部として使用すると、すべてのページに同じスタイル ベースラインを持たせることができます。例:
<html lang="en"><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*全局层*/ * { margin: 0px; padding: 0px; } /*模块层*/ .list { margin-left: -10px; margin-right: -10px; font-size: 16px; width: 100%; } .list .list-item { padding-left: 10px; padding-right: 10px; float: left; background: #ccc; } .list:after, .clearfix:after { content: ""; display: table; clear: both; } /*页面逻辑层*/ .testlist { color: #3c3c3c; } </style></head><body> <div class="list"> <div class="list-item testlist">a</div> <div class="list-item testlist">a</div> <div class="list-item testlist">a</div> <div class="list-item testlist">a</div> <div class="list-item testlist">a</div> </div></body></html> list モジュールには、スタイル .list、.list-item が含まれます。一部のシナリオではリストのレンダリングが必要であり、テストリスト スタイルには特定のシナリオに適用される特別なスタイルのみが含まれます。 CSS 内のコメントがコードの保守にとって非常に重要であることを理解するのは難しくありません。
CSS リセットを行うためのユニバーサル セレクター (*) の使用について
グローバル セレクターまたはワイルドカード セレクター (*) を使用することが、CSS をリセットする最も簡単な方法です:
* { margin: 0px; padding: 0px;} これに基づいて、他のスタイルもリセットされるかもしれません。 border: 0 や、outline: 0; などの値が追加されます。しかし、この方法で CSS Reset を維持することには多くの欠点があります:
どの要素がリセットされるのかが明確に示されません。これは、グローバル セレクターが要素に一致するため、スタイルの継承をどの要素にも適用できません。スタイルの重みは 0,0,0,1 ですが、継承されたスタイルの重みは このリセット方法の使用は簡単なので、実際、Tripoli CSS Reset の一部のスタイルでもこのセレクターを使用することができます。ニーズ。ヒント
たとえば、次のように設定すると、注意が必要です。
a { color: #333;} 問題は、:focus、:hover およびその他の a タグのスタイルを毎回手動で設定する必要があることです。 a タグが適用されると、スタイルは疑似クラスを含むすべての a タグのデフォルト スタイルをオーバーライドします (疑似クラスも a タグに適用されるスタイルとみなされ、疑似クラスのスタイルの重みは 0、0、1、0 になります)。 ）。同じ問題がアウトラインなどのスタイルでも発生します。