CSS基础、类选择器和文字控制属性
一、CSS基础
1.定义：CSS即层叠样式表，是一种样式表语言，用来描述HTML文档的呈现（美化内容）
2.书写规则：选择器 { 属性名：属性值；}
3.引入方式：
- 内部样式表：学习使用
CSS代码写在style里面 - 外部样式表：开发使用
CSS代码写在单独的CSS文件中
在HTML使用link标签引入 - 行内样式：配合JavaScript使用
CSS写在标签的style属性值里
二、选择器：查找标签，设置样式
1.标签选择器
1）作用：使用标签名作为选择器->选中同名标签设置相同的样式
2）特点：选中同名标签设置相同的样式，无法差异化同名标签的样式
2.类选择器
1）作用：查找标签，差异化设置标签的显示效果
2）步骤
- 定义类选择器:.类名
- 使用类选择器：标签添加class="类名"
3）注意：
- 类名自定义，不要用纯数字或中文，尽量用英文命名
- 一个类选择器可以供多个标签使用
- 一个标签可以使用多个类名，类名之间用空格隔开
4）开发习惯：类名见名知意，多个单词可以用-连接。
例如：news-hd
3.id选择器
1）作用：查找标签，差异化设置标签的显示效果
2）场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式
3）步骤：
- 定义id 选择器：#id名
- 使用id选择器：标签添加id="id名"
4）规则：同一个id选择器在一个页面只能使用一次
4.通配符选择器
1）作用：查找页面所有标签，设置相同样式
2）通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
三、文字控制属性
1.文字大小
1）属性名：font-size（必须有单位）
2）属性值：文字尺寸，PC端常用单位为px
2.文字粗细
1）属性名：font-weight
2）属性值
| 方式 | 正常 | 加粗 |
|---|---|---|
| 数字 | 400 | 700 |
| 关键字 | normal | bold |
3.字体样式（是否倾斜）
1）作用：清除文字默认的倾斜效果
2）属性名：font-style
3）属性值
- 正常：normal
- 倾斜：italic
4.行高
1）作用：设置多行文本的间距
2）属性名line-height
3）属性值
- 数字+px
- 数字（当前标签font-size属性值的倍数
4）行高的测量方法:
从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）
5）垂直居中
技巧：行高属性值等于盒子高度属性值
5.字体族
1）属性名：font-family
2）属性值：字体名
3）拓展：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。属性最后一个字体族名，网页开发建议使用无衬线字体（sans-serif）
6.字体复合属性——font
1）复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开
2）font：是否倾斜 是否加粗 字号/行高 字体 （必须按顺序书写）
- 字号和字体值必须书写，否则font属性不生效
7.文本缩进
1）属性名text-indent
2）属性值：
- 数字+px
- 数字+em（1em=当前标签的字号大小）
8.文本对齐
1）作用：控制内容水平对齐方式
2）属性名：text-align
3）属性值
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
4）本质：居中的是文字内容，不是标签
9.修饰线
1）属性名：text-decoration
2）属性值
| 属性值 | 效果 |
|---|---|
| none | 无 |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 上划线 |
10.颜色
1）属性名：color
2）属性值
| 颜色表示方式 | 属性值 | 说明 | 使用场景 |
|---|---|---|---|
| 颜色关键字 | 颜色英文单词 | red、green、blue... | 学习测量 |
| rgb表示法 | r,g,b | r,g,b表示红绿蓝三原色，取值0 | 了解 |
| rgba表示法 | r,g,b,a | a表示透明度，取值01 | 开发使用，实现透明色 |
| 十六进制表示法 | #RRGGBB | #000000,#ffcc00 | 开发使用（从设计稿复制） |
四、调试工具
1）作用：检查、调试代码；帮助程序员发现代码问题、解决问题
2）步骤
- 打开调试工具
- 浏览器窗口任意位置/选中标签->鼠标右键->检查
- F12
- 使用调试工具
