css

1. 初始css

  1.1 页面分为：
	       结构 ：html (超文本标记语言)
	       样式 ：css （层叠样式表）
	       行为 
      作用：：页面布局 美化页面  
      本质： ：一份后缀名为 .css 的文本文件
      
   1.2 web标准 
	   		web 标准是由万维网联盟制定
	   		- 结构 html
	   		- 表现 css
	   		- 行为 js
   		一般书写的页面   由三部分
   		Index.html  Index.css Index.js
   	
   1.3 css 布局的优势
	   		表格布局的劣势
		   		 - 将表现层和结构层混合在一起，不符合web标准
		   		 - 不利于页面的维护、更新
		   		 - 代码冗余
	   		css布局的优势
	   			- 表现层和结构层完全分离，符合web标准
	   			- 便于团队开发（视觉设计师和内容编辑分离）
	   			- 便于网站的更新升级，维护性好
	   			- 用户体验好，网站性能高
	   			- 能够适应不同的显示设备

---

2.css的语法

	- 选择器（selector）
	- 声明块（declaration）：包括属性（property）和属性值（value）
	
    2.1 引入css的三种方式
    	- 外部样式（外部式）：link标签
    	- 内部样式（嵌入式））：style标签
    	- 行内样式（内联式）：style属性
    	
   2.2 css基本语法
   		注释：
   			html中的注释      <!-- 注释内容·-->
   			css中的注释        /*注释内容*/
   	2.3 css选择器
   		2.3.1 基本选择器、
   			标签选择器：根据标签的名字去选择元素
   			    写法：标签名
   				特点：选择的元素可能不是一个，选择到页面中所有选择标签
   		2.3.2 id选择器
   			所有的标签都会有id属性  class属性，没什么特殊的作用，唯一的作用就是给元素做一个标识
   			给元素添加id和class的细节问题
   				1. id 每个元素只能添加一个id属性，而且各个元素的id属性值不能相同，理解成身份证，每个人的都不相同，每个人也只有一个
   				2. class类  物以类聚 人以群分
   				    每个元素可以有多个类名
   				    每个元素的类名可以相同
   			Id选择器  通过元素的id名去选择元素
   			在css中选择器的形式  #id名
   			Id选择器选中的元素只可能是一个，在页面中的使用：不常用，选择准确，但不够快捷
   	 2.3.3 class选择器
   	 		通过class名来选择元素
   	 		选择器的形式： .class名
   	2.3.4 通配选择器
   	       * 表示的是通配符，选择所有的元素
   	 2.3.5 复合选择器
   	       把基本的三个选择器组合在一起使用
   	       2.3.5.1交集选择器
   	       			比如两个圆相交的部分
   	       			选择元素通过两种以上的选择器去选择元素
   	       			选择器形式（li.item:）： 选择器1 选择器2 选择器3.......
   	        2.3.5.2并集选择器	
   	        		例：h2,p,.box{}
   	  2.3.6 后代选择器
   	  			根据元素的关系  通过后代的方式去选择元素
   	  			选择器形式  选择器1  选择器2 （要求选择器2必须是选择器1的后代）
   	       		扩展：ul>a选择ul下第一级名叫a的元素
   	  2.3.7 伪类选择器
   	  			选择器形式：
   	  			基本选择器:hover   鼠标移到该元素上的时候生效，鼠标移出失效

3.css的初步排版

	3.1 css的三大特性
		3.1.1继承性
			问题：body中设置font属性，后面所有元素都能生效
			继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代，换句话说就是特定的css属性向下传递到子孙元素。并不是所有的属性都会被后代元素所继承。
			可以继承的常用属性有：（文本和文字类）
			font-family，font-size,font-style,font-weight,font,line-height,text-align,text-indent，color，
		3.1.2层叠性
			针对可以被继承的属性来说，如果某些标签有这些默认的属性值，那么他们不会继承来自祖先的样式
		4.选择器的优先级
		    	面临的问题：对一个元素，用不同的选择器选中，设置了相同的css属性，但是属性值不一样，那么那个生效；
		    	优先级的规律： 权重、
		    	标签选择器    ：  1
		    	class选择器   ：   10
		    	id选择器         ：  200
				复合选择器： 把出现的基本选择器的权重相加	

				1.权重越大，优先级越高
				2.权重相同，后加载的，优先级越高
				3.外部引用的样式同样遵循这些约定
				4.行内样式的权重是1000
				5.！important权重最高

4. 盒模型

  width和height其实设置的是盒模型中内容的区域
  盒子的宽高：content+padding+border
  盒子所占的区域：content+padding+border+margin