首页 > 代码库 > css初始化

css初始化

2024-09-22 22:41:36   219人阅读

新浪的初始化：

 1 html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
 2     margin: 0;
 3     padding: 0
 4 }
 5 fieldset,img {
 6     border: 0
 7 }
 8 img {
 9     display: block
10 }
11 address,caption,cite,code,dfn,th,var {
12     font-style: normal;
13     font-weight: normal
14 }
15 ul,ol {
16     list-style: none
17 }
18 input {
19     padding-top: 0;
20     padding-bottom: 0;
21     font-family: "SimSun","宋体"
22 }
23 input::-moz-focus-inner {
24     border: 0;
25     padding: 0
26 }
27 select,input {
28     vertical-align: middle
29 }
30 select,input,textarea {
31     font-size: 12px;
32     margin: 0
33 }
34 input[type="text"],input[type="password"],textarea {
35     outline-style: none;
36     -webkit-appearance: none
37 }
38 textarea {
39     resize: none
40 }
41 table {
42     border-collapse: collapse
43 }

京东的初始化：

 1 * {
 2     margin: 0;
 3     padding: 0
 4 }
 5 em,i {
 6     font-style: normal
 7 }
 8 li {
 9     list-style: none
10 }
11 img {
12     border: 0;
13     vertical-align: middle
14 }
15 button {
16     cursor: pointer
17 }
18 a {
19     color: #666;
20     text-decoration: none
21 }
22 a:hover {
23     color: #c81623
24 }

大众版初始化：

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
h1,h2,h3,h4,h5,h6,em,i {
    font-weight: 100;
    font-style: normal
}
ul,ol,li {
    list-style-type: none
}
a {
    color: #666;
    text-decoration: none;
    outline: 0
}
a:hover {
    text-decoration: none
}　　

 

　　看到这些是不是感觉自己平时也是这么写的？其实我之前也是这么写的，后来看到张鑫旭大神的文章后才知道有一种更好的写法，更简单、更高效。自己也已经亲测过了div、li、tr、td这种标签默认就没有margin和padding，dt标签的默认的margin和padding就是0，还有dfn, ins, kbd, q, samp, sub, sup, var这些标签平常我们网站上也用不到，所以就没必要重置，像京东这种一个 * 号全部重置，本着宁可错杀三千也不放过一个这么暴力的做法最好避免，不，应该是杜绝这种写法，不过大家在写一个简单的测试页面的时候可以暂时用一下，因为我平时也是这么写的，主要是快速不用写太多标签，注意只是测试暂时可以用一下。。。

　　还有一些h1、h2、h3、h4、h5、h6这些标签也可以酌情处理，一般用到几个就写几个不用全部重置，像h1这个标签按其seo方面来考虑，一个页面最好只有一个，所以没必要开始的时候就重置其样式，等你按设计稿写样式的时候又重置一次，这样就相当于浏览器渲染了2次，完全没有必要，你可能会说这也没几个不会有什么影响，错，既然我们是做重构的就要本着能少则少的理念去做，如今时间就是金钱，即使提高0.1秒的载入时间我们也是有必要去争取的。

　　网上特意搜了一下html标签的默认样式和浏览器默认样式，整理了一下有兴趣的可以看一下~

css初始化


联系
我们