CSS Reset(样式重置)

CSS Reset,意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSS Reset)。举几个例子:
1.淘宝(CSS Reset):
html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:””;
}
2.百度(CSS Reset):
body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}
3.《超越css》(CSS Reset):
/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0}
/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size:100%}
/* Removes list-style from lists */
ol,ul { list-style:none }
/* Normalizes font-size and font-weight to normal */
address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }
/* Removes list-style from lists */
table { border-collapse:collapse; border-spacing:0 }
/* Removes border from fieldset and img */
fieldset,img { border:0 }
/* Left-aligns text in caption and th */
caption,th { text-align:left }
/* Removes quotation marks from q */
q:before,q:after { content:”}
4.Eric Meyer(CSS 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,
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;
}
5.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 {
margin:0;
padding:0;
}
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:100%;
font-weight:normal;
}
q:before,q:after {
content:”;
}
abbr,acronym { 
border:0;
}

### 如何在 CSS 中实现样式重置的最佳实践 #### 使用 `Normalize.css` 进行基础样式统一 为了确保不同浏览器之间的默认样式一致,推荐使用 `normalize.css`。此工具不会移除所有的默认样式,而是通过修复常见的跨浏览器不一致性来提供更一致的基础样式[^4]。 ```html <!-- 在 HTML 文件头部引入 normalize.css --> <link rel="stylesheet" href="path/to/normalize.css"> ``` #### 设置全局盒模型为 `border-box` 尽管 `normalize.css` 并未默认设置所有元素的盒模型为 `border-box`,但这对于许多开发者来说是一个非常有用的做法。可以通过下面的方式应用到整个文档中的每一个元素上: ```css *, *:before, *:after { box-sizing: border-box; } ``` #### 移除非语义化的内边距和外边距 清除不必要的内外边距可以防止意外的空间或布局问题发生。这一步骤通常涉及对大多数标签执行如下操作: ```css body, h1, h2, p, ul, ol, li, dl, dt, dd, blockquote, figure, fieldset, legend { margin: 0; padding: 0; } /* 对于表单控件 */ button, input, select, textarea { font-family: inherit; /* 继承字体 */ margin: 0; padding: 0; } ``` #### 调整文本属性的一致性 为了让页面上的文字显示更加和谐统一,建议调整一些基本的文字渲染参数: ```css html { line-height: 1.5; /* 合适的行高 */ text-rendering: optimizeLegibility; /* 提升可读性 */ -webkit-font-smoothing: antialiased; /* 抗锯齿优化 */ -moz-osx-font-smoothing: grayscale; } ``` #### 处理列表项标记符 有时需要去除无序列表 (`ul`) 和有序列表 (`ol`) 的项目符号,以便更好地控制其外观: ```css ul, ol { list-style-type: none; } ``` #### 图像与媒体对象处理 图片和其他嵌入式内容应该被设定为块级元素以避免潜在的垂直间距问题,并且应允许它们响应容器大小变化: ```css img, video, audio, canvas, iframe { display: block; max-width: 100%; height: auto; } ``` #### 表格布局标准化 表格内的单元格应当具有适当的填充以及边界合并行为,从而使得数据展示更为清晰整洁: ```css table { width: 100%; /* 占满父容器宽度 */ table-layout: fixed; /* 固定列宽 */ border-collapse: collapse; /* 边框合并 */ } th, td { padding: .75em; vertical-align: top; border-bottom: 1px solid #ddd; } ``` 以上方法综合运用能够有效地创建一套适用于项目的 CSS 样式重置方案,既保持了良好的兼容性和美观度,又减少了因浏览器差异带来的麻烦。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值