-常用CSS缩写语法总结及缩写的原因-.docx

《-常用CSS缩写语法总结及缩写的原因-.docx》由会员分享，可在线阅读，更多相关《-常用CSS缩写语法总结及缩写的原因-.docx（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、常用CSS缩写语法总结及缩写的原因8)NewaspContentLabel.style.fontSize=(-newasp_fontsize)+pt;NewaspContentLabel.style.lineHeight=(-newasp_lineheight)+pt;  CSS语法在进行WEB标准网页设计时必不可少的，一般情况下我们能够通过Dreamweaver软件的“CSS样式面板自动生成相应的CSS代码。不过固然软件生成的CSS代码阅读明晰易懂，但就是由于CSS对条条样式定义的明晰解释，也就使得CSS代码阅读显得冗长复杂，同时CSS代码的字节数也在增加这对于追求高效率

2、和完美性的人来讲，是很难容忍的。 比方我们在给某元素定义填充大小时，使用到padding，当对上、右、下、左填充有不同要求时，软件生成的代码可能是这样：下面是引用片段：.t1 padding-top:3px; padding-right:20px; padding-bottom:3px; padding-left:20px; 假如简单来写就是下面是引用片段：.t2 padding:3px20px3px20px; padding的四边值依次对应了top(上)、right(右)、bottom(下)、left(左)。当然

3、，本例还能够简写成：下面是引用片段：.t3 padding:3px20px3px; 当left(左)没有时，默认值为right(右)的值，当bottom(下)没有时，默认值为top(上)的值，所以本例中最简单的就是：下面是引用片段：.t4 padding:3px20px; 当然，假如padding就一个值时，就表示上右下左是一样的了。下面是引用片段：styletype=text/css!-.t1 padding-top:3px; padding-right:20px; padding-bottom:3px; pad

4、ding-left:20px;.t2 padding:3px20px3px20px;.t3 padding:3px20px3px;.t4 padding:3px20px;span border:1pxsolid#CCCCCC;-/stylespancnbruce/span spancnrose/span spancnjames/span spancnbruce/span 上例中.t1冗长的4行代码浓缩成一行简介代码这就是CSS缩写的优势。当然，很多时候我们在学习别人的CSS经历时，也会看到很多类似的CSS缩写。但假

5、如本人没有了解，根本是看不明白学不会这些CSS方法经历了。所以，我们必须了解和把握一些常用的CSS缩写语法。使用缩写能够帮助减少你CSS文件的大小，愈加容易阅读。css缩写的主要规则如下：颜色16进制的色彩值，假如每两位的值一样，能够缩写一半，例如：#000000能够缩写为#000;#336699能够缩写为#369;盒尺寸通常有下面四种书写方法:property:value1;表示所有边都是一个值value1；property:value1value2;表示top和bottom的值是value1,right和left的值是value2property:value1value2value3;表示

6、top的值是value1，right和left的值是value2，bottom的值是value3property:value1value2value3value4;四个值依次表示top,right,bottom,left方便的记忆方法是顺时针，上右下左。详细应用在margin和padding的例子如下：margin:1em02em0.5em;边框(border)边框的属性如下：下面是引用片段：border-width:1px; border-style:solid; border-color:#000; 能够缩写为一句：border:1pxsolid#000;&n

7、bsp;语法是 border:widthstylecolor;背景(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; 

8、语法是 background:colorimagerepeatattachmentposition;你能够省略其中一个或多个属性值，假如省略，该属性值将用阅读器默认值，默认值为：下面是引用片段：color:transparent image:none repeat:repeat attachment:scroll position:0%0% 字体(fonts)字体的属性如下：下面是引用片段：font-style:italic; font-variant:small-caps; font-weight:bold;&n

9、bsp;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);