CSS 文本样式[下]

文本总汇

文本样式

文本控制

一、文本总汇

CSS文本样式中文本内容的一些设置，样式表如下：

属性名	说明	CSS版本
text-decoration	装饰文本出现各种划线。	1
text-transform	将英文文本转换大小写。	1
text-shadow	给文本添加阴影	3
text-align	设置文本对齐方式方式	1,3
white-space	排版中的空白处理方式	1
letter-spacing	设置文本之间的间距	1
word-spacing	控制单词之间的间距	1
line-height	设置行高	1
word-wrap	控制段词	1
text-indent	设置文本首行的缩进	1

二、文本样式

CSS文本样式有三种：文本装饰、英文大小写转换和文本阴影。

1、text-decoration

p {
text-decoration: underline;
}

解释：设置文本出现下划线。属性值如下表：

值	说明
none	让本身有划线装饰的文本取消掉
underline	让文本的底部出现一条下划线
overline	让文本的头部出现一条上划线
line-through	让文本的中部出现一条删除划线/td>
blink	让文本进行闪烁，基本不支持了

//让本来有下划线的超链接取消
a {
text-decoration: none;
}

2、text-transform

p {
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
}

解释：设置英文文本转换成大小写。

值	说明
none	将已被转换大小写的值恢复到默认状态。
capitalize	将英文单词首字母大写
uppercase	将英文转换为大写字母
lowercase	将英文转换为小写字母

3、text-shadow

p {
text-shadow: 5px 5px 3px red;
}

解释：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。

三、文本控制

CSS文本样式中还有一组对文本进行访问、形态进行控制的样式。

1、text-align

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

解释：指定文本的对齐方式。

值	说明
left	靠左对齐，默认
right	靠右对齐
center	居中对齐
justify	内容两段对齐
start	让文本处于开始的边界
end	让文本处于结束的边界。

2、white-space

p {
white-space: nowrap;
}

解释：处理空白排版方式。

值	说明
normal	默认值，空白符被压缩
nowrap	空白符被压缩，文本不换行
pre	空白符被保留，遇到换行符则换行
pre-line	空白符被压缩，文本会在排满或遇换行符换行。
pre-wrap	空白符被保留，文本会在排满或遇换行符换行

3、letter-spacing

p {
letter-spacing: 50px;
}

解释：设置文本之间的间距。

值	说明
normal	设置默认间距
长度值	比如：”数字”+”px”

4、word-spacing

p {
word-spacing: 14px;
}

解释：设置英文单词之间的间距。

值	说明
normal	设置默认间距
长度值	比如：”数字”+”px”

5、line-height

p {
line-height: 200%;
}

解释：设置段落行高

值	说明
normal	设置默认间距
长度值	比如：”数字”+”px”
数值	比如：1，2，3
%	比如：200%

6、word-wrap

p {
word-wrap: break-word;
}

解释：让过长的英文单词断开。

值	说明
normal	单词不断开
break-word	断开单词

7、text-indent

p {
text-indent: 20px;
}

解释：设置文本首行的缩进

值	说明
normal	设置默认间距
长度值	比如：”数字”+”px”