CSS学习（2）

最新推荐文章于 2025-12-17 09:52:18 发布

原创最新推荐文章于 2025-12-17 09:52:18 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #学习 #css3

本文介绍了CSS中设置文本样式的各种属性，包括使用color属性改变文本颜色，text-align属性调整文本对齐方式，如左对齐、居中和右对齐，以及vertical-align属性用于元素的垂直对齐。此外，还讨论了text-decoration属性去除文本下划线，text-transform属性控制文本大小写，以及如何通过text-indent、letter-spacing、line-height和word-spacing调整文本的缩进、字符间距、行高和单词间距。同时提到了text-shadow属性为文本添加阴影效果，增强了文本的视觉呈现。

CSS文本
文本颜色
color 属性用于设置文本的颜色。颜色由以下值指定：

颜色名 - 比如 “red”
十六进制值 - 比如 “#ff0000”
RGB 值 - 比如 “rgb(255,0,0)”

查看 CSS 颜色值，以获取可能颜色值的完整列表。

页面的默认文本颜色是在 body 选择器中定义的。

文本对齐
text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

direction 和 unicode-bidi 属性可用于更改元素的文本方向
vertical-align 属性设置元素的垂直对齐方式
实例：

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

文字装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线。

text-decoration 值用于装饰文本

文本转换

text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

文字

text-indent 属性用于指定文本第一行的缩进

letter-spacing 属性用于指定文本中字符之间的间距

line-height 属性用于指定行之间的间距

word-spacing 属性用于指定文本中单词之间的间距

文本阴影

text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）