首页 > 编程学习 > Html&CSS > CSS初始化的学习

CSS初始化的学习

CSS初始化是针对不同浏览器对相同标签和样式在渲染时表现出不同的显示效果而推出的一种解决措施,根据查询CSS重置(重设)、CSS RESET表示的是同一个意思。

在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

——摘自百度百科 reset.css词条

这样讲可能不太明白,下面举例说明:

ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。此时给ul写样式,比如加个border或者写个margin值,在IE和Firfox下预览到的效果是完全不同的。

但是如果我们在css代码开始为ul添加了,如下属性:

ul{
	margin: 0;
	padding: 0;
}

无论在火狐还是IE下ul标签的样式都是一致的,此时在给它添加其他样式,如上文提到的margin和border就会发现,刚才的差异消失了。没错这就是一个简单的CSS初始化的例子。

互联网发展这么多年,离不开一个又一个辛苦耕耘的程序员,这样的问题肯定有前人遇到过,后来经过大量的项目案例整理总结,到现在必然会有一些相对成熟的解决方案了。

最早的css reset代码是这样的,也许你不知道这个概念,但是已经在项目中使用到了:

* {
      padding: 0;
      margin: 0;
}

这两行代码简单明了,优点与缺点并存。在一些小型项目中可能没有问题,但是如果遇到引用了大的css文件或者复杂的项目,通配符会匹配页面中所有的DOM元素,然后将内外边距设为0,这必然会导致资源浪费和项目的效率低下。

推荐的做法是针对html标签有选择性的进行初始化,比如,某些标签在IE和火狐中默认显示效果不一致,这类标签对其初始化;某些标签在不同浏览器中效果相差无几,就可以不对其进行处理。

目前雅虎的css初始化(css reset)代码貌似是比较有名的,据说从国内各大门户电商网站如:淘宝、网易、新浪、腾讯等的css初始化代码中都可以看到雅虎css reset代码的影子。(这一点未经考证,但是个人认为大家用的html标签都是一样的,本来不就应该差不多么~)

另外由于国内山寨风盛行,各个网站基本都是一个抄一个,css reset代码也基本一样,但是据说这个东西还是根据自己的项目需求来,拿来主义是要取其精华、去其糟粕。以雅虎的css reset为蓝本,略作修改变成符合自己的才是王道。

只是听过雅虎的css初始化代码很牛逼,也许是最早做出规范才这么出名吧。为了一睹芳容也是废了老劲儿了,百度搜出来的都感觉不那么像真的,找了好久才找到官方的项目主页。

YaHoo css reset官方地址:http://www.cssreset.com/scripts/yahoo-css-reset-yui-3/

下面是从项目主页找到的最新版的css reset代码,3.18.1版本:

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.

http://yuilibrary.com/license/

*/

html {
	color: #000;
	background: #FFF
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,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;
	font-variant: normal
}

sup {
	vertical-align: text-top
}

sub {
	vertical-align: text-bottom
}

input,textarea,select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	*font-size: 100%
}

legend {
	color: #000
}

#yui3-css-stamp.cssreset {
	display: none
}