css reset 重置样式介绍

当前位置 : 首页 > 网页制作 > CSS > css reset 重置样式介绍

css reset 重置样式介绍

来源: 作者: 时间:2015-11-18 11:58
reset.css本意就是重置样式,我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css
reset.css本意就是重置样式,我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css
这个css reset代码是我自己在参考前人的基础上,并根据个人在多个实际项目中实战得出来的,在尊重标签本身用途的同时,又给予一些基本的实际需求。本reset只涉及常见的基本元素,以修正兼容为原则

复制代码
代码如下:

/* -------------------------------------------------
* reset css
* -------------------------------------------------
*/
html{
height:100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
margin:0;
padding:0;
font:12px/1.5 Helvetica, Arial, sans-serif;
background-color:#fff;
height:100%;
text-align:center;
color:#404040;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,fieldset{
margin:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
input, select, label {
vertical-align:middle;
}
img{
border: none;
}
a {
text-decoration:none;
}
p{
margin:0 0 9px 0;
}
/* hn */
h1,h2{
line-height:36px;
}
h3{
line-height:27px;
}
h4,h5,h6{
line-height:18px;
}
h1{
font-size:24px;
}
h2{
font-size:20px;
}
h3{
font-size:16px;
}
h4{
font-size:14px;
}
h5,h6{
font-size:12px;
}
/* ul ol dl */
ul,ol{
margin: 0 0 18px 0;
padding:0;
}
ul li,ol li{
margin-left:25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
ul.nostyle{
list-style: none outside none;
}
ul.nostyle li{
margin-left: 0;
}
ul.inline-style{
list-style: none outside none;
}
ul.inline-style li{
float:left;
display:inline;
margin-left:0;
}
dl{
margin-bottom: 18px;
}
dt{
font-weight: bold;
}
dd{
margin:0 0 0 9px;
padding:0;
}
/* html5 */
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
Tag:
网友评论

<