美文网首页设计师学前端
设计师学习HTML/CSS之路-13

设计师学习HTML/CSS之路-13

作者: HU_Wei | 来源:发表于2018-08-19 14:51 被阅读0次

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start!

    第13章 CSS代码缩写

    13-1 盒子型代码简写

    1.如果top、right、bottom、left的值相同,如下代码:

    margin:10px 10px 10px 10px;
    

    可缩写为:

    margin:10px;
    

    2.如果top和bottom值相同、left和right的值相同,如下代码:

    margin:10px 20px 10px 20px;
    

    可缩写为:

    margin:10px 20px;
    

    3.如果left和right的值相同,如下面代码:

    margin:10px 20px 30px 20px;
    

    可以缩写为:

    margin:10px 20px 30px;
    

    13-2 颜色值缩写

    例1:

    p{color:#000000;}
    

    可以缩写为:

    p{color:#000;}
    

    例2:

    p{color:#336699;}
    

    可以缩写为:

    p{color:#369;}
    

    13-3 字体缩写

    body{
        font-style:italic;
        font-variant:small-caps;
        font-weight:bold;
        font-size:12px;
        line-height:1.5em;
        font-family:"黑体",sans-serif;
    }
    

    以上代码可以缩写为:

    body{
        font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
        }
    

    注意:

    1.使用这一简写方式至少需要指定 font-size 和 font-family 属性,其他属性如果不写,则自动使用默认值。

    2.缩写时,font-size 与line-height 中间要加入"/"。

    相关文章

      网友评论

        本文标题:设计师学习HTML/CSS之路-13

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