ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS RESET スタイルをリセットすることはそれほど重要ですか? _html/css_WEB-ITnose

CSS RESET スタイルをリセットすることはそれほど重要ですか? _html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:36:55
オリジナル
1259 人が閲覧しました

以前HTMLコードを書くときは、先頭にresetスタイルのreset.cssを追加することが多かったのですが、その内容は以下の通りです:

@charset "utf-8";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,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {    margin: 0;    padding: 0;    border: 0;    outline: 0;    font-size: 100%;    /*background: transparent;*/}table {    border-collapse:collapse;    border-spacing:0;}fieldset, img {    border:0;}address, caption, cite, code, dfn, em, strong, th, var {    font-style:normal;    font-weight:normal;}ol, ul { list-style:none; }caption, th { text-align:left; }h1, h2, h3, h4, h5, h6 {    font-size:200%;    font-weight:normal;}:focus { outline: 0;}a{ text-decoration:none;}a:hover img{ border:none;}a:active{noOutline:expression(this.onFocus=this.blur());}/*清除浮动*/.clearfix:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}.clearfix {display: inline-block;}/* Hides from IE-mac \*/* html .clearfix { height: 1%;}.clearfix {display: block;}/* End hide from IE-mac *//*png css hack for ie6*/*html img.png{    _background-image: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "http://i0.itc.cn/20101019/848_0a785a7b_1118_4825_85dc_e8696988c94b_0.gif");}
ログイン後にコピー

最近ネット記事を読んでいると、あるような気がします。いくつかのリセットは無駄です。なぜ?

リセットの機能とは何ですか?

CSS リセットの機能は、さまざまなブラウザーの CSS スタイルの統一されたベースラインを持つことであり、このベースラインはむしろ「クリアランス」です。

時々、次のような他の人のウェブサイトのリセットを見かけます:

*{ margin:0; padding:0; }
ログイン後にコピー

そのような書き方は、あまりお勧めできません。

次に、リセット テーブルを見て、以下を見つけます:

1. div タグにはデフォルトでマージン値がありますか?パディングには価値があるのか​​?なぜ div{margin:0; padding:0;} 属性を適用しようと考えたのですか?答えは間違いなくそうではありません。
2. dt タグのデフォルトのマージンとパディングの値は 0 ですが、なぜそれらを使用する必要があるのでしょうか?
3. li タグにはデフォルトでマージン値がありますか?パディングには価値があるのか​​?いいえ!
4. code タグはインライン要素であり、実際にはマージンとパディングのリセットが含まれますが、これは不要です。
5. 1990 年代の 2 つのタグである fieldset と legend をウェブサイトで使用していますか?使用確率が1%未満のタグはリセットする必要はありません。

CSS は、いくつかの一般的に使用されるタグでのみリセットできます。ページで通常どのようなタグを使用しますか?

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}  ol,ul{margin:0; padding:0;}
ログイン後にコピー

この種の CSS リセットは効率的かつ簡潔で、他のタグは削除できるので必要ありません。

もちろん、CSS リセットの長所と短所は言うまでもありませんが、CSS リセットについては十分に承知していると思いますが、やはり実際のプロジェクトに基づいて行う必要があります。

その後、私の上司は、reset.css の代わりに Normalize.css を使用することを勧めてくれました。使い方は後の記事で紹介します。

著者: 嵐の後の虹を見ましょう

出典: http://www.cnblogs.com/moqiutao/

この記事があなたの研究に役立つと思われる場合は、サポートと励ましをお願いします自分 。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート