zoukankan      html  css  js  c++  java
  • 样式缩写——css技巧(一)

    一、margin和padding缩写

    例:

    .sample-margin1{
    
    margin-top:15px;
    
    margin-right:20px;
    
    margin-bottom:12px;
    
    margin-left:24px; 
    
    }

    缩写后:

    .sample-margin1{
    
    margin:15px 20px 12px 24px; 
    
    }

    padding与margin缩写形式一样

    缩写规则:按顺时针方向来写(按上、右、下、左的顺序),属性之间由空白隔开。如果相关属性相同,可以按以下的写法:

    .sample-margin2{
    
    margin:上 右 下 左;
    
    margin:上 左右 下;
    
    margin:上下 左右;
    
    margin:全部(等于上右下左);
    
    //padding同理
    
    }

     

    二、border缩写:

    例:

    .sample-border1{
    
    border-top-width:1px;
    
    border-top-style:solid;
    
    border-top-color:#cccccc;
    
    }
    
    .sample-border2{
    
    border-top:1px solid #cccccc;
    
    border-left:1px solid #cccccc;
    
    border-right:1px soli #cccccc;
    
    border-bottom:1px solid #cccccc;
    
    }

    缩写后:

    .sample-border1{
    
    border-top:1px solid #ccc;
    
    }
    
    .sample-border2{
    
    border:1px solid #ccc;
    
    }

    如果是3条边有颜色,为了简化代码你可以这样写:

    .sample-border3{
    
    border:1px solid #ccc;
    
    border-top:none;
    
    //左、右、下边框有颜色,上边框为空
    
    }

    缩写规则:如果四条边的颜色和宽度相同可以简写成以上形式,16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#0044DD可以缩写为#04D;其他颜色值同理。字体宽度normal用400代替,bold用700代替。

    三、background缩写

    例:

    .sample-background{
    
    background-color:#ccc;
    
    background-image:url(sample.gif);
    
    background-repeat:repeat-x;
    
    background-attachment:scroll;
    
    //scroll是背景图像随对象内容滚动为默认值,可以不写
    
    background-position:top right;
    
    }

    缩写后:

    .sample-background{
    
    background:#ccc url(sample.gif) repeat-x top right;
    
    //属性依次为:颜色-背景图-X轴平铺-背景图像位置(背景图片路径不需要加引号)
    
    }

    四、font缩写:

    例:

    .sample-font{
    
    font-style:italic //设置或检索对象中的字体样式
    
    font-variant:normal //设置或检索对象中的文本是否为小型的大写字母
    
    //前2项如果没有特殊设置,可以不写,用默认值即可
    
    font-weight:bold;
    
    font-size:12px;
    
    line-height:20px;
    
    font-family:"宋体";
    
    }

    缩写后:

    .sample-font{
    
    font:bold 12px/20px "宋体";
    
    //属性依次为:字体的粗细 - 字体大小/行高 - 文本的字体
    
    }

    五、list-style缩写:

    例:

    .sample-list{
    
    list-style-image:url(sample.gif);
    
    list-style-position:outside;
    
    list-style-type:circle;
    
    }

    缩写后:

    .sample-list{
    
    list-style:circle inside url(sample.gif);
    
    }

    属性依次为:预设标记 - 标记位置 - 标记图片(标记图片路径不需要加引号),预设标记和标记图片可二选一,如果二者都定义,则标记图片覆盖预设标记,不过在项目中基本没有都不用,都是用背景图片进行定义

    六 其他缩写:

    1、样式明确定义单位,除非值为0

    .sample-uint{
    
    width:100px;
    
    height:50px;
    
    font-size:9pt;
    
    //值为0可不填单位
    
    margin:0;
    
    padding:0;
    
    }

    2、可以给标签定义通用属性,减少重复定义

    p{...}
    
    h1{...}
    
    img{...}

    3、给所有能重复使用的元素定义类

    .red{...}
    
    .nav{...}
    
    .tfoot{...}

    4、为网站缩写初始化样式,避开浏览器的不兼容问题,使用组选择器减少重复定义

    body, dl, dt, dd, ul, ol, li,
    
    div, pre, code, p, blockquote,
    
    form, fieldset, legend, input,
    
    button, textarea, label{
    
    margin:0;padding:0;
    
    }
    
    body{
    
    font:12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
    
    }
    
    html{
    
    color:#404040;
    
    background:#fff;
    
    overflow-y:scroll;
    
    }

    5、取消class和id前的元素限定

    .sample-cancel-limit{
    
    div#content {...}
    
    fieldset.details {...}
    
    //改为
    
    #content {...}
    
    .details {...}
    
    }

    在给一个元素定义class或者id,你可以省略前面的元素限定,因为id在一个页面里是唯一的,页class可以在页面中多次使用,你限定某个元素意义不大,还会增加文件的尺寸。

    如果你只是想把相关模块的样式放在一起,也为了看起来清晰,也可以这么做,自己把握,不建议这样写。

    6、不需要重复定义可继承的值

    CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。具体哪些属性可以继承,哪些不能继承可以百度一下。

    7、多重class定义

    .one{...}
    
    .two{....}
    
    ...

    如果样式表中有相关的样式,可以给标签另写样式,实现定义多个class来减少代码冗余和重用效率,多个样式间用空隔隔开。

    8、使用子选择器

    .son{...}
    
    .son li{...}
    
    .son li a{...}

    合理的使用子选择器可以帮助你节约大量的class和id定义,更有效的控制页面元素。

    9、删除空格和注释

    在发布网站的时候,你可以删除CSS文件里的空格和注释并压缩CSS文件,这样可以减小文件的大小

    10、其他

    网站也有很多相关的缩写文章,高手们都会有总结自己的缩写技巧,具体缩写规则可以根据实际项目里的情况而定。规则是人的,规则也是灵活的。

  • 相关阅读:
    第五课 主引导程序的扩展 下
    C.Candy
    B.大钉骑马走江湖
    A喝酒(北京林业大学校赛)
    HDU 5666 Segment
    南京理工大学第八届校赛题目题解(部分)
    TCO 2016 Round 1B
    139. Word Break
    90. Subsets II
    78. Subsets
  • 原文地址:https://www.cnblogs.com/Hcjer/p/3996391.html
Copyright © 2011-2022 走看看