CSS:css resetを知る
2265 ワード
css resetとは?
reset,リセット.名前の通りcss resetはリセットスタイルです.
なぜcss resetが必要なのですか?
よく知られているように、現在使用されている主流のブラウザはいくつかのラベルのデフォルト属性に統一されていないので、あるページはchromeブラウザで正常で、firefoxに着いても意図的に考えられない偏差を発見します.もちろんプログラマはこのような互換性の問題が好きではありません.reset.cssはデフォルトのスタイルの互換性の問題を解決する方法の一つです.
css resetの発展過程
第1部css reset:Tantekのundohtml.css
一世を風靡したresetの書き方:
*{ margin:0; padding:0; }
(簡単で木があるが、残念なことにロードが遅いので、プログラマーに捨てられた)現在よく使われているresetの書き方:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”
}
blockquote, q {
quotes: “” “”
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}}
以上のcss resetコードはネットワークからロードされ、全面的なresetである.css
css resetに対する思考
比較的完全なresetが見えましたcssは友達が何を考えているのか分からないが、「どのプロジェクトにもこのようなreset.cssを導入しているので、お母さんはブラウザのデフォルトスタイルが私に影響を与える心配はありません」とか「何の鬼...」と思っているのか、これらはともかく、私は自分の見方を話します.
CSS resetの役割は、各ブラウザのCSSスタイルに統一された基準を持たせることですが、この基準は一般的に「クリア」とされていますが、私たちは本当にこんなに多くのラベルを設定する必要がありますか?明らかに違います.これは全面的ですが、コードの冗長性を考慮していません.結局、すべてのプロジェクトがどのように多くのラベルをリセットする必要があるわけではありません.だから考えないほうがいいです.全面的なresetコピーを自分のstyleディレクトリの下に貼って、よく選んでひっくり返して、役に立つものを残して、役に立たないものといらないものを無駄にcssの大きさを増加させないでください.
最後に張鑫旭の一言を引用します.