创意猫网>猫宅>设计攻略>网站设计>浅谈优化网站常见的CSS简写规则
多多印

浅谈优化网站常见的CSS简写规则

时间:2015-06-07 17:00:02|浏览:73338|作者:jessica
导语 简写,属性,缩写,语法,边框,字体,省略,盒子,定义,背景,默认 ( CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。)
    CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。

    下面介绍常见的CSS简写规则:

    一、盒子大小

    这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同。盒子有上下左右四个方向,每个方向都有个外边距:

 
    1.margin-top:1px;

    2.margin-right:2px;

    3.margin-bottom:3px;

    4.margin-left:4px;

浅析网页主题设计中“CSS”小技巧


浅谈优化网站常见的CSS简写规则(详情)


    你可以简写成:

    1.margin:1px 2px 3px 4px;

    语法 margin:top right bottom left;

   1. //四个方向的边距相同,等同于margin:1px 1px 1px 1px;

    2.margin:1px;

   3. //上下边距都为1px,左右边距均为2px,等同于margin:1px 2px 1px 2px;

    4.margin:1px 2px;

    5.//右边距和左边距相同,等同于margin:1px 2px 3px 2px;

   6. margin:1px 2px 3px;

   7. //注意,这里虽然上下边距都为1px,但是这里不能缩写。

    8.margin:1px 2px 1px 3px;

    二、边框(border)

    边框的属性如下:

    1.border-width:1px;

    2.border-style:solid;

    3.border-color:#000;

    可以缩写为一句:

    1.border:1px solid #000;

    语法 border:width style color;

服装网页设计的CSS中常用的字体介绍



    三、背景(Backgrounds)

    背景的属性如下:


    1.background-color:#f00;

    2.background-image:url(background.gif);

    3.background-repeat:no-repeat;

    4.background-attachment:fixed;

    5.background-position:00;

    可以缩写为一句:

    1.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)

    字体的属性如下:

   1. font-style:italic;

    2.font-variant:small-caps;

    3.font-weight:bold;font-size:1em;

   4. line-height:140%;

    5.font-family:"Lucida Grande",sans-serif;

    可以缩写为一句:

   1. font:italic small-caps bold 1em/140%"Lucida Grande",sans-serif;

    注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。


15套值得网页设计师参考使用的CSS重设实例



    五、列表(lists)

    取消默认的圆点和序号可以这样写list-style:none;,

    list的属性如下:


    1.list-style-type:square;

   2. list-style-position:inside;

    3.list-style-image:url(image.gif);

    可以缩写为一句:

    1.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

以导航设计为主谈DIV CSS的命名规则



    七、属性值为0

    书写原则是如果CSS属性值为0,那么你不必为其添加单位(如:px/em),你可能会这样写:

 
   1. padding:10px 5px 0px 0px;

    试试这样吧:

    1.padding:10px 5px 00 ;

    八、最后一个分号

    最后一个属性值后面分号可以不写,如:

   1. #nav{

    2.border-top:4px solid #333;

   3. font-style: normal;

    4.font-variant:normal;

    5.font-weight: normal;

    }

    可以简写成:

   1. #nav{

    2.border-top:4px solid #333;

    3.font-style: normal;

   4. font-variant:normal;

    5.font-weight: normal

    6.}

非常不错的CSS3按钮方案设计案例



    九、字体粗细(font-weight)

    你可能会这样写:

    1.h1{

   2. font-weight:bold;

    3.}

    4.p{

    5.font-weight:normal;

    6.}

    可以简写成:

    1.h1{

   2. font-weight:700;

    3.}

    4.p{

   5. font-weight:400;

    6.}

    十、圆角半径(border-radius)

    border-radius是css3中新加入的属性,用来实现圆角边框。

    1.-moz-border-radius-bottomleft:6px;

    2.-moz-border-radius-topleft:6px;

    3.-moz-border-radius-topright:6px;

    4.-webkit-border-bottom-left-radius:6px;

    5.-webkit-border-top-left-radius:6px;

    6.-webkit-border-top-right-radius:6px;

    7.border-bottom-left-radius:6px;

    8.border-top-left-radius:6px;

    9.border-top-right-radius:6px;

    可以简写成:


   1. -moz-border-radius:0 6px 6px;

    2.-webkit-border-radius:0 6px 6px;

    3.border-radius:0 6px 6px;

    语法 border-radius:topleft topright bottomright bottomleft


 返回创意猫首页>>
图帮主
立即提交需求
创意猫网是国内领先的设计服务交易平台
快速提交设计需求,按需快速匹配服务商!
话题讨论  共有0人讨论浅谈优化网站常见的CSS简写规则
返回顶部参与讨论
企业为什么都选择创意猫
领先的广告设计门户
数万设计机构提供选择
平台担保,满意才付款
零佣金,零手续费
创意猫_国内领先的广告设计交易平台    Copyright © 2018  chuangyimao.com  青岛创易智联网络有限公司  版权所有  鲁ICP备14013361号-2    创意猫微博
客服在线:
QQ交谈:

服务热线

4000-556-956

周一至周六8:30—18:00

问题描述  *
联系QQ
验证码
提交
最近联系人