文本样式
- 文本颜色
- 水平对齐方式
- 垂直对齐方式
- 首行缩进
- 行高
- 文本装饰
- 文本阴影
| 属性 | 说明 | 示例 |
|---|---|---|
| color | 设置文本颜色 | color：#00C; |
| text-align | 设置文本水平对齐方式 | text-align: right; |
| vertical-align | 设置文本垂直对齐方式 | vertical-align: middle; |
| text-indent | 设置文本首行缩进 | text-indent: 32px; |
| line-height | 设置文本行高 | line-height: 32px; |
| text-decoration | 设置文本装饰 | text-decoration: underline |
| text-shadow | 设置文本阴影 | text-shadow: tomato 32px -32px 7px; |
文本颜色
CSS Code ：
{ color: tomato ; } // 颜色名写法
{ color: #EEFF66; } // HEX值（十六进制）写法
※ 当六位颜色值相邻数字两两相同时，可两两缩写为一位。如"#EEFF66"可合写为"#EF6"
{ color: rgb(32,32,32); } // RGB写法
{ color: rgb(32%,32%,32%); } // RGB百分比写法
{ color: rgb(32,32,32,0.5); } // RGBA写法
※以上R、G、B三个参数，正整数的取值范围为
0 ~ 255
，百分比的取值为
0% ~100%
，超出范围值将截取最近的取值极限。
※在CSS3中，RGBA在RGB的基础上增加了Alpha透明度的参数，透明通道取值为
0 ~ 1
。
表示
完全透明
，
1
表示
完全不透明
。
水平对齐方式
| 值 | 说明 |
|---|---|
| left | 把文本排列到左边 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 把文本两端对齐 |
CSS Code ：
text-align属性的
默认值
为
left
。
垂直对齐方式
※vertical-align
只能用来指定行内元素（inline）或表格单元格元素（table-cell）
的垂直对齐方式，而对于像<p>、<div>等这样的
块级元素是不起作用的
。
因此，它经常用来设置文本与图片的对齐方式。
HTML Code：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置文本与图片的对齐方式</title>
<style type="text/css">
body img:nth-of-type(1){ vertical-align: top; } //顶对齐
body img:nth-of-type(2){ vertical-align: middle; } //垂直居中对齐
body img:nth-of-type(3){ vertical-align: bottom; } //底对齐
</style>
</head>
<body>
<img src="微微一笑很倾城.jpg" width="300" /> 微微一笑很倾城
<br />
<img src="微微一笑很倾城.jpg" width="300" /> 微微一笑很倾城
<br />
<img src="微微一笑很倾城.jpg" width="300" /> 微微一笑很倾城
</body>
</html>
Result：
有关vertical-align属性的详细介绍请跳转至#
首行缩进
| 值 | 说明 |
|---|---|
| em | 倍数（相对长度单位，相对于当前对象内文本的字体尺寸） |
| px | 像素 |
CSS Code ：
{ text-indent: 2em; }
{ text-indent: 32px; }
※按照中文排版的习惯，通常要求段首缩进两个字符。因此，在设置段落缩进时，使用em单位最为合适，通常设置为
2em
。
行高
| 值 | 说明 |
|---|---|
| em | 倍数（相对长度单位，相对于当前对象内文本的字体尺寸） |
| px | 像素 |
CSS Code ：
{ line-height: 2em; }
{ line-height: 32px; }
文本装饰
| 值 | 说明 |
|---|---|
| none | 标准文本 |
| overline | 设置文本的上划线 |
| underline | 设置文本的下划线 |
| line-through | 设置文本的删除线 |
HTML Code ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本装饰</title>
<style type="text/css">
body span:nth-of-type(1){ text-decoration: none; } //标准文本
body span:nth-of-type(2){ text-decoration: overline; } //上划线
body span:nth-of-type(3){ text-decoration: underline; } // 下划线
body span:nth-of-type(3){ text-decoration: line-through; } //删除线
</style>
</head>
<body>
<span>微微一笑很倾城</span>
<br /><br />
<span>微微一笑很倾城</span>
<br /><br />
<span>微微一笑很倾城</span>
<br /><br />
<span>微微一笑很倾城</span>
</body>
</html>
Result：
text-decoration属性的
默认值
为
none
。
文本阴影
语法顺序 ：
{ text-shadow: color x-offset y-offset blur-radius; }
（x轴位移）（y轴位移）（阴影模糊半径）
CSS Code ：
| 说明 | |
|---|---|
| x-offset | x轴位移，指定阴影水平位移量，取值为正值或负值 如果为正值：阴影在对象的右边；如果为负值：阴影在对象的左边 |
| y-offset | y轴位移，指定阴影垂直位移量，取值为正值或负值 如果为正值：阴影在对象的底部；如果为负值：阴影在对象的顶部 |
| blur-radius | 阴影模糊半径，代表阴影向外模糊的范围，取值只能为正值。 如果为0，表示不具有模糊效果 |
我寻见一片海 碧蓝且耀着光
大片船只航行其上 都向着远方
Shared by Foriver_江河
© 1997-8023 江河 All Rights Reserved.