Day 05
Author:ScorpioDong
1. CSS 文本格式
1.1 文本颜色
- 使用颜色属性可以设置文字的颜色
1.2 文本对齐
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fRu9IfzM-1583414643037)(../img/text_align.png)]](https://img-blog.csdnimg.cn/20200305212535799.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- text-align 属性可以改变文本的水平对齐方式
- 常用属性值有：
- left: 左对齐
- right: 右对齐
- center: 居中对齐
- justify: 两端对齐
1.3 文本修饰
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bbkAQ0TD-1583414643038)(../img/text-decoration.png)]](https://img-blog.csdnimg.cn/20200305212551503.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 该属性用来设置文本的样式
- 常用属性值有：
- none: 默认，标准文本，无修饰(删除链接下划线)
- underline: 下划线
- overline: 上划线
- line-through: 删除线
- blink: 文本闪烁
1.4 文本转换
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jgvnuq39-1583414643039)(../img/text-transform.png)]](https://img-blog.csdnimg.cn/2020030521260537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 该属性控制文本的大小写
- 常用属性值有：
- none: 默认
- capitalize: 单词首字母大写
- uppercase: 全部大写
- lowercase: 全部小写
2. CSS 字体
2.1 字体系列
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ObT0MBYK-1583414643041)(../img/font-family.png)]](https://img-blog.csdnimg.cn/20200305212622893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 该属性用于设置文本的字体系列
- 属性值超过一个字(英文单词)，需要使用引号包裹
- 允许有多个属性值，使用逗号分隔
2.2 字体样式
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-njdGUAEm-1583414643042)(../img/font-style.png)]](https://img-blog.csdnimg.cn/20200305212635997.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 该属性定义文本的字体样式，主要是常规体和斜体
- 常用属性值有：
- normal: 默认值，标准体
- italic: 斜体
- oblique: 斜体，但和上面一条不一样
2.3 字体大小
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LC3BAYHj-1583414643043)(../img/font-size.png)]](https://img-blog.csdnimg.cn/20200305212646941.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 该属性可以设置文本的字体大小
- 常用属性值有：
- px：像素值
- em：px / 16 = em, 1em等于16px
- %: 调整为父元素的百分之多少，
<body>字体常用100%
3. CSS 链接
3.1 链接状态选择器
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CXQCjRNh-1583414643044)(../img/link-status.png)]](https://img-blog.csdnimg.cn/2020030521270096.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 链接存在4种状态
- link: 未访问
- visited: 已访问
- hover: 鼠标移动到链接上
- active: 鼠标点击时
- 选择器可以通过冒号选择需要定义哪种状态
- hover必须跟在link和visited的后面
- active必须跟在hover的后面
3.2 链接文本样式
- 和普通文本一样
