注册
登录
点评：CSS语法在进行WEB标准网页设计时必不可少的，一般情况下我们可以通过Dreamweaver软件的“CSS样式”面板自动生成相应的CSS代码。不过虽然软件生成的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); |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
