使用CSS rest样式标签

  1. 每一个HTML标签都有它的默认样式,例如<p>标签有上下边距,body自带外边距等等。这些默认样式在不同的浏览器中可能会不一样,这就导致浏览器默认样式会给我们带来很大的麻烦,从而影响开发效率,所以最好的解决方案就是在一开始就将默认样式都全部去掉或者覆盖。通过重新定义标签的样式确保标签在各个浏览器的表现特征一致是我们样式重置的根本原因。在此我总结了一些经常需要重置的标签的默认样式及重置情况。
  2. 常用标签的默认样式及重置
    标签默认样式重置默认样式

    body

    上下左右四个方向具有外边距

    body{margin:0;}

    p段落标签

    上下具有一行外边距

    p{margin:0;}

    h1~h6标题标签

    上下具有外边距

    h1,h2,h3,h4,h5,h6{margin:0;}

    ul无序列表

    上下具有外边距;

    列表样式默认小圆点;

    左边有内容填充

    ul{

        list-style:none;/*消除小圆点*/

        margin:0;

        padding:0;

    }

    ol有序列表

    上下具有外边距;

    有序列表默认有数字;

    左边有内填充

    ol{

        list-style:none;

        margin:0;

        padding:0;

    }

    dl定义列表

    dl上下有外边距;

    dd左边有内填充

    dl{margin:0}

    dd{padding:0}

    mark

    背景默认是黄色背景;

    字体默认是黑色

    mark{background:none;}

    strong强调标签

    默认字体是加粗

    strong{font-weight:normal}

    em强调标签

    默认字体是倾斜

    em{font-style:normal}

    a超链接标签

    默认有下划线

    a{

        text-decoration:none;

        color:#000;

    }

    img

    容器有边框时,图片底层默认有1px的空隙

    img{/*容器有边框时的样式重置*/

         vertical-align:top;

         border:none;

    /*非标准的IE中,图片超链接中的图片默认会显示边框*/

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值