1.参数是万位名词
(1)如果指定的两个值都是方位名词,则两个值前后顺序无关,比如lefttop
和top left
效果一致
(2)如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐 2.参数是精确单位
(1)如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标
(2)如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
background-attachment
属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment
后期可以制作视差滚动的效果。
background-attachment : scroll | fixed 复制代码
为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性background
中。从而节约代码量 当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
background:背景颜色 背景图片地址背景平铺 背景图像滚动背景图片位置: 复制代码
CSS3为我们提供了背景颜色半透明的效果。
background:raba(0,0,0,0.3); 复制代码
最后一个参数是alpha透明度,取值范围在0~1之间,我们习惯把0.3的0省略掉,写为
background:rgba(03); 复制代码
注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响。CSS3新增属性,是IE9+版本浏览器才支持的,但是现在实际开发,我们不太关注兼容性写法了,可以放心使用
背景图片: 实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)
CSS的三大特性
1.1层叠性、继承性
1.1层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层委)另一个冲突的样式。层委性主要解决样式冲突的问题
层叠性原则: 样式冲突,遵循的原则是就近原则 哪个样式离结构近,就执行哪个样式。样式不冲突,不会层叠
<style type="text/css"> div{ color:red; font-size:18px; } 层叠掉 div .color: green; div{ color:green; 后来居上 div{ acolor font-size: 18px; redt } </style> 复制代码
现实中的继承:我们继承了父亲的姓
CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业
<style type="text/css"> div{ p标签的样式 color:red; 继承自父元素的样式 font-size:18px; rined from div 元爱htm1:2 color: td: </style> font-size: 18px; (/head)<body><div> <p>文本颜色</p</div> 复制代码
恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
继承性口诀:龙生龙,凤生凤,老鼠生的孩子会打洞