css初始化表

时间：2020-05-18 10:45:07 阅读：58 评论：0 收藏：0 [点我收藏+]

标签：:hover rap list cti 如何新浪 sam 就是 style

为什么要初始化CSS？

　　建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。最简单的初始化方法就是： * {padding: 0; margin: 0;} 。有很多人也是这样写的。这确实很简单，但有人就会感到疑问：*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。写过css的都知道每个网页引进的css首先都需要初始化，而出名的css reset有YUI css reset（QQ、淘宝等都出现他的影子），业内用的最多的还有Erik Meyer’s CSS Reset。CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。

雅虎工程师提供的CSS初始化示例代码

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}

body {
background: #fff;
color: #555;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

td, th, caption {
font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}

address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}

a {
color: #555;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

img {
border: none;
}

ol, ul, li {
list-style: none;
}

input, textarea, select, button {
font: 14px Verdana, Helvetica, Arial, sans-serif;
}

table {
border-collapse: collapse;
}

html {
overflow-y: scroll;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
*zoom: 1;
}

腾讯官网样式初始化

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

淘宝官网样式初始化

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.5 tahoma, 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;
}

网易官网样式初始化

html {
    overflow-y: scroll;
}

body {
    margin: 0;
    padding: 29 px00;
    font: 12px "\5B8B\4F53", sans-serif;
    background: #ffffff;
}

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p {
    padding: 0;
    margin: 0;
}

table, td, tr, th {
    font-size: 12px;
}

li {
    list-style-type: none;
}

img {
    vertical-align: top;
    border: 0;
}

ol, ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 12px;
    font-weight: normal;
}

address, cite, code, em, th {
    font-weight: normal;
    font-style: normal;
}

css初始化表

标签：:hover rap list cti 如何新浪 sam 就是 style

原文地址：https://www.cnblogs.com/ssjd/p/12909144.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

css初始化表

为什么要初始化CSS？

雅虎工程师提供的CSS初始化示例代码

腾讯官网 样式初始化

新浪官网 样式初始化

淘宝官网 样式初始化

网易官网 样式初始化

腾讯官网样式初始化

新浪官网样式初始化

淘宝官网样式初始化

网易官网样式初始化