- A+
所属分类：Web前端
一、基础认知
1.1 CSS的介绍
CSS：层叠样式表（Cascading style sheets）
CSS的作用：给页面中的HTML标签设置样式
1.2 CSS语法规则
CSS写在style标签中，style标签一般写在head标签里面，title标签下面
例：
1.3 CSS初体验
常见的属性：
| CSS常见属性 | 作用 |
|---|---|
| color | 文字颜色 |
| font-size | 字体大小 |
| background-color | 背景颜色 |
| width | 宽度 |
| height | 高度 |
例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <style> 10 p { 11 color: blue; 12 font-size: 30px; 13 background-color: black; 14 width: 200px; 15 height: 200px; 16 } 17 </style> 18 </head> 19 20 <body> 21 <p>hello,world!</p> 22 </body> 23
注意：
1. CSS的标点都是英文状态下的
2. 每一个键值对写完之后，最后需要写分号
2.1 CSS引入方式
内嵌式： CSS写在style标签中
提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中
外联式：CSS写在一个单独的.CSS文件中
提示： 需要通过link标签在网页中引入
<link rel="stylesheet" href="">
行内式：CSS写在标签的style属性中
<p style="color: blue;">hello,world!</p>
小结：CSS常见三种引入方式的特点区别有哪些（书写位置，作用范围，使用场景）？
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
|---|---|---|---|
| 内嵌式 | CSS写在style标签中 | 当前页面 | 小案例 |
| 外联式 | CSS写在单独的CSS文件中.通过link标签引入 | 多个页面 | 项目中 |
| 行内式 | CSS写在标签的style属性中 | 当前标签 | 配合js使用 |
二、基础选择器
1.1 选择器的作用：
选择页面中对应的标签（找它），方便后续设置样式（改它）
1.2 标签选择器
结构：标签名 { CSS属性名:属性值; }
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
1.2类选择器
结构：.类名 { css属性名：属性值； }
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签
3. id选择器
结构：#id属性值 { css属性名：属性值； }
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1. 所有标签上都有id属性
2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签
4. 通配符选择器
结构：* { css属性名：属性值； }
作用：找到页面中所有的标签，设置样式
注意点：
1. 开发中使用极少，只会在极特殊情况下才会用到
2. 在小页面中可能会用于去除标签默认的margin和padding
三、字体和文本样式
1.1 字体大小
属性名：font-size
取值：数字 + px
注意点：
谷歌浏览器默认文字大小是16px
单位需要设置，否则无效
1.2 字体粗细
属性名：font-weight
取值：
关键字： 正常：normal 加粗：bold
纯数字：100~900的整百数：
正常：400 加粗：700
注意点：
不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以：正常、加粗两种取值使用最多。
1.3 字体样式（是否倾斜）
属性名：font-style
取值：
正常（默认值）：normal
倾斜：italic
1.5 字体系列 font-family
属性名：font-family
常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……
字体系列：sans-serif、serif、monospace等……
渲染规则：
1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点：
1. 如果字体名称中存在多个单词，推荐使用引号包裹
2. 最后一项字体系列不需要引号包裹
3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
1.6 字体font相关属性的连写
属性名：font (复合属性)
取值： font : style weight size family;
省略要求：只能省略前两个，如果省略了相当于设置了默认值
注意点：如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
1.7 字体相关属性总结
字体大小： font-size
数字+px
字体粗细：font-weight
正常：normal 或 400
加粗：bold 或 700
字体样式：font-style
正常：normal
倾斜：italic
字体系列：font-family
具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
字体连写：font
font : style weight size family;
2.1 文本缩进
属性名：text-indent
取值：
数字+px
数字+em（推荐：1em=当前标签的font-size的大小）
2.2 文本水平对齐方式
属性名：text-align
取值：left左对齐 ；center居中对齐；right右对齐
注意点：如果需要让文本水平居中，text-align属性给文本所在的标签设置
2.3 水平居中方法总结 text-align：center
text-align：center 能让那些元素居中？
1. 文本
2. span，a标签
3. input，img标签
如果需要让以上元素水平居中，text-align；center 需要给以上元素的父元素设置
2.4 文本修饰
属性名：text-decoration
取值： underline 下划线；line-through 删除线；overline 上划线；none 无装饰线；
注意点：
开发中会使用text-decoration：none；清除a标签默认的下划线
3.1 行高
作用：控制一行的上下行间距
属性名：line-height
取值：px+数字 /倍数（当前标签font-size的倍数）
应用：
1. 让单行文本垂直居中可以设置line-height：文字父元素高度
2. 网页精准布局时，会设置line-height：1 可以取消上下间距
行高与font，注意覆盖问题
font：style weight size/line-height family；
