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浏览器查看该效果。