1、为何要缩写样式?
对于浏览者而言,缩写可以减少CSS代码量,进而减少CSS文件体积,有利于访问者更快的打开网页;对于开发者而言,CSS代码量少,阅读简洁明了;对于网站服务器而言,在相同带宽下可以承受更多的访问请求。 2、常用CSS样式表缩写语法总结 ● 颜色(color) 16进制的色彩值,如果每两位的值相同,可以缩写一半 例如:#000000可以缩写为#000; #336699可以缩写为#369; ● 盒尺寸(padding、margin) 顺序:从上开始,顺时针转;margin:上 右 下 左; 上下左右都相等: margin: 5px(上下左右); <==> margin: 5px 5px 5px 5px; 上下相等, 左右相等: margin: 5px(上下) 15px(左右); <==> margin: 5px 15px 5px 15px; 上下不等,左右相等: margin: 5px(上) 10px(左右) 20px(下); <==> margin: 5px 10px 20px 10px ● 边框(border) border-width:1px; border-style:solid; border-color:#000; 缩写为 ==> border:1px solid #000; ● 背景(Backgrounds) background-color: #f00; background-image: url(background.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0; 缩写为 ==> background: #f00 url(background.gif) no-repeat fixed 0 0; 你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为: 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: Arial, 宋体; 缩写为 ==> font: italic small-caps bold 1em/140% Arial, 宋体; font的缩写,如果省略family,如这样子:font: bold 14px/22px; 则在Firefox下是不生效的 完整的写法是:font: bold 14px/22px arial, 宋体; |
|