CSS基础知识（三）CSS背景、CSS三大特性

1、CSS背景

1.1、背景颜色

格式：background-color：颜色值；
一般情况下，元素背景颜色默认值是transparent（透明）

1.2、背景图片

格式：background-image: none|url；
none：无背景（默认的）
url：使用相对或绝对地址指定背景图片（必须要写）
实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

1.3、背景平铺

格式：background-repeat：repeat | no-repeat | repeat-x | repeat-y；
默认情况下是平铺的
repeat：平铺
no-repeat：不平铺
repeat-x：只对x轴进行平铺
repeat-y：只对y轴进行平铺
既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色

1.4、背景图片位置

格式：background-position:x y；
表示x坐标和y坐标，可以使用方位名词或者精确单位
方位名词：top center bottom left right
精确单位：百分数，由浮点数字和单位标识符组成的长度值

1.4.1、方位名词和精确单位

1、参数名词是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，效果一致，如果只指定一个方位名词，另一个值省略，则第二个值默认居中对齐
比如 background-position: center top；
2、参数值是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标，如果只指定一个值，则该值一定是x坐标，另一个默认垂直居中
比如 background-position: 20px 50px;
3、参数是混合单位
是方位名词和精确坐标的混合
第一个值一定是x坐标

1.5、图像背景固定（背景附着）

格式：background-attachment：fixed|scroll；
scroll：滚动（默认）背景图像随着对象内容滚动
fixed：固定背景图像
后期可以制作视差滚动的效果

1.6、背景色半透明

格式：background: rgba(0,0,0,.3);
最后一个参数是alpha（透明度），取值在0-1之间，习惯把0.3的0省略掉
改变的是背景颜色半透明，盒子里面的内容不受影响
是CSS3新增属性，是IE9+版本浏览器才支持的，但是在实际开发中，不太关注兼容性写法，可以放心使用

1.7、背景属性的复合写法

将属性合并简写在background中
没有特定的书写顺序，一般习惯约定的顺序为：
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
background: transparent url(image.jpg) repeat-y fixed top;
各个属性用空格隔开，在实际开发中推荐使用

2、CSS的三大特性

层叠性、继承性、优先级

2.1、层叠性

场景：相同选择器给相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题
原则：
1、样式冲突，就近原则，哪个样式离结构近，就执行哪个样式
2、样式不冲突，不会层叠

2.2、继承性

场景：子标签继承父标签的某些样式，主要是文字类的继承，比如text-/font-/line-以及color属性
作用：简化代码，降低CSS样式复杂性

特殊：行高的继承
格式：font:12px/1.5 “Micorsoft Yahei”;}
1.5是行高，表示子元素（当前）文字大小的1.5倍，行高可以跟单位也可不跟
如果没有指定子元素文字大小，则会继承父类元素文字行高的1.5倍
body行高的1.5倍，优势在于里面的子元素可以根据body文字的大小自动调整行高

2.3、优先级

场景：同一个元素指定多个选择器时会产生优先级
原则：
选择器相同，执行层叠性
选择器不同，根据权重执行

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=“”	1，0，0，0
！important	无穷大

权重依次变大
style的使用：<div style="color: purple">
！important的使用：color: pink;!important;

优先级注意点
1、权重由4组数字组成，会叠加但是没有进位
2、等级判断从左到右，依次比较
3、对子元素，继承的权重是0，不管父元素的权重
4、a链接浏览器默认指定样式，为蓝色有下划线，所以不执行父元素的继承，需要单独指定

2.3.1、权重的叠加

场景：复合选择器会有权重叠加的问题
举例：

<style>
       ul li {             
              color: green;
              }
           li {             
              color: pink;
              }
           .nav li{           
                   color：pink;
                   }
</style>

ul中li的权重是0，0，0，1+0，0，0，1=0，0，0，2
li中的权重是0，0，0，1
.nav中li权重是0，0，1，0+0，0，0，1=0，0，1，1
所以.nav中的li权重最大，执行 color: pink 的命令