Css Reset(リセット)メソッドアレンジ_体験交流-CSSチュートリアル-php.cn

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

PHP中文网

リリース： 2016-05-16 12:04:32

オリジナル

1852 人が閲覧しました

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; 
}

ログイン後にコピー