css reset 重置样式介绍

  发布时间:2012-04-01 00:49:50   作者:佚名   我要评论
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;
}

相关文章

  • css reset样式重置介绍 重置css样式工具分享

    每个浏览器都有一套CSS样式表用于保证网页正常显示,为了精准写出WEB页面 通常一开始就重新定义标签样式,介绍两个比较不错的Reset.css 分别来自雅虎YUI和Eric Meyer
    2014-01-26
  • 全局CSS的设置(基础样式重置)

    全局CSS想必大家并不陌生吧,主要就是一些基础全局的样式设置,提高书写效率,本文整理了一些方便大家使用,感兴趣的朋友可以了解下
    2013-09-12
  • CSS样式重置和清除(让不同浏览器显示效果一致)

    CSS样式清除和重置是前端开发必需要做的事情,结合了前辈们的经验整理了一份CSS重置样式代码不敢独享特此与大家分享下,感兴趣的朋友可不要错过了哈
    2013-05-20
  • CSS重置(CSS Reset) 让网页样式在各浏览器中表现一致

    CSS Reset是指重设浏览器的样式,在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小;有了CSS Reset,让网页的样式在各浏览器中表现
    2012-12-21
  • 让样式表CSS代码更加专业规范

    网页制作Webjx文章简介:Eric Meyer Reset和YUI Reset都是非常强大的,但是对于我而言,它们走的太远了。我觉得你最终需要重置一切,然后重新定义所有元素的属性。这就是为
    2009-04-02
  • 编写适合所有项目的通用的reset.css

    网页制作Webjx文章简介:本文就是来介绍如何写一个合适所有项目的通用的reset.css,以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。
    2009-04-02
  • CSS样式重置代码

    这篇文章主要介绍了CSS样式重置代码,一般保存为reset.css修改了默认的css设置,方便布局与提高浏览器兼容性
    2014-06-11

最新评论