Css Reset(リセット)メソッドアレンジ_体験交流

css reset とは何ですか? 同僚の中にはこれを「css リセット」と呼ぶ人もいれば、「デフォルト css」と呼ぶ人もいます...

この文書を読むと、css reset について新たな理解が得られると思います。全文ps:

* { 
padding: 0; 
margin: 0; 
}

これは最も一般的に使用される css リセットですが、ここには多くの問題があります。

元の記事の前の部分では、css と各ブラウザの css ルールの違いについて詳しく説明しました。「css リセット」も互換性と統一のために策定されています。「」の正しく効果的な使用法css reset」は時間とお金をある程度節約できます。

整理してまとめてくれた perishable に感謝します。

以下は、いくつかの種類の css reset の簡単な紹介です。 . 私の能力には限界があります。大まかにしか理解できません。つまり、許してください。

ミニマル リセット [ バージョン 1 ]
この段落はよく目にすると思います。また、それは何ですか私たちはよく使用します

* { 
padding: 0; 
margin: 0; 
}

minimalistic reset [ version 2 ]
border:0 の設計は少し信頼できません

* { 
padding: 0; 
margin: 0; 
border: 0; 
}

minimalistic reset [ version 3 ]
ofもちろん、これはお勧めしません。いくつかのデフォルトの競合スタイルと比較されます。

* { 
outline: 0; 
padding: 0; 
margin: 0; 
border: 0; 
}

凝縮されたユニバーサル リセット
これは、作成者が現在好んでいる記述方法です。比較的一般的なブラウザの統一性が保証されます。スタイル。

* { 
vertical-align: baselinebaseline; 
font-weight: inherit; 
font-family: inherit; 
font-style: inherit; 
font-size: 100%; 
border: 0 none; 
outline: 0; 
padding: 0; 
margin: 0; 
}

貧乏人のリセット
実際、これも私たちがよく使う css リセットの一種です。フォントのサイズをリセットし、画像リンクの境界線を処理します。
一部のサイトでもよく見られます

html, body { 
padding: 0; 
margin: 0; 
} 
html { 
font-size: 1em; 
} 
body { 
font-size: 100%; 
} 
a img, :link img, :visited img { 
border: 0; 
}

ショーン インマンのグローバル リセット
著者は、ショーンが何らかの目的でこのタイプの css リセットを作成していると考えています。
そしてこのタイプルールの一部は、一般的に使用される重要なブラウザを対象としています。
例: firefox など

body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, 
form, fieldset, input, p, blockquote, table, th, td, embed, object { 
padding: 0; 
margin: 0; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
fieldset, img, abbr { 
border: 0; 
} 
address, caption, cite, code, dfn, em, 
h1, h2, h3, h4, h5, h6, strong, th, var { 
font-weight: normal; 
font-style: normal; 
} 
ul { 
list-style: none; 
} 
caption, th { 
text-align: left; 
} 
h1, h2, h3, h4, h5, h6 { 
font-size: 1.0em; 
} 
q:before, q:after { 
content: ''; 
} 
a, ins { 
text-decoration: none; 
}

yahoo css リセット
ヤフーによって作成されたリセット個人的にお勧めです。

body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, 
fieldset,input,textarea,p,blockquote,th,td { 
padding: 0; 
margin: 0; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
fieldset,img { 
border: 0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
font-weight: normal; 
font-style: normal; 
} 
ol,ul { 
list-style: none; 
} 
caption,th { 
text-align: left; 
} 
h1,h2,h3,h4,h5,h6 { 
font-weight: normal; 
font-size: 100%; 
} 
q:before,q:after { 
content:''; 
} 
abbr,acronym { border: 0; 
}

erik meyer の css リセット 作者は erik meyer のコードを再配置しました。しかし、機能は同じです。
この css リセットのセットは、業界

html, body, p, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend { 
vertical-align: baselinebaseline; 
font-family: inherit; 
font-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
outline: 0; 
padding: 0; 
margin: 0; 
border: 0; 
} 
/* remember to define focus styles! */ 
:focus { 
outline: 0; 
} 
body { 
background: white; 
line-height: 1; 
color: black; 
} 
ol, ul { 
list-style: none; 
} 
/* tables still need cellspacing="0" in the markup */ 
table { 
border-collapse: separate; 
border-spacing: 0; 
} 
caption, th, td { 
font-weight: normal; 
text-align: left; 
} 
/* remove possible quote marks (") from <q> & <blockquote> */ 
blockquote:before, blockquote:after, q:before, q:after { 
content: ""; 
} 
blockquote, q { 
quotes: "" ""; 
}

condensed meyer reset
全般 これは、erik meyer の css reset の変更と改良です。

body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
padding: 0; 
margin: 0; 
} 
fieldset, img { 
border: 0; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
ol, ul { 
list-style: none; 
} 
address, caption, cite, code, dfn, em, strong, th, var { 
font-weight: normal; 
font-style: normal; 
} 
caption, th { 
text-align: left; 
} 
h1, h2, h3, h4, h5, h6 { 
font-weight: normal; 
font-size: 100%; 
} 
q:before, q:after { 
content: ''; 
} 
abbr, acronym { 
border: 0; 
}