web前端开发与应用——文本样式

color

color属性用于定义文本的颜色，其取值方式有如下3种：

• 预定义的颜色单词，如red，green，blue等。
• 十六进制颜色值，如#FF0000，#FF6600，#29D794等。实际应用中，也可以使用缩写值，如将#FF0000写为#F00
• RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

代码示例： <p style=color:red>您好</p> 显示效果：

您好

letter-spacing

letter-spacing属性用于定义字符(字母或汉字）间距。其属性值可为不同单位的数值，允许使用负值，默认为normal。

代码示例： <p style=letter-spacing:20px>您好</p> 显示效果：

您好

#### word-spacing word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

代码示例： <p style=word-spacing:20px>hello css</p> 显示效果：

hello css

line-height

line-height属性用于设置行间距，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

代码示例： p{line-height:50px;}

text-align

text-align属性用于设置文本内容水平对齐，相当于html中的align对齐属性。 text-align可用属性值如下：

• left：左对齐（默认值）
• right：右对齐。
• center：居中对齐。

代码示例： <p style=text-align:center>hello css</p> 显示效果：

hello css

text-transform

text-transform属性用于控制英文字符的大小写。 text-transform可用属性值如下：

• none：不转换（默认值）。
• capitalize：首字母大写。
• uppercase：全部字符转换为大写。
• lowercase：全部字符转换为小写。

代码示例： <p style=text-transform:capitalize>hello css</p> 显示效果：

Hello Css

text-decoration

text-decoration属性用于设置文本的下划线，上划线，删除线等修饰效果。 text-decoration可用属性值如下：

• none：没有装饰（正常文本默认值）。
• underline：下划线。
• overline：上划线。
• line-through：删除线。

代码示例： <p style=text-decoration:underline>hello css</p> 显示效果：

hello css

text-indent

text-indent属性用于设置首行文本的缩进。 text-indent属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

代码示例： <p style=text-indent:2em>hello css</p> 显示效果：

hello css

text-shadow

text-shadow属性可以为页面中的文本添加阴影效果。常用子属性为：

• h-shadow用于设置水平阴影的距离
• v-shadow用于设置垂直阴影的距离
• blur用于设置模糊半径
• color用于设置阴影颜色。 综合设置text-shadow属性取值的语法格式为： text-shadow:h-shadow v-shadow blur color

代码示例： <p style="text-shadow:2px 2px 2px blue">hello css</p> 显示效果：

hello css