三种CSS 全局Reset 方案

最新推荐文章于 2025-02-19 08:24:55 发布

yzbben

最新推荐文章于 2025-02-19 08:24:55 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签：全局reset

css 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了三种不同的CSS重置样式方案，包括通用选择器清除默认样式、Yahoo的YUI CSS Reset以及一种更为全面的选择器覆盖方案。这些方案旨在帮助开发者解决浏览器间的样式差异问题，确保网页在不同浏览器中具有一致的表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方案1

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

:focus {
　　outline: 0;
}

body {
　　background: white;
　　line-height: 1;
　　color: black;
}

ol, ul {
　　list-style: none;
}

table {
　　border-collapse: separate;
　　border-spacing: 0;
}

caption, th, td {
　　font-weight: normal;
　　text-align: left;
}

blockquote:before,blockquote:after, q:before, q:after {
　　content: "";
}

blockquote, q {
　　quotes: "" "";
}

方案2：Yahoo’s（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;
}

方案3
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;

　　outline:none;

}
html{

　　height:101%;/* 总是显示滚动条 */

}
body{

　　font-size:62.5%;

line-height:1;