CSS背景及选择器的优先级

1.背景

1) background-color 背景颜色,可以使用的背景颜色方式有英文单词,如red,blue等;其次十六进制数,如#eee,#7c7c7c等;RGB颜色.

background-color:red;

background-color:#ccc;

background-color:rgb(0,0,0);  //数值在0-255之间,可随便变换

background-color:rgba(0,0,0,0.5);  //最后一个为0-1之间的数,表示透明度

2) background-image: 背景图片 语法如下:

background-image:url() ;

3) background-repeat:背景图片是否平铺,属性值有 repeat-x  水平平铺 ,  repeat-y 垂直平铺  no-repeat 不平铺

4) background-position 位置 ,属性值有水平方向: left center right  垂直方向 : top center bottom ,也可以是数值 x y

background-position:left center;

background-position:0 0;

5) background-attachement:scroll;  scroll是默认值,表示背景跟随着网页的浏览滚动, fixed 表示 固定的, 背景在浏览时不滚动,

PS:背景的简写方式不加限制,上述的五个方面的属性可以用任意顺序和个数书写,语法如下:

background: red 0 0 scroll;

额外属性:

背景缩放: background-size: 有两个属性值,只改变一个值的话,就按比例的缩放,可以使用百分比, 如:

background-size:90px 120px;或  background-size:80px(50%); 

特殊属性值:cover 背景铺满整个盒子,满足高度和宽度后,溢出的部分被隐藏(可能会有部分超出) 

                contain 自动调整缩放的比例,保证图片整个在盒子里面,宽度和高度有一个到达盒子边界,图片不再缩放

加多张图片: background:url() .........  ,  url(  ) ........  ,    ;有多个的话用逗号分开,如果有交集,上面的会覆盖下面的,所以如果需要背景色,则放在最后一个添加.

2.CSS选择器的优先级

CSS选择器通过四个字符串来表示选择器的权重高低,如下:

标签选择器:0,0,0,1

类选择器:0,0,1,0

ID选择器:0,1,0,0

行内样式:1,0,0,0

!important的贡献值为无穷大

CSS进行样式判定时,对同一标签进行样式改变,哪个权重大用哪个,权重可以累加, 如  div p  的权重为0,0,0,2

PS:1) 没有进位的说法,不会有加起来进位,级别之间不可超越 0,0,0,100  ＜　0,0,1,0

      2) 继承的权重为0,0,0,0

      3) 通用选择器的权重最低

      4) 有!important权重最大