美文网首页
CSS 重置元素样式示例 reset.css

CSS 重置元素样式示例 reset.css

作者: Devops海洋的渔夫 | 来源:发表于2019-02-24 16:30 被阅读66次

仅供学习,转载请注明出处

简介

在写html的过程中,经常需要去取消不少元素的默认样式,例如:ul去除前面的小圆点、body的margin以及padding取消等等。

为了方便,可以专门设置一个样式文件,统一编写好,然后引入即可。

重置元素样式 reset.css

示例代码如下:

/* 将标签默认的间距设为0   */
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,select,form{
    margin:0;padding:0;
}

/* 让h标签继承body内设置的字体大小 */

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


/* 去掉默认的项目图标 */
ul{
    list-style:none;
}


em{
    font-style:normal;
}

a{
    text-decoration:none;
}

/* 去掉IE下,图片做链接时候产生的边框 */
img{
    border:none;
}


/* 清除margin-top塌陷和清除浮动 */
.clearfix:before,.clearfix:after{
    content: "";
    display:table;
}

.clearfix:after{
    clear:both;
}

.clearfix{
    zoom:1;
}


.fl{
    float:left;
}

.fr{
    float:right;
}

还有更多需要统一清除的样式可以继续写入,上方的内容只是提供示例而已。

注意:引入样式文件的顺序应该放在第一位,不然就会被其他样式文件所覆盖。

css引入示例如下:

<link rel="stylesheet" href="./css/reset.css">

2019年全套Java、Android、HTML5前端、Python、大数据视频,价值数万资源大放送

寻找资源的地址如下:

扫描微信公众号

寻找价值数万的视频资源

相关文章

网友评论

      本文标题:CSS 重置元素样式示例 reset.css

      本文链接:https://www.haomeiwen.com/subject/zmkbyqtx.html