CSS（上）

1. 什么叫CSS？

   cascading style sheet
   层叠 样式 表
   css不能脱离HTML单独存在

2. 语法

   a.属性的设置
   	属性名和属性值之间使用冒号分割
   	多对属性之间使用分号分割
   	最后一对属性可以不加分号
   	1.style
   		<div style="width:100px; height:100px;background-color:red;"></div>
   	2.其他
   		代码块
   		选择器{
   			width:100px;
   			height:100px;
   			background-color:red;
   		}
   
   b.注释
   	1.写法
   		/*注释内容*/
   	2.作用
   		增加代码的可读性，便于代码的维护和管理
   	3.注意
   		注释不能嵌套使用
   		<!--outer
   			<!--inner-->
   		-->
   		
   c.速记写法
   
   	简写方式
   	Top
   	Bottom
   	Left
   	Right
   	
   	padding-top:
   	padding-left:
   	padding-right:
   	padding-bottom:
   	
   	顺时针顺序
   	Padding:10px；  //上下左右均为10px
   	Padding: 10px 20px;  //上下10px  左右20px
   	Padding:10px 20px 30px；//上10px  左右20px 下30px
   	padding：10px 20px 30px 40px；
   			//上 右 下 左
   	
   	Margin
   	margin：0 auto;  
   		 //设置给具有宽度的块级元素时，元素可以在父元素中自动居中
   			上下为0   左右自动居中
   			一般上下滑动，高度不确定，自动居中无法设置
   	Border:1px solid red;
   		border-width;
   		Border-style;
   		Border-color;
   		Border-top-width;
   

3. css如何作用到html上？

   a.行内样式
   	写在标签内部的style属性上
   	
   b.内嵌式/内部样式表
   	在head内部使用style标签设置
   	<style type="text/css">
       </style>
            
   c.外部样式表
   	当前html文件外部，创建一个css文件
   	.css为文件后缀名
   	1）link标签
   		优先加载html     link标签属于HTML的一部分
   		建议使用link标签
   	2）@import属性
   		优先解析了style的内容，再解析HTML的内容，也就是优先加载了css
   优先级：
   	行内样式>内嵌式=外部引入
   	就近原则：哪一个样式距离HTML元素更近，谁的优先级更高
   

4. 选择器

   标签选择器：
   	通过标签名称选择一类元素
   	div{}
   	span{}
   	p{}
   	
   id选择器：
   	通过id属性选择一个元素
   	#id名称
   	
   类选择器：
   	class：通过class属性选择一类元素
   	.one  class=one
   	
   通配符选择器:
   	*{}  选择所有包括body   （）
   	*{
   		margin:0px;
   		padding:0px;
   	}
   	
   后代选择器：
   	空格：选择所有后代元素
   	>:选择直接子元素
   	
   兄弟选择器：
   	+：
   		 选择当前元素之后的一个兄弟元素
   	~：
   		选择当前元素之后的所有兄弟元素
   	#tow~div{
               background-color: sandybrown;
           }
           
   组合选择器：
   	div #one .one
   	div#one      选择当前div中id=one的元素
   	div.one
   	div.one~p>span
   	
   多选择器：
   	div，p，span，#one，.one{
   	}
   	
   属性选择器：
   	根据元素的属性选择一类元素
   	[id]：具有id属性的
   	[id='one']：具有id属性，属性值为one的
   	[class~='one']：具有class属性，且属性值之一为one的
   	class="one tow"
   	[class^='o']：具有class属性，且属性值以o开头的
   	[class$='e']：具有class属性，且属性值以e结尾的
   	[class*='o']：具有class属性，且属性值包含o的
   	
   伪类选择器：
   	div class='one'
   	.one
   	
   	:伪类名称
   	:first-child
   	:last-child
   	:nth-child(num/odd/even)
   	div:first-child   选中div作为父亲的第一个孩子
   	p:nth-child(2){
   		background-color: skyblue;
             }
   	
   	:first-of-type
   	p:first-of-type    所有p标签中作为第一个的
   	:last-of-type
   	
   	a：
   		:link：未点击状态
   		:hover:悬停状态
   		:active:鼠标按下状态
   		:visited:鼠标点击之后的状态
   		link->visited->hover->active
   		
   伪元素选择器：
   	::伪元素名称
   	::first-letter
   	::first-line
   	::before
   		content:' '/url( )
   	::after
   	::selection
   		文本被选中后的状态
   		input::-moz-selection
   

5. 选择器优先级

   ！important;   //不计入优先级的运算，优先级最高（比style的优先级还要高），建议少用
   
   特性值计算：
   	特性值越高，优先级越高；
   	特性值相同，谁更靠近html，谁的优先级越高
   写在style属性内部：1000
   id选择器：100
   类/伪类/属性：10
   标签/伪元素：1
   通配符：0
   256进制