一、CSS介绍
1.1 什么是CSS
百度百科：
CSS即层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现
说人话：
CSS通常称为CSS层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
1.2 CSS的作用
-
CSS 主要目的： 控制网页中元素的样式 。
-
CSS可以将将页面美化和HTML代码进行分离,提高代码的复用性。
-
降低耦合度。解耦
-
让分工协作更容易
-
提高开发效率。
只需要记住：html负责数据内容的展示，而CSS负责设置html页面中元素的样式。即CSS是网页的美容师。
二、CSS的使用
2.1 CSS与html的三种结合方式
2.1.1 内联样式(不常用)
在标签内使用style属性指定css代码
如：<div style="color:red;">hello css</div>
2.1.2 内部样式（常用）
在head标签内，定义style标签，style标签的标签体内容就是css代码
如： <head>div{ color:blue; } </style></head>
<body>
<div>hello css</div>
</body>
2.1.3 外部样式（常用）
-
定义css资源文件。
-
在head标签内，定义link标签，引入外部的资源文件
如：存在一个css文件a.css，文件内容如下 div{ color:green; }然后在html页面引入a.css <head> <link rel="stylesheet" href="css/a.css"> </head> <body> <div>hello css</div> <div>hello css</div> </body>
2.2 CSS语法
格式
* 格式： 选择器 { 属性名1:属性值1; 属性名2:属性值2; ... } * 选择器:筛选具有相似特征的元素 * 注意： * 每一对属性需要使用“;”(分号为英文标点)隔开，最后一对属性可以不加“;”
2.3 CSS选择器分类
分类:
1.基础选择器
基础选择器 1. id选择器：选择具体的id属性值的元素.（id必须在页面上面唯一） * 语法：#id属性值{} 2. 类选择器：选择具有相同的class属性值的元素。 * 语法：.class属性值{} 3. 元素选择器：选择具有相同标签名称的元素 * 语法： 标签名称{}
扩展选择器：
1. 选择所有元素：
* 语法： *{}
2. 并集选择器：
* 选择器1,选择器2{}
3. 后代选择器：筛选选择器1元素下的所有选择器2元素。（只要选择器的后代中有选择器2 ，无论选择器2嵌套多深都会被选中。）
* 语法： 选择器1 选择器2{}
4. 子选择器：筛选父选择器1的第一个子元素选择器2，第二个子元素选择器2不会被选择
* 语法： 选择器1 选择器2{}
5. 相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。
* 语法：选择器1 + 选择器2
6. 属性选择器：选择元素名称，属性名=属性值的元素
* 语法： 元素名称[属性名="属性值"]{}
7. 伪类选择器：选择一些元素具有的状态。(通常用在a标签上)
* 语法： 元素:状态{}
* 如：
* 状态：
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态</pre>
2.4 CSS常用的属性
1.字体、文本
字体、文本: * font-size：字体大小 * color：文本颜色 * text-align：对其方式 * line-height：行高
背景：
* background：
边框
* border：设置边框，符合属性
尺寸 * width：宽度 * height：高度
* float：浮动 * left * right * clear: 清除浮动 * both * left * right
* position: * absolute * top: * left:
为盒子模型赋值：顺时针 : 上右下左
* margin：外边距，控制盒子与盒子之间的距离 * padding：内边距,控制的是盒子内容的距离 * 默认情况下内边距会影响整个盒子的大小 * box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
