1. 什么是CSS？
**CSS** 层叠样式表，英文全称**Cascading Style Sheets**是一种用来表现HTML或者XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2. 为什么要用CSS？
虽然HTML标签某些属性可以设置样式效果，但是细节处理的不好。
3. CSS基本使用
3.1 CSS基本语法
**选择器 { 属性:值; 属性:值; }**
一个选择器有若干条样式声明，每条声明央视包含一个CSS属性和其对应的属性值。一个选择器由大括号开始和结束。
3.2 CSS的使用
1. 行内式
将样式定义在html标签上的style属性中
例:
<p style = "color: red; font-family:楷体;"}>这是一段文本测试</p>
注：以行内样式写得CSS耦合度较高，不利于代码可读。
*2. 内部样式
一般写在title标签上，定义在head标签中的sty标签上
例：
<style type = "text/css">
p{
color:red;
font-family:楷体;
}
</style>
*3. 外部样式
通过link标签引入外部css文件
例:
<link rel = "stylesheet" type="text/css" href="css/style.css"/>
rel: 当前文件与引入文件之间的关系
type: 类型：css类型
href: 引入的资源路径
css优先级：就近原则
行内样式 style属性中 权重是1000
3.3 基本选择器
1. 通用选择器
用“”*做选择器会选中所有元素
*2. 元素选择器
指定元素名
*3. id选择器
+选择指定id属性值的元素
注：id定义规则：由字母、数字、下划线、中划线组成，但是不能以数字开头！
*4. 类选择器
选择设置指定class属性值的元素
.class属性值 {}
5. 分组选择器
选择指定选择器选中的元素
选择器1. ，选择器2.，选择器3.... {}
选择器的优先级（权重值）：
id选择器 100 > 类选择器10 > 元素选择器1 > 通用选择器0
3.4 组合选择器
*1. 后代选择器
选择指定元素的所有的后代元素(用空格分隔)
指定元素 指定子代元素 {
属性:属性值
...
}
*2. 子代选择器
选择指定元素的第一代元素（用大于号分隔）
指定元素 > 指定子代元素 {
属性:属性值
...
}
3. 相邻兄弟选择器
选择指定元素相邻的下一个指定元素（只会向下找一个）（用加号分隔）
指定元素 + 指定同级元素 {
属性:属性值
...
}
4. 普通兄弟选择器
选择指定元素后的指定同级元素（只会向下找）（用波浪号分隔）
指定元素 ~ 指定同级元素 {
属性:属性值
...
}
3.5 CSS常用属性设置
1. 背景
设置元素背景颜色: background-color: #六个十六进制数;
设置元素背景图片: background-image:url(路径/文件名);
-
设置背景图片是否重复铺满屏幕*(默认全屏重复)： background-repeat:repeat-x;
不重复 no-repeat
横纵重复 repeat-x repeat-y
设置背景图片大小： background-size:数字px
2. 文本
-
color
- color: 英语颜色
- color: #六个十六进制数
- color: rgb(a,b,c) (abc都是255以内的整数)
-
对齐方式（默认左对齐）
- 居中 text-align: center
- 右对齐 text-align: right
- 左对齐 text-align: left
- 左右对齐 text-align: justify
-
文本修饰
- 设置上划线： text-decoration: overline
- 设置下划线： text-decoration: underline
- 设置中划线： text-decoration: line-through
- 去除文本修饰: text-decoration:none
- 注：可以通过在属性值之间用空格分隔的形式同时使用不同位置的划线
-
设置首行缩进
text-indent: 数字em
3. 字体
-
字体形式: font-family: 字体名
- 注：
- 当字体的属性值包含空格或特殊字符时，需要将font-family属性值用引号括起来
- font-family有“后备“机制，为元素设置多种字体，当浏览器不识别第一种字体时，会尝试找下一个字体
字体大小: font-size: 数字px
-
字体风格: font-style
- 正常体 normal
- 斜体 italic
- 强制斜体 oblique
-
字体粗细: font-weight
- 粗体 bold
- 粗细值 100~900之间的整数 400为正常字体 700为标准粗体
4. display属性
- block 元素会被显示，且会变成块级元素，元素前后有换行符
- none 元素会被隐藏
- inline 元素会显示为行内元素，元素前后没有换行符
- inline-block 行内块级元素
5. 浮动
float的属性值有none、left、right
- 只有横向浮动，没有纵向浮动
- 会将元素的display属性变更为block
- 浮动元素的后一元素会围绕该浮动元素（比如文字围绕图片）
- 浮动元素的前一元素不会受到任何影响（若想让两个块状元素并排显示，必须让两个块状元素都用float）
4. 盒子模型
盒子模型由margin、border、padding组成（蓝色区域为内容）。
4.1 border
- 在一行内设置元素边框的宽度、颜色、类型，语法为：
- border: 数字px #颜色 类型
- 单独设置边框的颜色、宽度、类型：
- border-color
- border-width
- border-style
- 单独设置四条边框线的效果：在属性值之间用空格隔开，顺序是上右下左
4.2 padding
表示内容和边框之间的区域
- 设置内边距，在属性值之间用空格隔开，顺序是上右下左
- padding: 数字px
- 单独设置一边的距离
- padding-left: 数字px
- padding-right: 数字px
- padding-top: 数字px
- padding-bottom: 数字px
4.3 margin
-
设置内边距，在属性值之间用空格隔开，顺序是上右下左
- padding: 数字px
-
单独设置一边的距离
- margin-left: 数字px
- margin-right: 数字px
- margin-top: 数字px
- margin-bottom: 数字px
