样式重置 css reset

renjianwolai 2017-11-20

新浪的初始化:

样式重置 css reset
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 }
样式重置 css reset

京东的初始化:

样式重置 css reset
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 }
样式重置 css reset

大众版初始化:

样式重置 css reset
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
}  
样式重置 css reset

看到这些是不是感觉自己平时也是这么写的?其实我之前也是这么写的,后来看到张鑫旭大神的文章后才知道有一种更好的写法,更简单、更高效。自己也已经亲测过了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标签的默认样式和浏览器默认样式,整理了一下有兴趣的可以看一下~

/*html标签默认样式*/
html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }
/*以上列表元素默认状态下以块状显示,未显示的将以内联元素显示,该列表针对HTML4版本,部分元素在HTML5中已废弃*/ 
li { display: list-item }/*默认以列表显示*/ 
head { display: none }/*默认不显示*/ 
table { display: table }/*默认为表格显示*/ 
tr { display: table-row }/*默认为表格行显示*/ 
thead { display: table-header-group }/*默认为表格头部分组显示*/ 
tbody { display: table-row-group }/*默认为表格行分组显示*/ 
tfoot { display: table-footer-group }/*默认为表格底部分组显示*/ 
col { display: table-column }/*默认为表格列显示*/ 
colgroup { display: table-column-group }/*默认为表格列分组显示*/ 
td, th { display: table-cell; }/*默认为单元格显示*/ 
caption { display: table-caption }/*默认为表格标题显示*/ 
th { font-weight: bolder; text-align: center }/*默认为表格标题显示,呈现加粗居中状态*/ 
caption { text-align: center }/*默认为表格标题显示,呈现居中状态*/ 
body { margin: 8px; line-height: 1.12 } 
h1 { font-size: 2em; margin: .67em 0 } 
h2 { font-size: 1.5em; margin: .75em 0 } 
h3 { font-size: 1.17em; margin: .83em 0 } 
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } 
h5 { font-size: .83em; margin: 1.5em 0 } 
h6 { font-size: .75em; margin: 1.67em 0 } 
h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder } 
blockquote { margin-left: 40px; margin-right: 40px } 
i, cite, em,var, address { font-style: italic } 
pre, tt, code, kbd, samp { font-family: monospace } 
pre { white-space: pre } 
button, textarea, input, object, select { display:inline-block; } 
big { font-size: 1.17em } 
small, sub, sup { font-size: .83em } 
sub { vertical-align: sub }/*定义sub元素默认为下标显示*/ 
sup { vertical-align: super }/*定义sub元素默认为上标显示*/ 
table { border-spacing: 2px; } 
thead, tbody, tfoot { vertical-align: middle }/*定义表头、主体表、表脚元素默认为垂直对齐*/ 
td, th { vertical-align: inherit }/*定义单元格、列标题默认为垂直对齐默认为继承*/ 
s, strike, del { text-decoration: line-through }/*定义这些元素默认为删除线显示*/ 
hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/ 
ol, ul, dir, menu, dd { margin-left: 40px } 
ol { list-style-type: decimal } 
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } 
u, ins { text-decoration: underline } 
br:before { content: ""A" }/*定义换行元素的伪对象内容样式*/ 
:before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/ 
center { text-align: center } 
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em } 
:link, :visited { text-decoration: underline } 
:focus { outline: thin dotted invert } 
/* Begin bidirectionality settings (do not change) */ 
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override}
/*定义BDO元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/ 
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override}
/*定义BDO元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/ 
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed}
/*定义任何元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/ 
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed}
/*定义任何元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/ 
@media print { /*定义标题和列表默认的打印样式*/ 
h1 { page-break-before: always } 
h1, h2, h3, h4, h5, h6 { page-break-after: avoid } 
ul, ol, dl { page-break-before: avoid } 
} 



/*浏览器默认样式*/

//1、页边距
//IE默认为10px,通过body的margin属性设置
//FF默认为8px,通过body的padding属性设置
//要清除页边距一定要清除这两个属性值

 body {
margin:0;
padding:0;
}

//2、段间距
//IE默认为19px,通过p的margin-top属性设置
//FF默认为1.12em,通过p的margin-bottom属性设
//p默认为块状显示,要清除段间距,一般可以设置

 p {
margin-top:0;
margin-bottom:0;
 }

//3、标题样式
//h1~h6默认加粗显示:font-weight:bold;。
//默认大小请参上表
//还有是这样的写的

 h1 {font-size:xx-large;}
 h2 {font-size:x-large;}
 h3 {font-size:large;}
 h4 {font-size:medium;}
 h5 {font-size:small;}
 h6 {font-size:x-small;}

/*个大浏览器默认字体大小为16px,即等于medium,h1~h6元素默认以块状显示字体显示为粗体,要清除标题样式,一般可以设置*/

hx {
font-weight:normal;
font-size:value;
 }

//4、列表样式
//IE默认为40px,通过ul、ol的margin属性设置
//FF默认为40px,通过ul、ol的padding属性设置
//dl无缩进,但起内部的说明元素dd默认缩进40px,而名称元素dt没有缩进。
//要清除列表样式,一般可以设置

ul, ol, dd {
list-style-type:none;
margin-left:0;
padding-left:0;
}

// 元素居中
// IE默认为text-align:center;
// FF默认为margin-left:auto;margin-right:auto;

//5、超链接样式a 样式默认带有下划线,显示颜色为蓝色,被访问过的超链接变紫色,要清除链接样式,一般可以设置

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

//6、鼠标样式
//IE默认为cursor:hand;
//FF默认为cursor:pointer;该声明在IE中也有效

//7、图片链接样式
//IE默认为紫色2px的边框线
//FF默认为蓝色2px的边框线
//要清除图片链接样式,一般可以设置

img {
border:0;
}

总结一下,我们写代码的时候可以参考别人的代码,找到自己需要的,不用全部都copy过来,即浪费代码又浪费性能。好了就到这里吧,如果文中有错误的地方还望指正,我们共同进步吧。

原文链接:https://www.cnblogs.com/HtmlCss3/p/6061623.html

相关推荐

aSuncat / 0评论 2020-08-18