重置默认样式 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 { 
 
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:""; 
}

百度有啊(www.youa.com):(架构基本上是模仿YUI来做的) 
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; 

在《超越css》一书中建议我们做网站开始重置所有默认样式: 
/* 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:‘‘} 
那我们实际写代码的时候该怎么来css reset呢? 
我个人推荐使用(Eric Meyer和YUI)的 css reset 
Eric Meyer‘s 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; 

YUI: 
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 reset写法,再根据自己的实际情况,一定能写出符合自己网站的完美的css reset。

时间: 2024-08-01 06:06:33

重置默认样式 css reset的相关文章

清除浏览器默认样式——css reset & normalize.css

css reset 自己挨个清除很麻烦 可以使用网上一些css库——css reset 把模板复制到css文件最上方,其他的样式我们自己编写来覆盖它们 但是这个也有一些弊端,会把一些本来需要的样式给清除了,比如h标签,本来是分级别的,但是使用css reset后,所有都变得一样了 normalize css 所以改用normalize css 我们可以使用 npm安装:npm install normalize.css 也可以用百度静态资源库:cdn.code.baidu.com 如果打不开可以

重置默认样式

最近看到一个词叫css reset.什么叫做css reset呢?我理解为重置css,也就是重置默认样式.我在HTML下的默认样式中讲到,一些标签元素在HTML下有一个默认属性值,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式(css reset). 淘宝(www.taobao.com): html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fi

CSS重置默认样式reset.css代码模板

   由于各大浏览器存在兼容性问题,同一个CSS属性在不同浏览器下的表现不一定相同,有经验的前端设计者都会自定义一个重置浏览器样式的CSS文件,在这个文件中定义一些针对不同的浏览器最终表现出一致的代码,大家最熟悉的也许就是* {margin:0 0}了,其实这是最简单的兼容性的代码,一般情况下,仅有这个是不够的,因此笔者收集了几个前端设计网站使用的reset.css代码模板,如果需要你可以复制这些代码保存为reset.css文件,然后引用在所需的html文件中即可. 注意:您可以根据您自己的实际

浏览器默认样式及reset

写在前面 首先纠正一个易错概念.div并非生来就是块元素,而是每个浏览器都有一套默认的css样式(优先级最低),默认样式里会把div设置成display: block;还有margin,padding等.这就是不同浏览器初始化样式不同的原因.也是为什么要做css reset的原因. 注:chrome等可以在调试工具里看到默认样式,是不可修改的,置灰的,如下图.各浏览器默认样式详情请参考<浏览器默认样式对比表>. 1.浏览器默认样式 这里无需过多赘述,最直观的就是上表,给大家几个地址: 1.浏览

关于reset.css的重置默认样式最基本的写法(自己用)

/* 重置样式 start *//* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */fieldset, lengend, button, input, textarea, /* form e

重置浏览器的默认样式(css reset)

(1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理使每个浏览器下展示一致,故需要css reset (3)内容:第一个:*{padding:0;margin:0;border:0;}第二个:你所用到的元素{padding:0;margin:0;border:0;},然而第一个虽然写起来简单,但是它却会将所有的标签重置,而我们可能没有必要将那么多的元

关于css reset

什么叫做css reset呢?即重置css,也就是重置默认样式.一些标签元素在HTML下有一个默认属性值,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式(css reset). 以前使用最多*{margin:0;padding:0},但其格式化太严重,慢慢被废弃. 个人认为:应根据需求,量体裁衣. /* reset */html{color:#000;background:#fff;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h

css reset重置样式有那么重要吗?

在以前写html代码的时候,一般都会在head里添加重置样式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

CSS RESET —— 浏览器样式重置

CSS Reset 1. CSS Reset为什么存在? 只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CSS的解析效果呈现各异,导致您所期望的效果跟浏览器的"理解"效果有偏差,今天提到的css reset就是用来重置(复位)元素在不同核心浏览器下的默认值,尽量保证元素在不同浏览器下的同一"起跑线". --引用自关于CSS Reset 2. CSS Reset该怎么写? CS