今天小编跟大家讲解下有关CSS代码缩写实例以及CSS缩写原因总结 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS代码缩写实例以及CSS缩写原因总结 的相关资料，希望小伙伴们看了有所帮助。
CSS语法在进行WEB标准网页设计时必不可少的 一般情况下我们可以通过Dreamweaver软件的“CSS样式”面板自动生成相应的CSS代码。不过虽然软件生成的CSS代码阅读清晰易懂 但就是由于CSS对条条样式定义的清晰解释 也就使得CSS代码阅读显得冗长复杂 同时CSS代码的字节数也在增加……这对于追求高效率和完美性的人来说 是很难容忍的。 相关文章：CSS缩写6个图例总结 CSS缩写优化CSS文件的体积 比如我们在给某元素定义填充大小时 使用到padding 当对上、右、下、左填充有不同要求时 软件生成的代码可能是这样： 以下是引用片段：.t1{ padding-top:3px; padding-right:20px; padding-bottom:3px; padding-left:20px; } 如果简单来写就是 以下是引用片段：.t2{ padding:3px20px3px20px; } padding的四边值依次对应了top(上)、right(右)、bottom(下)、left(左)。当然 本例还可以简写成： 以下是引用片段：.t3{ padding:3px20px3px; } 当left(左)没有时 默认值为right(右)的值 当bottom(下)没有时 默认值为top(上)的值 所以本例中最简单的就是： 以下是引用片段：.t4{ padding:3px20px; } （当然 如果padding就一个值时 就表示上右下左是相同的了。） 以下是引用片段：<styletype="text/css"> <!-- .t1{ padding-top:3px; padding-right:20px; padding-bottom:3px; padding-left:20px; } .t2{ padding:3px20px3px20px; } .t3{ padding:3px20px3px; } .t4{ padding:3px20px; } span{ border:1pxsolid#CCCCCC; } --> </style> <spanclass="t1">cnbruce</span> <spanclass="t2">cnrose</span> <spanclass="t3">cnjames</span> <spanclass="t4">www.cnbruce.com</span> 上例中.t1冗长的4行代码浓缩成一行简介代码——这就是CSS缩写的优势。 当然 很多时候我们在学习别人的CSS经验时 也会看到很多类似的CSS缩写。但如果自己没有了解 根本是看不明白学不会这些CSS方法经验了。所以 我们必须了解和掌握一些常用的CSS缩写语法。使用缩写可以帮助减少你CSS文件的大小 更加容易阅读。css缩写的主要规则如下： 颜色 16进制的色彩值 如果每两位的值相同 可以缩写一半 例如：#000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1； property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 property:value1 value2 value3; 表示top的值是value1 right和left的值是value2 bottom的值是value3 property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 方便的记忆方法是顺时针 上右下左。具体应用在margin和padding的例子如下： margin:1em 0 2em 0.5em; 边框(border) 边框的属性如下： 以下是引用片段：border-width:1px; border-style:solid; border-color:#000; 可以缩写为一句：border:1pxsolid#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:#f00url(background.gif)no-repeatfixed00; 语法是 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:"LucidaGrande",sans-serif; 可以缩写为一句：font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif; 注意 如果你缩写字体定义 至少要定义font-size和font-family两个值。 列表(lists) 取消默认的圆点和序号可以这样写list-style:none;, list的属性如下: 以下是引用片段：list-style-type:square; list-style-position:inside; list-style-image:url(image.gif); 可以缩写为一句：list-style:squareinsideurl(image.gif);来源：爱蒂网
