CSS:层叠样式表（二）【CSS性质，CSS选择器，CSS盒子模型】

1、CSS的层叠性：

CSS样式可以叠加(即一个标签上可以应用多个样式)

2、CSS的继承性：

在书写CSS样式表时，子标签会继承父标签的某些样式

	p{
	   color: "red";
	 }

	 <p>
		aa
	   <span>内容</span>
	 </p>

边框属性、定位属性、内外的间距属性、元素的宽高属性、布局属性、背景属性不具有继承性的

3、CSS的优先级：

要看选择器的权重(标签名选择器的权重是1，id选择器的权重是100，类选择器的权重是10)

(1)权重值越大，优先级越高

(2)继承样式的权重值为0

(3)行内样式优先

(4)当权重值相同时，CSS遵循就近原则

(5)CSS定义了一个!important命令，该命令被赋予最大的优先级。

5、属性选择器：

    (1)E[att^=value]：'E'代表标签名，'att'表示是标签的属性。含义是标签的某个属性值是以给定的value
  
                    开头
					
	(2)E[att$=value]：表示标签含有给定的属性，并且属性值是以value值结尾的
	
	(3)E[att*=value]：表示标签含有给定的属性，并且属性值中含有value

6、复合选择器：

多个选择器混合使用，选择器之间用逗号隔开

   p,.dd,#d1{
    color: red;
   }

7、关系选择器

(1)子元素选择器(>)：

  h1>strong{ 
         color:blue;
     }

(2)兄弟选择器：

A、临近兄弟选择器：

使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

div>p+div{ 
             color: chartreuse;
            } 

B、普通兄弟选择器：

使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

div>#p2~div{
               color: chartreuse;
           }

8、伪类选择器：

(1)E:first-child

E:first-child{ 样式规则 }

匹配父元素的第一个子元素E。要使该属性生效，E对象必须是某个对象的子元素。

(2)E:last-child

E:last-child{ 样式规则 }

匹配父元素的最后一个子元素E。要使该属性生效，E对象必须是某个对象的子元素。

(3)E:nth-child(n)

E:nth-child(n){ 样式规则 }

匹配父元素的第n个子元素E。 要使该属性生效，E对象必须是某个对象的子元素。

(4)E:nth-last-child(n)

E:nth-last-child(n){ 样式规则 }

匹配父元素的倒数第n个子元素E。要使该属性生效，E对象必须是某个对象的子元素。

(5)E:empty

E:empty{ 样式规则 }

匹配没有任何子元素（包括text节点）的元素E。

(6)E:link

E:link{ 样式规则 }

设置超链接a在未被访问前的样式。

(7)E:visited

E:visited{ 样式规则 }

设置超链接a在其链接地址已被访问过时的样式。

(8)E:hover

E:hover{ 样式规则 }

设置元素在其鼠标悬停时的样式。

(9)E:active

E:active{ 样式规则 }

设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

9、列表的样式规则

(1)list-style-image：用来设置列表项的标记(项目符号)图像。

(2)list-style-style：用来设置列表项的项目符号样式。若值为none则没有项目符号

(3)list-style-position：设置项目符号和文本的位置关系

• outside： 列表项目标记放置在文本以外，且环绕文本不根据标记对齐

• inside： 列表项目标记放置在文本以内，且环绕文本根据标记对齐

10、盒子模型：

网页布局的基础

(1)边界(margin)：

盒子的边框与包含改盒子的容器的之间的距离

A、margin-top：上边界

B、margin-right：右边界

C、margin-bottom：下边界

D、margin-left: 左边界

(2)填充(padding)：

内补白(内边距)，盒子中的内容与盒子边框之间的距离

	    A、padding: 上 右 下 左
		
		B、padding-top:上边距
		
		C、padding-right:右边距
		
		D、padding-bottom：下边距
		
		E、padding-left：左边距

(3)边框(border)：

盒子的边框线

	    A、border-style:边框的样式【上、右、下、左】
		
		B、border-width:边框的宽度【上、右、下、左】
		
		C、border-color:边框的颜色【上、右、下、左】
		
		D、border(综合设置边框): 边框的宽度  边框的样式  边框的颜色
		
		E、border-radius(圆角边框):水平半径参数/垂直半径参数

(4)清除页面元素的默认内外边距

   *{
      padding: 0px;
	  margin: 0px;
    }

	   '*'：通配符，代表所有元素

(5)背景图像：

	   background-repeat:
	   
	        repeat  默认值，图像在水平和垂直方向上都平铺
			
			no-repeat：不平铺
			
			repeat-x：水平平铺
			
			repeat-y：垂直平铺