当前位置: > 学习教程 > 网页教程 >

网页设计 CSS的缩写方法的介绍

文章作者:无锡中智 时间:2014-10-12 11:05点击:
分享到: 更多
  无锡中智培训学校老师介绍,CSS中只有一些特定的属性可以进行缩写,这样可以缩少CSS文档所占字节数,并且更容易阅读。但不是每一个属性都可以缩写。
  第一种,盒装模型中的padding、margin。
  这两种的定义方法相同,只要按照上右下左的顺序输入尺寸就可以了。例子:
  padding:5px; 表示四个方向的值都是5像素。 margin:5px auto; 表示上下的外边距是5像素,左右外边距自动适应。 padding:5px 0 3px; 表示上下两处内空白的值为5像素和3像素,左右两侧的内空白值为0。 margin:0 0 10px 5px; 表示上、右的外边距值为0,下侧的外边距值为10像素,左侧的外边距值为5像素。
  第二种:颜色。
  如果颜色使用的是16进制的色彩值,如果前后两位的值相同,可将值缩写一半。
  比如:颜色值为#FF000可缩写为#F00,颜色值为#333333可缩写为#333。
  第三种:背景。
  背景属性也可以缩写,它的缩写顺序是:
  background:background-color background-image background-repeat background-attachment background-position;
  它依次定义的背景颜色、背景图片、是否重复、附着属性、背景位置定位。示例:
  background:#F00 url(images/bg.gif) no-repeat scroll left top;
  第四种:字体。
  字体属性和背景属性一样,也是由各个定义方法综合起来的缩写定义,书写顺序分别是:
  font:font-style font-variant font-weight font-size font-family;
  它依次定义的是字体风格样式、字体变量属性、字体浓淡、字体大小、字体名称。示例:
  font:italic normal bold 18px arial;
  第五种,边框。
  边框的缩写比起以上的四种方法都要复杂,因为它的变化比较多。
  众所周知,边框包括三个属性,它们是边框粗细border-width,边框样式border-style,边框颜色border-color。
  描写一个元素的边框,可以用一个语句完成:
  border:1px solid #000;
  它表示的是元素的上右下左四个方向的边框都是一像素黑色实线,但如果四个边不一样,就要分开定义,比如上边框是2像素的红色虚线,那么就应该写成:
  border-top:2px dashed #F00; border-right:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000;
  但这不是唯一的写法,还有其它方法也可以达到同样的效果:
  border-width:2px 1px 1px 1px; border-color:#F00 #000 #000 #000; border-style:dashed solid solid solid;
  或者还可以写按照CSS的解析顺序写成:
  border:1px solid #000;
  border-top:2px dashed #F00;
  总之,这几种方法都是殊途同归,只要达成效果就是正确的方法。
  推荐:网页设计 CSS3的Transition属性介绍
         网页设计 meta中的keyword属性介绍