css复合属性写法

  • 内容
  • 评论
  • 相关

看书看了半天没看懂,字体复合属性被描述的太简单了。

描述:符合属性可以取值字体族科、字体大小、字体风格、字体加粗等,各值之间空格相连。

总感觉介绍的有点不靠谱,问了半天谷歌大神,终于悟出了写法。


单个属性的写法:

.font{

    font-weight: bold;

    font-size: 20px;

    font-family: "仿宋";

}

复合属性对各个属性的书写顺序是有要求的

font : font-style font-variant font-weight font-size line-height font-family;

默认值:

font: normal normal normal medium normal "Times New Roman" ;

所以上面的写法可以写成这个样子:

.font{
font: bold 20px "仿宋";
}

翻了许久,发现似乎很少有这么写的,因为对书写的要求比较苛刻。

  1. font属性内必须有 font-size 和 font-family 这2项值。如果少了一项,即便将其他字体属性都写上也没用。
    如果是这样 font: bold 20px;  或者 font: bold Verdana; 在绝大部分的浏览器里都会表现异常。

  2. 书写顺序必须严格按照上面提到的顺序。
    如果写成 font: 20px bold Verdana; 或者 font: Verdana 20px bold,浏览器就不会正确解释。

  3. 这里的20px是表示字体大小,并非行高。
    如果要将这两项同时表现,必须这样写:font: bold 20px/2.0em Verdana; ,20px表示字体大小,2.0em(就是20*2.0px)表示行高。


再来说说背景

单个属性的写法

.bg {
background-color: #CCCCCC;   /*背景颜色*/
background-image: url(sample.gif);   /*背景图片*/
background-repeat: no-repeat;   /*平铺(?)*/
background-attachment: fixed;   /*随文本滚动(?),很少用到*/
background-position: center center;   /*背景图片位置*/
}

复合属性的写法
书写格式

background : background-color background-image background-repeat background-attachment background-position;

默认值

background: transparent none repeat scroll 0% 0%;

默认值(中文意思)
background: 透明 / 无背景图片 / 平铺 / 背景图片随文本滚动(不理解的一定要自己动手试一下) / 位于元素左上角
所以上面的写法可以写成这个样子:

.bg {
background: #CCCCCC url(sample.gif) no-repeat fixed center center;
}


最后要注意的一点:

如果只有一项值,最好不要应用复合属性。以免带来不必要的麻烦。

比如 .test {font-weight: bold} ,如果写成 .test {font: bold} 就没任何作用了。

再举个列子,比如 .test {background-color: #CCCCCC; } ,如果写成 .test {background: #CCCCCC; } ,浏览器虽然能正确解释,但这不是规范的写法。