CSS文本属性

定义文本的外观：颜色，对齐，装饰，缩进，行间距…

1.文本颜色

p {
    /* color: pink; */
    /* color: #961179; */
    color: rgb(255,0,0);
}

表示形式	属性值
预定义的颜色值	red,green,blue…
十六进制	#FF0000,#FF6600
RGB代码	rgb(255,0,0),rgb(100%,0%,0%)

• 开发中最常用十六进制

2.对齐文本

（1）水平对齐

text-align设置文本的水平对齐方式

h1 {
    /* 本质是让h1盒子里面的文字水平居中对齐 */
    text-align: center;
}
.pic {
    text-align: center;
    /* 想要让图片居中对齐：给它的父亲p标签添加水平居中代码 */
}

属性值	解释
left	左对齐（默认）
center	居中对齐
right	右对齐

• 想要让图片居中对齐：给它的父亲p标签添加水平居中代码

（2）垂直对齐

vertical-align设置垂直对齐方式。

div img {
    width: 100px;
    height: 100px;
    vertical-align: bottom;
    /* 垂直对齐向上距图片底部的大小 */
    vertical-align: -120px;
}

属性值	解释
top	垂直对齐其顶部
middle	垂直对齐其中部
bottom	垂直对齐其底部
px	垂直对齐向上距其底部大小

3.装饰文本

div {
    /* text-decoration: underline; */
    /* text-decoration: line-through; */
    text-decoration: overline;
}
a {
    /* 取消a默认的下划线 */
    text-decoration: none;
}

属性值	描述
none	默认没有装饰线（常用）
underline	下划线（常用）
overline	上划线
line-through	删除线

4.文本缩进

p {
    /* 文本的首行缩进 */
    /* text-indent: 20px; */
    text-indent: 2em;
}

• 给文本首行缩进
• em是一个相对单位，是当前元素一个文字的大小，如果当前元素没有设置大小，则为父元素的一个文字大小
• 可以为负值

5.行间距=行高

行间距=下间距+上间距+文本高度

div {
    line-height: 26px;
    /* 26px = 16px(文本高度) + 5px(上间距) + 5px(下间距) */
}
p {
    line-height: 1.5em;
}

6.文本大小写转换

h2 {
    /* 小号大写字母 */
    font-variant: small-caps;
    /* 首字母大写(空格 句号 逗号...区分) */
    text-transform: capitalize;
    /* 全部大写 */
    text-transform: uppercase;
    /* 全部小写 */
    text-transform: lowercase;
}

<h2>yooo</h2>

7.文本阴影

颜色 水平偏移 垂直偏移 模糊度

h2 {
    /* 颜色 水平偏移 垂直偏移 模糊度 */
    text-shadow: rgba(255, 222, 12, .5) 3px 3px 2px;
}

8.文本空白处理

h2 {
    /* 保留空格和换行符 */
    white-space: pre;
    white-space: pre-wrap;
    /* 合并空格，保留换行符 */
    white-space: pre-line;
}

9.文本溢出处理

单行文本

div {
    border: solid 1px #ddd;
    width: 300px;
    /* 禁止文本换行 */
    white-space: nowrap;
    /* 隐藏宽度后的文本 */
    overflow: hidden;
    /* 文本溢出加省略号 */
    text-overflow: ellipsis;
}

10.文本排版

（1）字符间隔

letter-spacing

h2 {
    /* 字符间隔 */
    letter-spacing: 20px;
}

（2）单词间隔

word-spacing

h2 {
    /* 单词间距 */
    word-spacing: 50px;
}

（3）排版方式（模式）

writing-mode

div {
    /* 排版方向（模式） */
    /* 垂直 从左到右 诗词等 */
    writing-mode: vertical-lr;
    /* 水平 从上到下（默认） */
    writing-mode: horizontal-tb;
}