CSS文本属性和字体属性

CSS（五）文本和字体

一、文本

属性	描述
color	文本颜色
letter-spacing	字符间距（适用于中文文本）
word-spacing	字间距（适用于英文文本）
text-indent	缩进元素中文本的首行（例如：text-indent: 2em)
line-height	行高
direction	文本方向 值：ltr | rtl，分别是从左到右 | 从右到左
text-align	文本对齐方式 值：left | center | right | justify，分别是居左 | 居中 | 居右 | 两端对齐
vertical-align	垂直对齐方式
text-decoration	向文本添加修饰
text-shadow	文本阴影
text-transform	控制元素中的字母大小写
white-space	文本中空白的处理方式

1.1、文本方向

第一种，从左到右 | 从右到左

p{
    direction: ltr | rtl;
}

第二种，竖向文字

p{
    writing-mode: vertical-lr | vertical-rl;
}
/* 以上两种都是竖向文本，通过修改”块流“实现的改向 */
/* 前者，所有的竖从左到右排；后者，所有的竖从右向左排。需要通过height属性规定竖向的高度 */

1.2、text-decoration

text-decoration 属性规定添加到文本的修饰，它是text-decoration-line、text-decoration-color、text-decoration-style三个属性的简写。

text-decoration-line，规定文本的上划线、下划线、删除线等

值	描述
none	（默认），标准的文本
underline	带下划线
overline	上划线
line-through	删除线

text-decoration-color，规定上述「线」的颜色。

text-decoration-style，规定上述「线」的样式。取值如下：

值	描述
solid	实线
wavy	波浪线
double	双线
dashed	虚线
dotted	点线

1.3、text-shadow

text-shadow 属性应用于阴影文本

值	描述
h-shadow	（必须），水平阴影的位置
v-shadow	（必须），垂直阴影的位置
blur	模糊的距离
color	阴影颜色

1.4、text-transform

text-transform属性控制文本的大小写。取值如下：

值	描述
none	（默认）
capitalize	文本中每个单词以大写字母开头
uppercase	文本中仅有大写字母
lowercase	文本中仅有小写字母

1.5、white-space

white-space属性指定元素内的空白怎样处理。取值范围如下：

值	描述
normal	（默认），空白被忽略
pre	空白被保留，行为方式类似于pre标签
nowrap	文本不换行，文本会在同一行上继续，直到遇到br标签
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符

1.6、文本选中

user-select属性设置是否允许用户选中文本

user-select: none | text | all | element;

• none，文本不能被选择
• text，可以选择文本
• all，当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素
• element，可以选择文本，但选择范围受元素边界的约束

二、字体

font属性是所有字体属性的简写。这些属性包括：

属性	说明
font-family	规定字体系列
font-size	规定字体大小
font-weight	规定字体粗细。取值范围： lighter | normal(默认) | bold | bolder
font-style	规定字体样式。取值范围：normal(默认) | italic(斜体) | oblique(倾斜)
font-variant	设置小型大写字母的字体显示文本