css font属性和background属性的值简写方式

经常使用到CSS, 其中的 font 和 background 属性可以有多个更详细的关联样式属性,但也可以用这两个进行简写, 很多时候我都忘了他们的简写的格式,所以网上找了一些,写下来,方便日后直接参考...

1,字体属性主要包括下面几个
font-family,font-style,font-variant,font-weight,font-size,font

font-family(字体族): “Arial”、“Times New Roman”、“宋体”、“黑体”等;
font-style(字体样式): normal(正常)、italic(斜体)或oblique(倾斜);
font-variant (字体变化): normal(正常)或small-caps(小体大写字母);
font-weight (字体浓淡): 是normal(正常)或bold(加粗)。有些浏览器甚至支持采用100到900之间的数字(以百为单位);
font-size(字体大小): 可通过多种不同单位(比如像素或百分比等)来设置, 如:12xp,12pt,120%,1em

如果用 font 属性的话,就可以把几个样式进行简化,减少书的情况;font 属性的值应按以下次序书写(各个属性之间用空格隔开):

font-style | font-variant | font-weight | font-size | font-family


例如: 

上面的样式简写为:font:font-style   font-variant   font-weight  font-size  font-family

.fontStyle01{font:italic normal bold 12px arial,verdana;}

2,背景

 background-color:#999999; //元素的背景色
 background-image : url("path/bgFile.gif"); //设置背景图像
 background-repeat : repeat-x | repeat-y | repeat | no-repeat; //设置重复方式
 background-attachment : fixed | scroll; //设置背景图片的固定方式
 background-position : X轴坐标,Y轴坐标[top,bottom,center,left,right,20px,10%];  //设置背景的左上角位置,坐标可以是以百分比或固定单位

background  可以用这个属性把前面几个综合起来进行简写,

background 各个值的次序依次如下:

background-color | background-image  | background-repeat | background-attachment | background-position


如果省略某个属性不写出来,那么将自动为它取缺省值。比如,如果去掉background-attachment和background-position的话:
background: #FFCC66 url("butterfly.gif") no-repeat;

例如:

.bg01{
   background-color: #FFCC66;
   background-image: url("path/bgFile.gif");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: left top;
}

上面可以简写为:

/*background:color url() repeat attachment position;*/
.bg01{background:#FFCC66  url("path/bgFile.gif")  no-repeat  fixed  left  top; }

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值