CSS リセットとは、ブラウザのスタイルをリセットすることを指します。 52CSS.com の以前の記事でも同様の知識が紹介されていましたが、十分には詳しくありませんでした。今日は CSS Reset メソッドの 10 個の例を見て、このメソッドの応用について学びます。
さまざまなブラウザでは、CSS セレクターにいくつかのデフォルト値が使用されます。たとえば、h1 に値が設定されていない場合、特定のサイズが表示されます。ただし、すべてのブラウザが同じ値を使用するわけではないため、Web ページのスタイルが各ブラウザで一貫して動作するように CSS リセットが使用されます。
1. 一般的なリセット CSS
* {
パディング: 0;
マージン: 0;
境界線: 0;
あり
、すべてのセレクターのパディング、マージン、境界線を 0 に設定します。これは強力な方法であり、最もシンプルかつ安全ですが、最も多くのリソースを消費します。小規模な Web サイトの場合、これを使用しても大きなリソースの無駄は発生しませんが、Yahoo のような非常に大規模な構造を持つ Web サイトの場合は、リソースの無駄を減らすために CSS を選択的にリセットするだけで済みます。
2. Ateneu 人気の CSS リセット
html、body、div、span、アプレット、オブジェクト、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}
3. 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;
4.
Yahoo の CSS リセット
body,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;
5.
Eric Meyer CSS をリセット
html、body、div、span、アプレット、オブジェクト、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 {
引用符: "" "";
6.
Tantek Celik CSS のリセット
:link,:visited { text-decoration:none }
ul,ol { リストスタイル:なし }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ マージン:0; パディング:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
7. Christian Montoya CSS をリセット
html、本文、フォーム、フィールドセット {
マージン: 0;
パディング: 0;
フォント: 100%/120% Verdana、Arial、Helvetica、サンセリフ。
}
h1、h2、h3、h4、h5、h6、p、pre、
blockquote、ul、ol、dl、アドレス {
マージン: 1em 0;
パディング: 0;
}
li、dd、ブロッククォート {
マージン左: 1em;
}
フォームラベル {
カーソル: ポインタ;
}
フィールドセット {
境界線: なし。
}
入力、選択、テキストエリア {
フォントサイズ: 100%;
フォントファミリー: 継承;
8.
Rudeworks リセット CSS
* {
マージン: 0;
パディング: 0;
境界線: なし。
}
html {
フォント: 62.5% 「Lucida Grande」、Lucida、Verdana、サンセリフ。
テキストシャドウ: #000 0px 0px 0px;
}
ウル {
リストスタイル: なし;
リストスタイルタイプ: なし;
}
h1、h2、h3、h4、h5、h6、p、pre、
blockquote、ul、ol、dl、アドレス {
フォントの太さ: 通常;
マージン: 0 0 1em 0;
}
引用、em、dfn {
フォント スタイル: イタリック体。
}
すする {
位置: 相対的;
下: 0.3em;
垂直整列: ベースライン;
}
サブ{
位置: 相対的;
下: -0.2em;
垂直整列: ベースライン;
}
li、dd、ブロッククオート {
マージン左: 1em;
}
コード、kbd、samp、pre、tt、var、input[type='text']、textarea {
フォントサイズ: 100%;
フォントファミリー: monaco、「Lucida Console」、クーリエ、モノスペース;
}
デル {
テキスト装飾: ラインスルー;
}
ins、dfn {
ボーダーボトム: 1px ソリッド #ccc;
}
スモール、サップ、サブ {
フォントサイズ: 85%;
}
略語、頭字語 {
テキスト変換: 大文字;
フォントサイズ: 85%;
文字間隔: .1em;
ボーダーボトムスタイル: 点線;
ボーダーの下の幅: 1px;
}
略語、頭字語 {
境界線: なし。
}
すする {
垂直整列: スーパー;
}
サブ{
垂直整列: サブ;
}
h1 {
フォントサイズ: 2em;
}
h2 {
フォントサイズ: 1.8em;
}
h3 {
フォントサイズ: 1.6em;
}
h4 {
フォントサイズ: 1.4em;
}
h5 {
フォントサイズ: 1.2em;
}
h6 {
フォントサイズ: 1em;
}
a、a:リンク、a:訪問済み、a:ホバー、a:アクティブ {
概要: 0;
テキスト装飾: なし。
}
画像 {
境界線: なし。
テキスト装飾: なし。
}
画像 {
境界線: なし。
テキスト装飾: なし。
}
ラベル、ボタン {
カーソル: ポインタ;
}
input:focus、select:focus、textarea:focus {
背景色: #FFF;
}
フィールドセット {
境界線: なし。
}
。クリア {
クリア：両方。
}
.float-left {
フロート: 左;
}
.float-right {
フロート: 右;
}
体 {
テキスト整列: 中央;
}
#ラッパー {
マージン: 0 自動;
テキスト整列: 左;
9.
Anieto2K CSS をリセット
html、body、div、span、アプレット、オブジェクト、iframe、
h1、h2、h3、h4、h5、h6、p、
blockquote、pre、a、abbr、頭字語、アドレス、big、
引用、コード、デル、dfn、em、フォント、画像、
ins、kbd、q、s、samp、小さい、ストライク、
ストロング、サブ、サップ、tt、var、dl、dt、dd、ol、ul、li、
フィールドセット、フォーム、ラベル、凡例、
表、キャプション、tbody、tfoot、thead、tr、th、td、
センター、u、b、i {
マージン: 0;
パディング: 0;
境界線: 0;
概要: 0;
フォントの太さ: 通常;
フォントスタイル: 通常;
フォントサイズ: 100%;
フォントファミリー: 継承;
垂直配置: ベースライン
}
体 {
行の高さ: 1
}
：集中 {
概要: 0
}
オル、ウル{
リストスタイル: なし
}
テーブル {
境界崩壊: 崩壊;
境界線の間隔: 0
}
blockquote:before、blockquote:after、q:before、q:after {
コンテンツ： ""
}
ブロッククォート、q {
引用符：「」「」
}
入力、テキストエリア {
マージン: 0;
パディング: 0
}
時間 {
マージン: 0;
パディング: 0;
境界線: 0;
色: #000;
背景色: #000;
高さ: 1px
10.
CSSLab CSS リセット
html、body、div、span、アプレット、オブジェクト、iframe、h1、h2、h3、
h4、h5、h6、p、blockquote、pre、a、abbr、頭字語、アドレス、
ビッグ、引用、コード、デル、dfn、em、フォント、img、ins、kbd、q、s、サンプ、
スモール、ストライク、ストロング、サブ、sup、tt、var、dl、dt、dd、ol、ul、li、
フィールドセット、フォーム、ラベル、凡例、テーブル、キャプション、tbody、tfoot、
ヘッド、tr、th、td {
マージン: 0;
パディング: 0;
境界線: 0;
概要: 0;
フォントの太さ: 継承;
フォントスタイル: 継承;
フォントサイズ: 100%;
フォントファミリー: 継承;
垂直整列: ベースライン;
}
：集中 {
概要: 0;
}
テーブル {
ボーダー折りたたみ: 分離;
境界線の間隔: 0;
}
キャプション、th、td {
テキスト整列: 左;
フォントの太さ: 通常;
}
img、iframe {
境界線: なし。
}
オル、ウル{
リストスタイル: なし;
}
入力、テキストエリア、選択、ボタン {
フォントサイズ: 100%;
フォントファミリー: 継承;
}
{を選択してください
マージン: 継承;
}
/* IE6/7 での ol の数字の誤った配置を修正します */
ol { マージン左:2em }
/* == クリアフィックス == */
.clearfix:後 {
コンテンツ： "。";
表示: ブロック;
高さ: 0;
クリア：両方。
可視性: 非表示;
}
.clearfix {表示: インラインブロック;}
* html .clearfix {高さ: 1%;}
.clearfix {display: block;}
これらはすべて似ていますが、ニーズと方法が異なります。