教育改变生活

标题: CSS基础13 文本 [打印本页]
作者: 却尘    时间: 2023-11-9 16:04
标题: CSS基础13 文本
CSS 文本
文本颜色
color 属性用于设置文本的颜色。颜色由以下值指定：
·  颜色名 - 比如 "red"
·  十六进制值 - 比如"#ff0000"
·  RGB 值 - 比如"rgb(255,0,0)"
查看 CSS 颜色值，以获取可能颜色值的完整列表。
页面的默认文本颜色是在 body 选择器中定义的。
实例
body {
color: blue;
}
h1 {
color: green;
}

提示：对于 W3C compliant CSS：如果您定义了 color 属性，则还必须定义 background-color 属性。
文本颜色和背景色
在本例中，我们定义了 background-color 属性和 color 属性：
实例
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}

文本对齐
text-align 属性用于设置文本的水平对齐方式。
文本可以左对齐或右对齐，或居中对齐。
下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：
实例h1 {  text-align: center;} h2 {  text-align: left;} h3 {  text-align: right;}
当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：
实例div {  text-align: justify;}
文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向：
实例p {  direction: rtl;  unicode-bidi: bidi-override;}
垂直对齐
vertical-align 属性设置元素的垂直对齐方式。
本例演示如何设置文本中图像的垂直对齐方式：
实例img.top {  vertical-align: top;} img.middle {  vertical-align: middle;} img.bottom {  vertical-align: bottom;}
文字装饰
text-decoration 属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线：
实例a {  text-decoration: none;}
其他 text-decoration 值用于装饰文本：
实例h1 {  text-decoration: overline;} h2 {  text-decoration: line-through;} h3 {  text-decoration: underline;}
文本转换
text-transform 属性用于指定文本中的大写和小写字母。
它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：
实例p.uppercase {  text-transform: uppercase;} p.lowercase {  text-transform: lowercase;} p.capitalize {  text-transform: capitalize;}
文字缩进
text-indent 属性用于指定文本第一行的缩进：
实例p {  text-indent: 50px;}
字母间距
letter-spacing 属性用于指定文本中字符之间的间距。
下例演示如何增加或减少字符之间的间距：
实例h1 {  letter-spacing: 3px;} h2 {  letter-spacing: -3px;}
行高
line-height 属性用于指定行之间的间距：
实例p.small {  line-height: 0.8;} p.big {  line-height: 1.8;}
字间距
word-spacing 属性用于指定文本中单词之间的间距。
下例演示如何增加或减少单词之间的间距：
实例h1 {  word-spacing: 10px;} h2 {  word-spacing: -5px;}
空白
white-space 属性指定元素内部空白的处理方式。
此例演示如何禁用元素内的文本换行：
实例p {  white-space: nowrap;}
文本阴影
text-shadow 属性为文本添加阴影。
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：
文字阴影效果！
实例h1 {  text-shadow: 2px 2px;}
接下来，向阴影添加颜色（红色）：
文字阴影效果！
实例h1 {  text-shadow: 2px 2px red;}
然后，向阴影添加模糊效果（5px）：
文字阴影效果！
实例h1 {  text-shadow: 2px 2px 5px red;}
所有 CSS 文本属性
  
属性
  
描述
设置文本颜色。
指定文本的方向 / 书写方向。
设置字符间距。
设置行高。
指定文本的水平对齐方式。
指定添加到文本的装饰效果。
指定文本块中首行的缩进。
指定添加到文本的阴影效果。
控制文本的大小写。
指定应如何向用户示意未显示的溢出内容。
与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
指定文本的垂直对齐方式。
指定如何处理元素内的空白。
设置单词间距。





欢迎光临 教育改变生活 (http://bbs.goldoar.com/) Powered by Discuz! X3.2