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">  </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);

　　推荐阅读

　　五条非常重要的CSS技巧

　　今天向大家介绍另外五条非常重要的CSS技巧，可能有重复，大家多多理解这些知识一定有收益。一、图像替换文本 #header h1 a{display:block;text-indent:-9999em;background:(images/logo.png) no-repeat>>>详细阅读

本文标题：CSS代码缩写实例以及CSS缩写原因总结

地址：http://www.17bianji.com/kaifa2/CSS/17115.html

1/2 1