阅读(2779)

CSS 文本

最后一次修改 2017年08月04日

通过使用CSS,我们可以控制文本样式。例如,我们可以更改文本颜色,我们可以控制文本对齐,缩进,字母间距等。

文本颜色

color 属性设置文本的颜色。

我们可以使用以下方式指定颜色。

  • HEX值 - 如“#ff00ee”

  • RGB值 - 如“rgb(255,0,255)”

  • 颜色名称 - 如“红色”

以下代码将标题1设置为红色。

h1 {
    color: red;
}

文本对齐

text-align指定文本块的对齐方式

它的可能值是:start end left right center justify。

以下代码显示应用于文本块的 text-align 属性。

p#left {
    text-align: left;
}
p#center {
    text-align: center;
}
p#right {
    text-align: right;
}
p#justify {
    text-align: justify;
}

文本修饰

text-decoration 对文本块应用修饰,如下划线。

其可能的值为: none underline overline line-through blink

默认值为none,不应用修饰。

以下代码显示如何使用text-decoration和text-transform属性。

p  {
    text-decoration: line-through;
    text-transform:  uppercase;
}
p.one {
    text-decoration: underline;
}
p.two {
    text-decoration: overline;
}
p.three {
    text-decoration: line-through;
}
p.four {
    text-decoration: underline overline line-through;
}

文本变换

text-transform 将变换应用于文本块。

其可能的值为: none capitalize uppercase lowercase

默认值为none。

以下代码显示如何使用text-decoration和text-transform属性。

span.lower {
    text-transform: lowercase;
}
span.upper {
    text-transform: uppercase;
}
span.capitalize {
    text-transform: capitalize;
}
span.example {
    background: pink;
}

相关属性

属性描述CSS
letter-spacing设置文本中字符之间的间距1
tab-size设置制表符char大小3
word-break为非CJK脚本设置换行规则3
word-spacing设置文本中单词之间的空格1
word-wrap允许长的内容可以自动换行3
text-align-last最后一行如何对齐3
text-align文本的水平对齐1
text-decoration-color设置文本修饰的颜色3
text-decoration-line设置文本修饰的线条样式3
text-decoration-style集修饰样式3
text-decoration修饰简写属性3
text-indent设置文本索引大小1
text-justify设置对齐方法3
text-overflow设置溢出内容的操作3
text-shadow将阴影添加到文本3
text-transform设置文本的大小写1