CSS初始化含义及目的

含义：CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一，即将CSS初始化。

目的：这是为了考虑到浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。如果不初始化，整个页面做完会很糟糕，重复的css样式很多。当然，初始化样式会对SEO有一定的影响，但力求影响最小的情况下初始化。

方法：最简单的初始化方法就是： * {padding: 0; margin: 0;} 。但这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载过慢。

淘宝的CSS初始化代码如下：


body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

CSS初始化含义及目的相关推荐

CSS初始化样式应该怎么写
每次我在制作网页模板的时候,都会对网页的css进行必要的初始化. 初始化的字面意思就是给变量赋为默认值,CSS样式表的初始化是对浏览器自带样式的重设,(也称为CSS Reset),如果不写,文档就会默 ...
浏览器默认标签样式总结及css初始化程序（转）
浏览器默认标签样式总结及css初始化程序 html中的大部分的标签都有一些糟糕的样式,有的是标签天然自带的,有的是浏览器默认设置的,我们在写网页时,这些默认的样式就会时不时的跳出来捣一下乱,搞得我们很 ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
十一、CSS初始化详解
CSS初始化不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容性,我们需要对CSS初始化. 简单理解:CSS初始化是指重设浏览器的样式.(也称为CSS ...
CSS初始化示例代码
CSS初始化示例代码/*css reset www.admin10000.com*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form ...
CSS初始化（科普）
一.为什么要初始化 1.浏览器差异因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异. 2.提高编码质量初始化CSS为我们节约网页代 ...
yahoo(雅虎)工程师提供css 初始化代码
雅虎工程师提供的CSS初始化示例代码 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input, ...
CSS 系列七高级技巧篇精灵图、字体图标、CSS三角、图片和文字对齐以及bug 、溢出文字省略号、CSS 初始化、常见的布局技巧
--------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
京东CSS初始化及理解
本节是从京东官网下载的部分css初始化样式,如下面的代码,都给出了相关注释. 前端初学者可以参考京东的初始化样式书写,用于完善自己的代码. 具体如下: /* 把我们所有标签的内外边距清0 */ * { ...

CSS初始化含义及目的

CSS初始化含义及目的相关推荐

最新文章

热门文章