标题
- 1 基础认知
- 1.1 体验CSS
- 1.1.1 CSS的介绍
- 1.1.2 CSS语法规则
- 1.2 CSS引入方式
- 2 基础选择器
- 2.1 标签选择器
- 2.2 类选择器
- 2.3 id选择器
- 2.4 通配符选择器
- 3 字体和文本样式
- 3.1 字体样式
- 3.1.1 字体大小：font-size
- 3.1.2 字体粗细：font-weight
- 3.1.3 字体样式：font-style
- 3.1.4 字体类型：font-family
- 3.1.2 字体类型：font属性连写
- 3.2 文本样式
- 3.2.1 文本缩进：text-indent
- 3.2.2 文本水平对齐方式：text-align
- 3.2.3 文本修饰：text-decoration
- 3.3 line-height行高
- 4 Chrome调试工具
- 拓展
1 基础认知
1.1 体验CSS
1.1.1 CSS的介绍
1.1.2 CSS语法规则
1.2 CSS引入方式
外联式：
html
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="./css/index.css"/></head><body><p>这是p标签</p></body>
</html>css
p{color: #231220;font-size: 30;
}
行内式：
<div style="color: aqua; font-size: 25; background-color: azure;">这是div标签</div>
2 基础选择器
2.1 标签选择器
2.2 类选择器
2.3 id选择器
id选择器并不是为了设置样式的，而是为了配合js找标签用的
2.4 通配符选择器
3 字体和文本样式
3.1 字体样式
3.1.1 字体大小：font-size
3.1.2 字体粗细：font-weight
3.1.3 字体样式：font-style
3.1.4 字体类型：font-family
3.1.2 字体类型：font属性连写
3.2 文本样式
3.2.1 文本缩进：text-indent
3.2.2 文本水平对齐方式：text-align
3.2.3 文本修饰：text-decoration
3.3 line-height行高
4 Chrome调试工具
- 打开Chrome网页，右键 -> 检查
- （F12按键上没有别的图标）按F12
（或）按Fn + F12
