手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS的background属性的缩写顺序介绍
CSS的background属性的缩写顺序介绍
摘要:background属性是background-color,background-image,background-position,bac...

background 属性是background-color,background-image,background-position,background-attachment,background-repeat,这五个属性的缩写,优点是比单个属性书写要简单,要少写很多代码。就是有时令人在书写这五个属性的顺序上有些困扰。下面一段代码取自搜狐:

.bBot{background:url(../images20130624/bg.png) no-repeat -1424px -5px;overflow:hidden;height:1px;clear:both;font-size:0px; overflow:hidden;}

.cBot{background:url(../images20130624/sohubg01.png) 0 -181px repeat-x;width:758px;height:6px;clear:both;font-size:1px;margin:0 auto;}

.bBot 选择器的background属性的顺序是background-image,background-repeat,backgroundf-position。(background-repeat在前,backgroundf-position在后)

.cBot 选择器的background属性的顺序是background-image,background-position,background-repeat。(background-position在前,background-repeat在后)

就是同一个公司的CSS的风格书写都不一样的,觉得有点不应该。

那就让我们看看CSS的background属性的官方定义:

Value: ['background-color'> ||<'background-image'> || <'background-repeat'>|| <'background-attachment'> ||<'background-position'>] | inherit

Initial: see individual properties

Applies to: all elements

Inherited: no

Percentages: allowed on 'background-position'

Media: visual

Computed value: see individual properties

上面表格的内容只是定义的background属性的值包含那些内容,但并没有指定这些值的顺序(不过可以认为这是建议顺序,如果都这样做,代码可读性更好)。

总结:

background属性的值的书写顺序官方并没有强制标准的。

为了可读性,定一个CSS书写规范,规则2.1:background的值的顺序是background-color,background-image,background-repeat,background-attachment,background-position。

【CSS的background属性的缩写顺序介绍】相关文章:

background和background-Color的区别介绍

CSS代码缩写技巧a

利用CSS3实现圆角的outline效果的教程

CSS基础教程: CSS的Background Images 背景图片

CSS background属性(背景属性)详解

CSS中的!important属性用法

CSS样式:background-position的理解

CSS伪类对象before和after的用法实例详解

利用CSS的Clip属性来创造多彩文字

Discuzx系统 CSS 编码规范、CSS属性书写顺序

精品推荐
分类导航