リセット.cssとは

reset.css は、ブラウザのタグをリセットするスタイル シートです。その機能は、タグ スタイルを再定義し、ブラウザの CSS デフォルト プロパティをオーバーライドすることです。つまり、ブラウザが提供するデフォルト スタイルを上書きします。

推奨: "css ビデオ チュートリアル "

reset.css ブラウザ タグのスタイル シートをリセットします。

HTML タグにはブラウザのデフォルト スタイルがあります。たとえば、p タグには上下の余白があり、strong タグには太字のフォント スタイルがあり、em タグには斜体フォントのスタイルがあります。異なるブラウザのデフォルト スタイルにも違いがあります。たとえば、ul はデフォルトでインデントされたスタイルを持ちます。IE では、そのインデントはマージンによって実現されますが、Firefox では、そのインデントはパディングによって実現されます。ページを切り替えるとき、ブラウザのデフォルトのスタイルはトラブルの原因となり、開発効率に影響を与えることがよくあります。

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

リセット機能

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

コンテンツ

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

* { 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
[1] 
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 Reset はさまざまな個人のニーズに応じてカスタマイズできます。

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