CSS的background属性的缩写顺序介绍
发布时间:2014-03-28 14:55:25 作者:佚名 我要评论
CSS的background属性的缩写,优点是比单个属性书写要简单,要少写很多代码。为了避免书写顺序上有些困扰,下面有个示例,大家可以参考下
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'> || || || ||] | 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 实现【点击展开阅读全文】功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-13
这篇文章主要介绍了CSS实现两个元素相融效果(粘滞效果),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2020-10-12
这篇文章主要介绍了css为什么要放在head标签中,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-12
这篇文章主要介绍了CSS两种常用的封装示例,帮助大家更好的利用CSS制作网页,感兴趣的朋友可以了解下2020-10-12
这篇文章主要介绍了CSS标签模式display属性,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-12
这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-09
这篇文章主要介绍了css实现鼠标放上去时图片过渡转换动画,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-09
这篇文章给大家介绍了CSS中width和height的默认值auto与%案例,本文通过实例案例给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2020-09-30
这篇文章主要介绍了css一些不常见但很有用的属性操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-28
这篇文章主要介绍了解决搜索框和搜索按钮button边框不能重合的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-28
最新评论