CSS 文本

CSS 文本属性

CSS 文本属性可定义文本的外观,如文本颜色、文本缩进、文本对齐方式、字符间距、装饰文本、阴影效果等。

CSS 文本颜色

“color”属性用于设置文本颜色。

例子:

p{ color: #ff0000; }
p{ color: red; }

CSS 文本行高

“line-height”属性用于设置文本行高。取值为由浮点数字和单位标识符组成的长度值或百分比,如果不设定该属性则采用默认行高。

例子:

p{ line-height:1.5em; }

该例子表示设定行高为1.5倍。

CSS 文本缩进

“text-indent”属性用于设置文本缩进。

例子:

p { text-indent: 2em; }

该例子表示首行缩进两个字符。

该属性值可以使用负值,首行文字可左移,而达到如常见的如“悬挂缩进”等效果。在使用负值时,可能造成浏览器无法显示左移部分,那么通常会使用如“内边距”等样式以辅助使用:

p { text-indent: 2em; padding-left: 5em; }

关于“内边距”,参见《CSS 框模型》内容。

CSS 文本对齐

“text-align”属性用于设置文本对齐方式,可能的取值有:

取值 说明
left 默认值,左对齐。希伯来语和阿拉伯语之类的的语言,text-align 则默认为 right
right 右对齐
center 居中对齐
justify 两端对齐
inherit 规定应该从父元素继承 text-align 属性的值

例子:

p{ text-align: center; }

CSS 字符间距

“word-spacing”属性用于设置文本颜色,其可能取值如下:

取值 说明
normal 默认值
数值 由浮点数字和单位标识符组成的长度值,允许为负值
inherit 规定应该从父元素继承 text-spacing 属性的值

例子:

p{ word-spacing: 10px; }

提示

CSS 把“字(word)”定义为任何非空白符字符组成的串,并由某种空白字符包围。根据这个定义,意味着采用象形文字的语言(如汉字)或非罗马书写体往往无法指定字间隔。

CSS 文本装饰

“text-decoration”属性用于设置文本装饰效果,其可能取值如下:

取值 说明
none 默认值,无装饰
underline 下划线
line-through 贯穿线
overline 上划线
blink 闪烁
inherit 规定应该从父元素继承 text-decoration 属性的值

例子:

p{ text-decoration: line-through; }

CSS 文本阴影效果

“word-shadow”属性可以给文字以漂亮的立体阴影效果,其语法为:

text-shadow: 颜色 长度 第二长度 作用距离;

参数说明如下:

参数 说明
颜色 指定投影的颜色
长度 指定阴影的水平延伸距离,由浮点数字和单位标识符组成的长度值,可为负值
第二长度 同长度,只是效果为垂直方向
作用距离 指定迷糊效果的作用距离,由浮点数字和单位标识符组成的长度值,不可为负值。如果仅仅需要模糊效果,将前两个长度全部设定为0

例子:

p{ text-shadow: gray 1px 1px 3px; }

该例子表示文字阴影为灰色,投影向右及向下延伸1像素,模糊作用效果距离为3像素。

提示

低版本IE浏览器可能无法支持该属性,请用高版本IE浏览器或非IE浏览器查看该效果。

评论于2016-12-18日起不再显示。

5idev.com(我爱开发网) — 提供最好的 XHTML教程DIV+CSS教程JavaScript教程PHP教程ThinkPHP教程