• 10个CSS简写/优化技巧


    margin-top:1px;
    margin-right:2px;
    margin-bottom:3px;
    margin-left:4px;
    

      你可以简写成:

    margin:1px 2px 3px 4px;
    

      语法 margin:top right bottom left;

    -----------------

    //四个方向的边距相同,等同于margin:1px 1px 1px 1px;
    margin:1px;
    //上下边距都为1px,左右边距均为2px,等同于margin:1px 2px 1px 2px;
    margin:1px 2px;
    //右边距和左边距相同,等同于margin:1px 2px 3px 2px;
    margin:1px 2px 3px;
    //注意,这里虽然上下边距都为1px,但是这里不能缩写。
    margin:1px 2px 1px 3px;
    /*二、边框(border)*/
    边框的属性如下:
    border-1px;
    border-style:solid;
    border-color:#000;
    可以缩写为一句:
    border:1px solid #000;
    语法 border:width style color;
    
    /*三、背景(Backgrounds)
    背景的属性如下:*/
    background-color:#f00;
    background-image:url(background.gif);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:00;
    /*可以缩写为一句:*/
    
    background:#f00 url(background.gif) no-repeat fixed 0 0;
    语法是background:color image repeat attachment position;
    你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:
    
    color: transparent
    
    image: none
    
    repeat: repeat
    
    attachment: scroll
    
    position: 0% 0%
    
    四、字体(fonts)
    字体的属性如下:
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;font-size:1em;
    line-height:140%;
    font-family:"Lucida Grande",sans-serif;
    可以缩写为一句:
    
    font:italic small-caps bold 1em/140%"Lucida Grande",sans-serif;
    注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。
    /*五、列表(lists)*/
    取消默认的圆点和序号可以这样写list-style:none;,
    l/*ist的属性如下:*/
    
    list-style-type:square;
    list-style-position:inside;
    list-style-image:url(image.gif);
    可以缩写为一句:
    
    
    list-style:square inside url(image.gif);
    六、颜色(Color)
    
    16进制的色彩值,如果每两位的值相同,可以缩写一半。例如:
    
    Aqua: #00ffff ——#0ff
    Black: #000000 ——#000
    Blue: #0000ff ——#00f
    Dark Grey: #666666 ——#666
    Fuchsia:#ff00ff ——#f0f
    Light Grey: #cccccc ——#ccc
    Lime: #00ff00 ——#0f0
    Orange: #ff6600 ——#f60
    Red: #ff0000 ——#f00
    White: #ffffff ——#fff
    Yellow: #ffff00 ——#ff0
    
    七、属性值为0
    书写原则是如果CSS属性值为0,那么你不必为其添加单位(如:px/em),你可能会这样写:
    
    padding:10px 5px 0px 0px;
    试试这样吧:
    
    padding:10px 5px 00 ;
    八、最后一个分号
    
    最后一个属性值后面分号可以不写,如:
    #nav{
    border-top:4px solid #333;
    font-style: normal;
    font-variant:normal;
    font-weight: normal;
    }
    可以简写成:
    #nav{
    border-top:4px solid #333;
    font-style: normal;
    font-variant:normal;
    font-weight: normal
    }
    九、字体粗细(font-weight)
    
    你可能会这样写:
    h1{
    font-weight:bold;
    }
    p{
    font-weight:normal;
    }
    可以简写成:
    h1{
    font-weight:700;
    }
    p{
    font-weight:400;
    }
    十、圆角半径(border-radius)
    border-radius是css3中新加入的属性,用来实现圆角边框。
    
    -moz-border-radius-bottomleft:6px;
    -moz-border-radius-topleft:6px;
    -moz-border-radius-topright:6px;
    -webkit-border-bottom-left-radius:6px;
    -webkit-border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    可以简写成:
    -moz-border-radius:6px 6px 0;
    -webkit-border-radius:6px 6px 0;
    border-radius:6px 6px 0;
    语法 border-radius:topleft topright bottomright bottomleft
    

      原文出处:http://ued.lanrentuku.com/wd/css-suoxie.html

  • 相关阅读:
    05 css继承性
    04 选择器权重
    03 css三种引入的方式
    02 css实现举例
    01 css介绍
    05 dl-添加定义列表
    04 ol-热门点击排行榜
    02 h1 p hr br 特殊符号
    01html简介
    函数内置方法
  • 原文地址:https://www.cnblogs.com/ncellit/p/6603354.html
Copyright © 2020-2023  润新知