CSS文本属性基础详解

1 CSS文本属性

CSS ⽂本属性可定义⽂本的外观。

通过⽂本属性，您可以改变⽂本的颜⾊、字符间距，对⻬⽂本，装饰⽂本，对⽂本进⾏缩进等等。

1.1 文本缩进

text-indent 属性将⻚⾯上的段落的第⼀⾏进行缩进(首行缩进)，这是⼀种最常⽤的⽂本格式化效果。

取值：

• <length>：⽤⻓度值指定⽂本的缩进。可以为负值。

• <percentage>：⽤百分⽐指定⽂本的缩进。可以为负值。

p { 
    text-indent:20px; 
}
p { 
    text-indent:20%; 
}

1.2 文本对齐

text-align属性设置⽂本⽔平对⻬⽅式。

取值：

• left：内容左对⻬。

• center：内容居中对⻬。

• right：内容右对⻬。

• justify：内容两端对⻬，对最后⼀⾏⽆效

li-01 {
    text-algin:left;
}
​
li-02 {
    text-algin:right;
}
​
li-03 {
    text-algin:center;
}
​
li-04 {
    text-algin:justify;
}

1.3 文本修饰

text-decoration 属性设置⽂本装饰线条的位置，综合属性

可以单独设置 text-decoration-line、 text-decoration-color 和 text-decoration-style 属性

text-decoration-line

• none 指定⽂字⽆装饰

• underline 指定⽂字的装饰是下划线

• overline 指定⽂字的装饰是上划线

• line-through 指定⽂字的装饰是贯穿线

注：还可以组合多个值，比如 underline 和 overline，在文本上下方同时显示线条

text-decoration-style

• solid 线条显示为单行

• double 线条显示为双线

• dotted 线条显示为点线

• dashed 线条显示为虚线

• wavy 线条显示为波浪线

.under {
    text-decoration: underline red;
}
​
.over {
    text-decoration: wavy overline orange;
}
​
.lineThough {
    text-decoration: line-through;
} 
​
.none {
    text-decoration: none;
}
​
.under01 {
    text-decoration-line: overline underline;
}

1.4 单词间距

word-spacing 属性设置英⽂单词之间的间距

取值：

• normal：默认间隔

• <length>：⽤⻓度值指定间隔。可以为负值

p {
    word-spacing:20px;
}

1.5 文本间距

letter-spacing 属性设置字符之间的间距，适⽤于中英⽂⽂本

取值：

• normal：默认间隔

• <length>：⽤⻓度值指定间隔。可以为负值

p {
    letter-spacing:20px;
}

1.6 ⽂本换⾏

1.6.1 word-wrap

word-wrap 属性设置⽂本内部⻓单词或URL换⾏

取值：

• normal 默认值（浏览器保持默认处理）。

• break-word 在⻓单词或 URL 地址内部进⾏换⾏。

1.6.1 word-break

word-break 属性设置⾃动换⾏的处理⽅法

取值：

• normal 使⽤浏览器默认的换⾏规则。

• break-all 允许在单词内换⾏。

• keep-all 只能在半⻆空格或连字符处换⾏。

1.7 文本颜色

color 属性设置⽂本颜⾊

取值：

• <color>：指定颜⾊

2 颜⾊⾊值

CSS颜⾊取值⽅式：

• ⼗六进制⾊

• RGB 颜⾊

• RGBA 颜⾊

• 预定义/跨浏览器颜⾊名

2.1 ⼗六进制⾊

⽬前所有浏览器都⽀持⼗六进制颜⾊

⼗六进制颜⾊是这样规定的：#RRGGBB，其中的 RR（红⾊）、GG（绿⾊）、BB（蓝⾊）⼗六进制整数规定了颜⾊的成分。所有值必须介于 0 与 FF 之间

⼗六进制颜⾊计数： 0 1 2 3 4 5 6 7 8 9 a(10) b(11) c(12) d(13) e(14) f(15) 组合⽽成

p {
    color: #f00;
}
​
div {
    color: #ff6700
}

2.2 RGB颜⾊

所有浏览器都⽀持RGB颜⾊ RGB 颜⾊值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue)定义颜⾊的强度，可以是介于 0 与 255 之间的整数，或者是百分⽐值（从 0% 到 100%）

p {
    color: rgb(255, 0, 0)
}

2.3 RGBA颜⾊

RGBA 颜⾊值得到以下浏览器的⽀持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 颜⾊值是 RGB 颜⾊值的扩展，带有⼀个 alpha 通道 - 它规定了不透明度。

RGBA 颜⾊值是这样规定的：rgba(red, green, blue, alpha)。

alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

p {
    color: rgba(255, 0, 0, 0.5)
}

2.4 预定义/跨浏览器颜⾊名

所有浏览器都⽀持颜⾊名 HTML 和 CSS 颜⾊规范中定义了 147 中颜⾊名（17 种标准颜⾊加 130 种其他颜⾊）。

17 种标准⾊是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。

p {
    color: red;
}