关注码农话题
做一个实实在在的内行人

CSS 文本

通过使用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

入职你的梦想 VS 变现你的技术

IT面试宝典码农市场