CSS: page layout control and landscaping

1. The concept: Cascading Style Sheets Cascading Style Sheet

    *层叠：多个样式可以作用在同一个html的元素上，同时生效
   

2. benefit

    1.功能强大
    2.将内容的展示和样式的控制分离，
    	* 降低耦合度。解耦
    	* 让分工协作更容易
    	* 提高开发的效率
   

3. CSS is used: combination of CSS and html

    1. 内联样式
    	* 在标签内使用 style 属性指定css样式
    2. 内部样式
    	* 在head标签内，定义 style 标签，style标签的标签体就是css代码
    3. 外部样式
    	* 定义css资源文件
    	* 在head标签内，定义 link 标签，引入外部的资源文件
    	* <link rel="stylesheet"  href="./styles.css">
    注意：
    	* 1,2,3 三种方式，css的作用范围越来越大
    	* 1方式不常用，后期常用2,3
    	* 还有一种格式可以写作
    		 <style>
    		 	@import "css/a.css";
    		 </style> 	
   

4. CSS syntax

    * 格式：
    	选择器{
    		属性名1：属性值1；
    		属性名2：属性值2；
    		属性名3：属性值3；.
    		.......
    	}
    * 每一对的属性需要分号隔开，最后一对属性可以不加分号
   

5. Selector: Filter elements having similar characteristics

    * 基本选择器
    	1. id选择器：选择具体的 id 属性值的元素，建议在一个html页面中 id 唯一
    		* 语法：#id属性值{}
    	2. 元素选择器：选择具有相同标签名称的元素
    		* 语法：标签名称{}
    		* 注意：id选择器优先级高于元素选择器
    	3. 类选择器：选择具有相同的class属性值的元素
    		* 语法：.class属性值{}
    		* 注意：类选择器优先级高于元素选择器
    	优先级：类选择器 > id选择器 > 元素选择器
    * 扩展选择器
    	1. 选择所有元素：
    		* 语法：*{ }
    	2. 并集选择器：
    		* 语法：选择器1，选择器2{ }
    	3. 子选择器：筛选选择器1元素下的选择器2元素	
    		* 语法：选择器1 选择器2{ }
    	4. 父选择器：沙宣选择器2的父元素选择器1
    		* 语法：选择器1 > 选择器2{ }
    	5. 属性选择器：选择元素名称，属性名=属性值的元素
    		* 语法：元素名称[属性名=“属性值”]{}
    	6. 伪类选择器：选择一些元素具有的状态
    		*  语法：元素：状态{}
    		* 如：<a>
    			* 状态
    				* link：初始化的状态
    				* hover： 鼠标悬浮状态
    				* active：正在访问的状态
    				* visited：被访问的状态
   

6. Properties

1 字体，文本
	* font-size : 字体大小
	* color：文本颜色
	* text-align：对齐方式
	* line-heighte：行高
2 背景	
	* background：	url("")  	no-repeat	  center;
	* 		  	  背景图片路径 	  不重复		居中
3 边框
	* border：设置边框，复合属性
4 尺寸
	* width：宽度
	* height：高度
5 盒子模型：控制布局
	* margin：外边距
	* padding：内边距	
		* 默认情况下，内边距会影响整个盒子的大小
		* box-sizing: border-box;设置盒子的属性，让width和height就是最终盒子的大小
	* float：浮动
		* left：左浮动
		* right：右浮动	
	* 上下居中： vertical-align: middle;
	* 左右居中：margin: auto;

## Case