Web学习-CSS

CSS

1. 概念：Cascading Style Sheets 层叠样式表

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

2. 优势：

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

3. CSS的使用：CSS和html结合方式

    1. 内联样式
    	* 在标签内使用style属性指定css代码
    2. 内部样式
    	* 在head标签内，定义style标签，style标签的标签体内容就是css代码
    3. 外部样式
    	1. 定义css资源文件
    	2. 在head标签内，定义link标签，引入外部的资源文件
   

4. CSS语法

    * 格式：
    	选择器{
    			属性名1:属性值1;
    			属性名2:属性值2;
    			...
    	}
    * 选择器：筛选具有相似特征的元素
    * 注意：每一对属性需要使用分号隔开
   

5. 选择器：筛选具有相似特征的元素

    * 基础选择器
    	1. id选择器：选择具体的id属性值的元素，建议一个html页面中id值唯一
    		* 语法：#id属性值{}
    	2. 元素选择器：选择具有相同标签名称的元素
    		* 语法：标签名称{}
    	3. 类选择器：
    		* 语法：.class属性值{}
    	优先级：id选择器>类选择器>元素选择器
    * 扩展选择器：
    	1. 选择所有元素：	*{}
    	2. 并集选择器：		选择器1， 选择器2{}
    	3. 子选择器：			选择器1	 选择器2{}
    	4. 父选择器：			选择器1 > 选择器2{}
    	5. 属性选择器：		元素名称[属性名="属性值"]{}
    	6. 伪类选择器：		元素：状态{}
   

6. 属性

    1. 字体、文本
    	* font-size：字体大小
    	* color：文本颜色
    	* text-align：对齐方式
    	* line-height：行高
    2. 背景
    	* background
    3. 边框
    	* border
    4. 尺寸
    	* width
    	* height
    5. 盒子模型：控制布局
    	* margin：外边距
    	* padding：内边距
    		* 默认情况下内边距会影响整个盒子的大小
    		* box-sizing：border-bix;		设置盒子的属性，让width和height就是最终盒子的大小
    	* float：浮动
    		* left
    		* right