字体样式
1、color
2、font-size
3、font-family
4、font-style
5、font-weight
字体样式解析
1、font-family
该属性用于设置字体
1、网页中常用的字体有宋体、微软雅黑、黑体等
如果字体名中包含 空格、#、$ 等符号，则该字体必须加英文状态下的单引号或双引号
例如 font-family: “Times New Roman”
2、当为元素定义多种字体类型时，浏览器会从定义的第一个字体开始检索，若当前浏览器支持第一种字体，则使用第一种字体，否则向后检索，直到检索到浏览器支持的字体，在未设置字体时，默认显示宋体
2、font-size
该属性用于设置字体大小
该属性的值可以使用相对长度单位，也可以使用绝对长度单位 px 绝对像素单位；
em 相对父元素字体大小单位
rem 相对父根元素字体大小单位
3、font-weight
设置字体粗细
4、color
设置字体颜色
5、font-style
设置字体风格
在 CSS 中，我们常用 font-style 来定义斜体效果
| 属性值 | 描述 |
| --- | --- |
| normal | 正常 默认值 |
| italic | 斜体 |
| oblique | 斜体 |
后两个斜体在浏览器中效果是一样的，但是并非所有字体都有 italic 属性
对于没有这个属性的字体，使用 oblique 来实现斜体效果。
在日常开发中很少用到 font-style 属性。
文本样式
1、text-algin
2、text-indent
3、text-decoration
4、text-transform
5、text-shadow
6、line-height
7、letter-spacing
8、word-spacing
9、word-wrap
10、word-break
11、white-space
文本样式解析
1、text-align
水平对齐
使用 text-align 控制文本在水平方向上的对齐方式
| 属性值 | 描述 |
| --- | --- |
| left | 左对齐 |
| cnter | 剧中对齐 |
| right | 右对齐 |
| start | 块容器的方向是从左到右，则与 left 相同; 块容器的方向是从右到左，则与 right 相同 |
| end | 如果块容器的方向是从左到右，则为右;如果块容器的方向是从右到左，则为左 |
| justify | 两端对齐 |
| inherit | 继承父类的对齐样式 |
2、text-indent
文本缩进
CSS 中的 text-indent 属性可以实现段落的 首行缩进
text-align 属性的值具有 4 种类型，如下所示：
1、长度值：允许使用负值
2、百分比值：使用所在块级元素的宽度的百分比作为缩进
3、each-line：文本缩进会影响第一行，以及使用元素强制断行后的第一行
4、hanging：该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进
看起来就像第一行设置了一个负的缩进值。
4、text-decoration
文本装饰
用于设置元素中的 文本 的修饰类型
1、text-decoration-line 属性
用于设置元素中的文本的修饰类型。
1、underline: 下划线
2、overline: 顶划线
3、line-through: 删除线
2、text-decoration-color 属性
用于设置文本修饰线的颜色
3、text-decoration-style 属性
用于设置由 text-decoration-line 设定的线的样式
运用
1、在 HTML 中，可以使用 s 标签、u 标签来实现文字的划线效果，但是为了保证结构与样式分离的原则，一般使用 CSS 来实现样式，提高代码的可读性和可维护性
2、超链接默认带下划线，可以用 text-decoration：none 来清除超链接的下划线
3、下划线常用于文章的重点标明，中划线用于促销时划掉原价，上划线基本没有应用场景
5、text-transform
英文字母大小写的转换
| 属性值 | 描述 |
| --- | --- |
| none | 无转换（默认值） |
| uppercase | 转换成大写 |
| lowercase | 转换为小写 |
| capitalize | 将每个英文单词的首字母转为大写|
6、line-height
控制两行元素之间的垂直距离
1、行间距也称为行高指的是两行文本内容中基线的距离，即两条绿色线之间的距离
2、行距指的是上一行的底线到下一行的顶线之间的距离
3、字体大小值的是顶线到底线的距离
line-height 属性的值允许指定如下 4 种类型
1、normal 关键字：该值取决于用户电脑。一般情况下，浏览器使用的默认值为 1.2
2、数字值：line-height 属性的最终的效果值是该数字值乘以该元素的字体大小（font-size 属性值）
3、长度值：该值可以使用的单位请参考《单位》一节内容。如果使用 em 单位的可能会产生不确定的效果
4、百分比值：line-height 属性的最终的效果值是该百分比值乘以该元素的字体大小font-size 属性值。
注意
line-height 属性设置值时，建议使用数字值。因为使用数字值时，不会在继承时产生不确定的结果
7、letter-spacing
字母间距
letter-spacing 属性原意是用来设置文本字符之间的间距
在英文中是可以分为 单词 和 字符 的，但在中文中只有文字，中文中的文字就相当于英文的字符，所以 letter-spacing 属性可以适用于中文环境
letter-spacing 属性的值具有 2 种类型
1、normal：该值是按照当前字体的正常间距确定的
2、长度值：指定文字间的间距以替代默认间距，可以是负值
8、word-spacing
单词间距
word-spacing 属性用来设置 HTML 页面中标签之间或单词之间的距离，该属性对英文是有效的，但对中文是无效的
word-spacing 属性的值具有 3 种类型
1、normal：该值是按照当前字体的正常间距确定的
2、长度值：指定单词间的间距以替代默认间距
3、百分比值：指定单词之间的间距以替代默认间距的百分比
9、text-shadow
文本阴影
ext-shadow 属性用来设置 HTML 页面中文本内容的阴影
selector {
text-shadow: color offset-x offet-y blur-raduis;
}
color：可选项，设置文本内容的阴影颜色。
offset-x：必选项，设置文本内容的阴影在水平方向的偏移量。
1、如果值小于 0 的话，则表示向左偏移
2、如果值等于 0 的话，则表示水平方向不发生任何偏移
3、如果值大于 0 的话，则表示向右偏移
offset-y：必选项，设置文本内容的阴影在垂直方向的偏移量。
1、如果值小于 0 的话，则表示向上偏移
2、如果值等于 0 的话，则表示垂直方向不发生任何偏移
3、如果值大于 0 的话，则表示向下偏移
blur-raduis：可选项，设置文本内容的阴影模糊半径
如果没有指定，则默认为 0。值越大，模糊半径越大，阴影也就越大越淡
10、文本换行 word-wrap 和 word-break
1、浏览器自身带有文本换行的功能。在浏览器显示文本内容时，让文本和浏览器的右端自动实现换行
1、对于西方文本，浏览器会在半角空格或连字符的地方自动换行
2、对于中文文本，可以在任何文字后面换行。通常标点符号以及前面的文字作为整体统一换行
2、在 CSS 中可以用来设置文本换行效果的属性存在 2 个
1、word-wrap 属性
2、word-break 属性
a、word-wrap 属性
word-wrap 属性属于微软的一个私有属性
在 CSS3 的文本规范中被重命名为 overflow-wrap
word-wrap 作为 overflow-wrap 的别名
overflow-wrap 属性用来设置 HTML 页面中当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行
overflow-wrap 属性的值具有如下 2 种：
1、normal：表示在正常的单词结束处换行
2、break-word：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。
b、word-break 属性
word-break 属性用来设置 HTML 页面中文本内容自动换行的处理方式
通过具体的属性值设置，可以告知浏览器实现任意位置的换行
word-break 属性的值具有如下 3 种
1、normal：使用默认的断行规则
2、break-all：对于除中文、日文和韩文外的文本内容，设置可以在任意字符间断行
3、keep-all：中文、日文和韩文的文本内容不断行，其他语言的文本内容等同于 normal。
11、white-space
处理空白
white-space 属性用来设置如何处理 HTML 元素中的空白
<body>
<!-- 浏览器默认会将所有的空白进行合并为一个 -->
<p>19级 启嘉班</p>
</body>
该属性的值具有如下 6 种类型
1、normal： 默认值，连续的空白符会被合并，换行符会被当作空白符来处理
填充内联元素的盒子模型时，必要的话会换行
2、nowrap：和 normal 一样，连续的空白符会被合并。但文本内的换行无效
3、pre：连续的空白符会被保留。在遇到换行符或者 <br> 元素时才会换行
4、pre-wrap：连续的空白符会被保留。在遇到换行符或者 <br> 元素，或者需要为了填充内联元素的盒子模型时才会换行。
5、pre-line：连续的空白符会被合并。在遇到换行符或者 <br>元素，或者需要为了填充内联元素的盒子模型时会换行。
6、break-spaces：与 pre-wrap 的行为相同
浙公网安备 33010602011771号