CSS文本样式

文本颜色

在目前的浏览器标准中，要想改变浏览器默认字体的颜色（#000000）唯一的途径就是通过CSS的“color”属性进行设置颜色

①颜色英文单词

可以通过颜色的英文单词直接设置文本的颜色

②HEX（三原色，16进制表示）

通过“#”+16进制表示颜色，有“#”+“三位”和“#”+“六位”的形式

③RGBa（三原色，十进制表示）

和“HEX”表示三原色一样，该模式同样也是采用三元色的值来表现色彩，不过“RGBa”颜色模式采用的是10进制的值
“RGBa”里面的这个“a”（alpha），它表示不透明度，取值区间是“0到1”之间的浮点数（可保留到两位小数），“0”表示完全透明，“1”表示完全不透明
例:rgba(34, 102, 255, 0.55)

④HSLa（色调，饱和度，亮度，不透明度）

1. 色调
   除开“黑色”和“白色”从纯红色过度到纯蓝色再过度到纯红色这一过程的颜色轴的区间，共计360个色调
2. 饱和度
   从该色调的纯黑到该色调的纯色区间，越接近黑色，饱和度越低，越接近纯色，饱和度越高
3. 亮度
   从“纯黑”到“纯白”这一过程的表示，越接近黑色亮度越低，越接近白色亮度越高
4. 不透明度
   例:HSL(76, 35%, 45%) ：这是一个色调为76，饱和度35%，亮度45%，不透明的颜色
   例:HSLa(316, 75%, 56%, 0.9)：这是一个色调为316，饱和度75%，亮度56%，不透明度0.9的颜色

⑤Transparent（透明）

只要设置该值，那文本的内容将变为完全透明，即无论背景为什么颜色或图片，都会完全看不到设置的文字元素，只是起到了一个占位作用，除非文本被选中

//文本的内容将变成完全透明
div { color: transparent;}

文本的居中方式“text-align”

该属性用于控制“行内块元素”或“块元素”内“行内元素”（文本元素）的居中方式的

属性值	描述
left（默认）	文本左对齐
center	文本居中对齐
right	文本右对齐

段落首行缩进“text-indent”

该属性是用于设置 每个段落首行缩进数量值的属性

//如果是用于中文布局，一般会使用“2em”的数值和单位来为每个段落的首行缩进“两个字符”
p {
text-indent: 2em;
}

文本装饰线“text-decoration”

该属性是为文本上添加一根装饰线，带"href"属性的<a>标签默认会带有一根下划线，就是由该属性的值“underline”设置的

属性值	描述
none（默认）	不显示任何装饰线
underline	在文本下方显示装饰线
overline	在文本上方显示装饰线
line-through	在文本中间显示装饰线，相当于删除线

// 示例
p {
text-decoration: none;
}

英文字母大小写转“text-transform”

属性值	描述
none（默认）	保持文本中英文单词的默认大小写
capitalize	将每个英文单词首字母变为大写字母（而不管他原本是大写还是小写），其它字母即便是小写也不管
uppercase	将所有英文单词转换为大写字母
lowercase	将所有英文单词转换为小写字母

// 示例
p {
text-transform: capitalize;
}

文本的阴影“text-shadow”

该属性的作用是给文本添加阴影效果

属性值	描述
水平方向阴影偏移（h-shadow）	“0”表示维持原位，正数为向右偏移，负数为向左偏移。单位为像素“px”
垂直方向阴影偏移（v-shadow）	“0”表示维持原位，正数为向上偏移，负数为向下偏移。单位为像素“px”
阴影模糊距离（blur）	用正数表示阴影模糊的单位距离，距离越大模糊程度越高，单位为像素“px”。
阴影的颜色（color）	支持Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”

// 示例
p {
text-shadow: 0px 0px 2px black;
}

和“行内块元素”和“块元素”所用的“box-shadow”（以后会学习）有所不同，文本阴影的属性值里没有“inset”（设置为内阴影）和“spread”（阴影的扩展，单位像素“px”），以后在使用中需要加以区分

段落文本行高“line-height”

该属性是用于设置“行内元素”中文本元素在一行中所占据的高度，（可实现单行文本垂直居中的效果）

// 示例
 p{
border: 0.05rem solid red;
line-height: 5rem;
}

单词的间距“word-spacing”

该属性用于设置英文单词之间的间距

注意
他区分单词时是按照单词两边是否含有空格来判断的，所有如果你的内容是中文

1. 当你的文字间没有空格时，整体就会被当做一个单词
2. 当你的每个汉字两边都有空格时，每个汉字才会被当做是一个单词
3. 其值可以为负数，距离会减小

// 示例
p {
word-spacing: 1em;
}

字符的间距“letter-spacing”

和“word-spacing”有所不同，该属性是用于控制字符间的间距，一个字母，一个汉字，甚至一个空格都是一个字符

注意：

1. 在html中，多个空格最终会变为一个空格的
2. 其值可以为负数，距离会减小

空格换行处理“white-space”

该属性设置如何处理元素内的空格符和换行符

属性值	描述
normal（默认）	由浏览器处理空格和换行
pre	段落里所有的空格符和换行符都会被保留（类似于<pre>标签）
nowrap	段落内的文本不会换行（类似于没有设置过换行的“notepad”）
pre-wrap	段落里所有的空格符序列和换行符序列都会被保留，这点类似于pre但是他不会去更改浏览器的默认行为（当内容的宽度小于了窗体的宽度时会出现滚动条的行为）
pre-line	保留换行符，但是多个空格还是会按照浏览器的默认行为处理（多个合并为一个）

如果你当前的内容是无空格分隔的一连串的英文，那么他会被浏览器当作是一个单词，不会让他换行，只会出现水平滚动条去适应他

设置文本方向“direction”

该属性是由于控制文本显示方向的，即从左往右，或从右向左

属性值	描述
ltr	默认值,文本方向从左到右
rtl	文本方向从右向左

设置文本溢出时的处理“overflow”

属性值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承 overflow 属性的值

文本的裁切“text-overflow”

属性值	描述
clip	裁剪文本（从属性意义不大，通过overflow：hidden可实现此效果）
ellipsis	显示省略符号来代表被裁剪的文本

不过该属性不能单独使用，必须要配合“white-space”和“overflow”来使用，否则会达不到所期望的效果

// 显示省略号的流程
1. 文本长度需要超出宽度边界
2. 不允许内容换行
3. 设置超出就隐藏
4. 设置文本末尾显示省略号

div {
width: 5rem;
height: 5rem;
border: 0.1rem solid red;

white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}

如果对你有帮助，点个赞支持一下