CSS 简单学习

具体可参考

一、基本概念

CSS 主要用于页面美化和布局控制

Cascading Style Sheets 层叠样式表

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

1. 功能强大
2. 将内容展示和样式控制分离
	* 降低耦合度。解耦（耦合度：模块之间的关联程度）
	* 让分工协作更容易
	* 提高开发效率

二、使用方式

CSS的使用方式指的是与CSS与html结合方式

1. 内联样式（不推荐使用，并没有达到样式内容分离的目标）

* 在标签内使用style属性指定css代码
* 如：<div style="color:red;">hello css</div>
1
2

1. 内部样式

* 在head标签内，定义style标签，style标签的标签体内容就是css代码
* 如：
<style>
	div{
		 color:blue;
	   }
			
</style>

6
7
8
9

3. 外部样式

1. 定义 css 资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件
* 如：
	* a.css文件：
			div{
				color:green;
				}
	* <link> 标签定义文档与外部资源的关系。
	<link rel="stylesheet" href="css/a.css">
6
7
8
9

注意：

* 1,2,3 种方式 css作用范围越来越大
* 第1种方式不常用，后期常用2,3
* 第3种格式可以写为：
				<style>
			        @import "css/a.css";
			    </style>
6

三、css语法

格式：

选择器 {
				属性名1:属性值1;
				属性名2:属性值2;
				...
	}

选择器筛选具有相似特征的元素
注意：每一对属性需要使用；隔开，最后一对属性可以不加；
案例参考

四、选择器

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

1. 基础选择器

（1）id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一

* 语法：#id属性值{}
1

案例参考

（2）元素选择器：选择具有相同标签名称的元素

* 语法： 标签名称{}
* 注意：id选择器优先级高于元素选择器
1
2

案例参考
（3）类选择器：选择具有相同的class属性值的元素。

* 语法：.class属性值{}
* 注意：类选择器选择器优先级高于元素选择器
1
2

案例参考

2. 扩展选择器

（1）选择所有元素：

* 语法： *{}
1

案例参考
（2）并集选择器：

* 选择器1,选择器2{}
1

案例参考

（3）子选择器：筛选选择器 1 元素下的选择器 2 元素

* 语法：  选择器1 选择器2{}
1

案例参考
（4）父选择器：选择父元素为

* 语法：  	div>p
1

案例参考
（5） 属性选择器：选择元素名称，属性名=属性值的元素

* 语法：  元素名称[属性名="属性值"]{}
1

案例参考

（6）伪类选择器：选择一些元素具有的状态

* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态
1
2
3
4

五、属性

1. 字体、文本

* font-size：字体大小
* color：文本颜色
* text-align：对其方式
* line-height：行高 
1
2
3
4

1. 背景

* background
1

3. 边框

* border：设置边框，符合属性
1

4. 尺寸

* width：宽度
* height：高度
1
2

5. 盒子模型：控制布局

* margin：外边距
* padding：内边距
	* 默认情况下内边距会影响整个盒子的大小
	* box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小

* float：浮动
		* left
		* right
6
7
8

案例参考