リセットCSSとは何ですか

reset css は、ブラウザ タグのスタイル シートをリセットするための reset.css を指します。その機能は、ブラウザのデフォルト スタイルをすべて削除することです。より正確には、タグ スタイルを再定義することです。ブラウザに提供するデフォルトのスタイルは上書きされます。

この記事の動作環境: Windows7 システム、CSS3 バージョン、DELL G3 コンピューター

reset.css リセットブラウザのタグ スタイル シート

HTML タグにはブラウザのデフォルト スタイルがあります。たとえば、p タグには上下のマージンがあり、strong タグには太字のフォント スタイルがあり、em タグには斜体フォントのスタイルがあります。 。異なるブラウザのデフォルト スタイルにも違いがあります。たとえば、ul はデフォルトでインデントされたスタイルを持ちます。IE では、そのインデントはマージンによって実現されますが、Firefox では、そのインデントはパディングによって実現されます。

ページを切り替えるとき、ブラウザのデフォルトのスタイルはトラブルの原因となり、開発効率に影響を与えることがよくあります。したがって、解決策は、ブラウザのデフォルト スタイルをすべて最初から削除すること、より正確には、ラベル スタイルを再定義することによって削除することです。ブラウザの CSS デフォルト プロパティを「オーバーライド」します。最も簡単な方法は、ブラウザによって提供されるデフォルトのスタイルを上書きすることです。これがCSSのリセットです。

リセット機能

ブラウザにはさまざまな種類があるため、IE ブラウザでは bb9345e55eb71822850ff156dfde57c8 タグなど、ブラウザごとにデフォルトのスタイルも異なります。 、Firefox、Safariブラウザではスタイルが異なるため、ボタンタグのCSSプロパティを再設定して統一的に定義することで、同様の表示効果を得ることができます。

最も単純な CSS Reset コンテンツは、わずか数行で完了できます:

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

(ただし、パフォーマンスが低いため、お勧めできません)

このメソッドは、すべてのセレクターを作成します。パディング、マージン、ボーダーはすべて 0 に設定されます。 YUI の CSS Reset コンテンツ:

body,div,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;
}

や海外セレブ Eric Meyer の CSS Reset V1.0|200802 コンテンツ:

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%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Eric Meyer V2.0|20110126# # など、その他のコンテンツもあります。 #

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,
　　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,article, aside, canvas, details, embed,
　　figure, figcaption, footer, header, hgroup, menu, nav, output,
　　ruby, section, summary,time, mark, audio, video {
　　margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
　　}
　　/* HTML5 display-role reset for older browsers */
　　article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
　　display: block;}body {line-height: 1;
　　}
　　ol, ul {list-style: none;
　　}blockquote, q {quotes: none;}
　　blockquote:before, blockquote:after,
　　q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}

ご覧のとおり、これらのコンテンツ メソッドは異なりますが、機能は似ており、すべてリセットの役割を果たすため、CSS リセットはさまざまな個人のニーズに応じてカスタマイズできます。

推奨学習: 「

css ビデオ チュートリアル 」

以上がリセットCSSとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。