CSSリセットってご存知ですか？通常、ブラウザのスタイルをリセットする Reset CSS とも表記されます。さまざまなブラウザでは、CSS セレクターにいくつかのデフォルト値が使用されます。たとえば、h1 に値が設定されていない場合、特定のサイズが表示されます。ただし、すべてのブラウザが同じ値を使用するわけではないため、Web ページのスタイルが各ブラウザで一貫して動作するように CSS リセットが使用されます。
CSS を使用している場合、CSS リセットを使用したことがありますか?もちろん、使用していることはあるものの、使用していることを認識していない可能性があります。たとえば、次のような場合があります。
| * { パディング: 0; ボーダー: 0; |
これは、すべてのセレクターのパディング、マージン、境界線を 0 に設定する CSS Reset メソッドでもあります。これは強力な方法であり、最もシンプルかつ安全ですが、最も多くのリソースを消費します。小規模な Web サイトの場合、これを使用しても大きなリソースの無駄は発生しませんが、Yahoo のような非常に大規模な構造を持つ Web サイトの場合は、リソースの無駄を減らすために CSS を選択的にリセットするだけで済みます。以下は Yahoo の CSS リセット コードです。これは、YUI が選択した最も一般的な CSS リセット方法でもあります。
| ボディ、div、dl、dt、dd、ul、ol、li、h1、h2、h3、h4、h5、h6、pre、 フォーム、フィールドセット、入力、テキストエリア、p、blockquote、th、td { パディング: 0; マージン: 0; } テーブル { 境界崩壊: 崩壊; 境界線の間隔: 0; } フィールドセット、画像 { 境界線: 0; } アドレス,キャプション,引用,コード,dfn,em,strong,th,var { フォントの太さ: 通常; フォントスタイル: 通常; } オル、ウル { リストスタイル: なし; } キャプション、th { テキスト整列: 左; } h1、h2、h3、h4、h5、h6 { フォントの太さ: 通常; フォントサイズ: 100%; } q:前、q:後 { コンテンツ："; } 略語、頭字語 { 境界: 0; } |
CSS リセットの目的はすでに理解されていると思いますが、好みに応じて独自の CSS リセット システムを作成することもできます。結局のところ、ニーズや習慣は人それぞれ異なります。そして、次のものを参照できます。
Ateneu 人気の CSS リセット
| html、ボディ、div、スパン、アプレット、オブジェクト、iframe、h1、h2、h3、 h4、h5、h6、p、blockquote、pre、a、abbr、頭字語、 アドレス、ビッグ、引用、コード、デル、dfn、em、フォント、img、ins、 kbd、q、s、samp、小、ストライク、強、サブ、sup、tt、 var、dl、dt、dd、ol、ul、li、フィールドセット、フォーム、ラベル、凡例、 テーブル、キャプション、tbody、tfoot、thead、tr、th、td { マージン: 0; パディング: 0; 境界線: 0; 概要: 0; フォントの太さ: 継承; フォントスタイル: 継承; フォントサイズ: 100%; フォントファミリー: 継承; 垂直整列: ベースライン; } :focus {アウトライン: 0;} a、a:リンク、a:訪問済み、a:ホバー、a:アクティブ{テキスト装飾:なし} テーブル { ボーダー折りたたみ: 分離; ボーダースペース: 0;} th, td {text-align: left; font-weight:normal;} img、iframe {ボーダー: なし;} ol、ul {リストスタイル: なし;} 入力、テキストエリア、選択、ボタン {font-size: 100%;font-family: 継承;} {マージン: 継承;} を選択します。 hr {マージン: 0;パディング: 0;ボーダー: 0;色: #000;背景色: #000;高さ: 1px} |
Chris Poteet の CSS のリセット
| * { 垂直整列: ベースライン; フォントファミリー: 継承; フォントスタイル: 継承; フォントサイズ: 100%; 境界線: なし。 パディング: 0; マージン: 0; } 体 { パディング: 5px; } h1、h2、h3、h4、h5、h6、p、pre、blockquote、form、ul、ol、dl { マージン: 20px 0; } li、dd、ブロッククオート { マージン左: 40px; } テーブル { 境界崩壊: 崩壊; 境界線の間隔: 0; } |
エリック・マイヤーCSSをリセット
| html、ボディ、div、スパン、アプレット、オブジェクト、iframe、テーブル、キャプション、 tbody、tfoot、thead、tr、th、td、del、dfn、em、フォント、img、ins、 kbd、q、s、samp、小、ストライク、強、サブ、sup、tt、var、 h1、h2、h3、h4、h5、h6、p、blockquote、pre、a、abbr、 頭字語、アドレス、ビッグ、引用、コード、dl、dt、dd、ol、ul、li、 フィールドセット、フォーム、ラベル、凡例 { 垂直整列: ベースライン; フォントファミリー: 継承; フォントの太さ: 継承; フォントスタイル: 継承; フォントサイズ: 100%; 概要: 0; パディング: 0; マージン: 0; 境界線: 0; } ：集中 { 概要: 0; } 体 { 背景: 白; 行の高さ: 1; 色: 黒; } オル、ウル{ リストスタイル: なし; } テーブル { ボーダー折りたたみ: 分離; 境界線の間隔: 0; } キャプション、th、td { フォントの太さ: 通常; テキスト整列: 左; } blockquote:before、blockquote:after、q:before、q:after { コンテンツ： ""; } ブロッククォート、q { 引用符: "" ""; } |