CSS Reset方法

CSS Reset 即重设浏览器的样式。在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。

但并不是所有的浏览器都使用一样的数值,所以,有了CSS Reset,以让网页的样式在各浏览器中表现一致。

正在使用CSS的你,用过CSS Reset吗?当然,或许你用了,却不知道正在用,比如你可能用到:

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

这也是一种CSS Reset的方法,让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法,也是最简单,最安全的方法,不过,

也是最占用资源的方法。对于小型的网站来说,用这个并不会带来大的资源浪费,但如果是像Yahoo这种架构非常大的网站,刚需要有选择地进行CSS重设,

以减少资源浪费。下面是Yahoo的CSS重设代码,也是受最多人喜爱的CSS Reset方法,YUI选择的方法是:

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;
}

OK,相信你也已经了解了CSS重设的目的,或许你也可以根据自己的喜好,写一个自己的CSS重设系统,毕竟大家的需求和习惯的不同的。

转载http://www.nowamagic.net/librarys/veda/detail/732

时间: 2024-11-05 13:50:18

CSS Reset方法的相关文章

目前比较全的CSS重设(reset)方法总结

在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是 重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题). 但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现. 当今流行的浏览器(如:Firefox.Opera.Internet Explorer.Chrome.Safari等等)中,有一些都是以自己的方式去

前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 多列布局 全屏布局 第3章--响应式 浏览网页使用的设备屏幕大小迥异,如何保证页面在不同设备上都正常显示呢? --  解决方法:响应式 优点:无需为不同设备编写对应的页面 --> 降低开发成本.维护成本 缺点:页面中某些部分在某些设备上会被隐藏(资源加载了,但是只是用CSS隐藏了) 为什么在手机端的页面会很小呢? 所有的移动端的页面都引入了viewport视窗 刚开始所有的元素都是加载到一个比较大的viewport视

normalize.css使用方法

综述 Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的: 保护有用的浏览器默认样式而不是完全去掉它们 一般化的样式:为大部分HTML元素提供 修复浏览器自身的bug并保证各浏览器的一致性 优化CSS可用性:用一些小技巧 解释代码:用注释和详细的文档来 Normalize.css支持包括手机浏览器在内的超多浏览器,同时对HTML5元素.排版.列表.嵌入的内容.表单和表格都进行了一般化.尽管这个项目基于一般化的原则,但我们还是在合适的

normalize.css使用方法,normalize.css下载

来,让我们谈一谈 Normalize.css Nov 18, 2014 - 浏览量:22,046次 | Normalize.css CSS 本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备的优质替代方案.No

Css Rest 方法

在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是 重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题). 但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现. 当今流行的浏览器(如:Firefox.Opera.Internet Explorer.Chrome.Safari等等)中,有一些都是以自己的方式去

Normalize.css与CSS reset区别

Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备的优质替代方案.Normalize.css现在已经被用于Twitter Bootstrap.HTML5 Boilerplate.GOV.UK.Rdio.CSS Tricks 以及许许多多其他框架.工具和网站上. Normalize.css 项目地址 Normalize.css 在GitHub上的源码

HTML常用命名和CSS reset代码【收集总结】

CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:foote

CSS Reset的相关概念及实例

原文 简书原文:https://www.jianshu.com/p/fdb79010895c 大纲 1.什么是css reset? 2.CSS reset的实例 1.什么是css reset? 个人理解:就是让不同浏览器的初始化的css样式统一 1.1.在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题).但是,我们并没有生活

关于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