CSS初始化（科普）

一、为什么要初始化

1、浏览器差异

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

2、提高编码质量

初始化CSS为我们节约网页代码，节约网页下载时间；还会使得我们开发网页内容时更加方便简洁，不用考虑很多。如果不初始化，整个页面做完会很糟糕，重复的css样式很多。我们在开发比较复杂的网页时候就不会知道自己是否已经设置了此处的CSS属性，是否和前面的CSS属性相同，是否统一整个网页的风格和样式。

每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。

二、怎么初始化

最简单的初始化的方式：

* {padding: 0; margin: 0;}

*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。

以下是一些大网页的初始化方式：

京东式初始化：

* {margin: 0;padding: 0
}em,
i {font-style: normal
}li {list-style: none
}img {border: 0;vertical-align: middle
}button {cursor: pointer
}a {color: #666;text-decoration: none
}a:hover {color: #c81623
}button,
input {font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}body {-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}.hide,
.none {display: none
}.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}

淘宝式初始化：

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

腾讯式初始化：

body,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
select {margin: 0;padding: 0
}body {font: 12px"宋体", "Arial Narrow", HELVETICA;background: #fff;-webkit-text-size-adjust: 100%;
}a {color: #2d374b;text-decoration: none
}a:hover {color: #cd0200;text-decoration: underline
}em {font-style: normal
}li {list-style: none
}img {border: 0;vertical-align: middle
}table {border-collapse: collapse;border-spacing: 0
}p {word-wrap: break-word
}

新浪式初始化：

body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {margin: 0;padding: 0;border: 0;
}body {background: #fff;color: #333;font-size: 12px;margin-top: 5px;font-family: "SimSun", "宋体", "Arial Narrow";
}ul,
ol {list-style-type: none;
}select,
input,
img,
select {vertical-align: middle;
}a {text-decoration: none;
}a:link {color: #009;
}a:visited {color: #800080;
}a:hover,
a:active,
a:focus {color: #c00;text-decoration: underline;
}

CSS初始化（科普）相关推荐

浏览器默认标签样式总结及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初始化样式应该怎么写
每次我在制作网页模板的时候,都会对网页的css进行必要的初始化. 初始化的字面意思就是给变量赋为默认值,CSS样式表的初始化是对浏览器自带样式的重设,(也称为CSS Reset),如果不写,文档就会默 ...
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_腾讯QQ官网，新浪官网，网易官网，淘宝官网之css初始化代码
CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...

CSS初始化（科普）

一、为什么要初始化

二、怎么初始化

CSS初始化（科普）相关推荐

最新文章

热门文章