CSS3文本各属性的含义及相关用法

1.字体样式

字体基本属性包括字体类型、字体大小、颜色、粗细、修饰线、斜体、大小写格式等。

1.1字体类型、大小和颜色

使用font-family属性可以定义字体类型。用法如下：

font-family:name

name表示字体名称，或字体名称列表。多个字体类型按优先顺序排列，以逗号隔开，如果字体名称包含空格，则应使用引号括起。

使用font-size属性可以定义字体大小。

使用color属性可以定义字体颜色。

color:color

参数color表示颜色值，可以为颜色名、十六进制值、RGB等颜色函数。

1.2粗体、斜体和下划线

font-weight属性可以定义字体粗细。

normal表示默认值，表正常字体为400；bold表粗体为700；

font-style属性可以定义字体倾斜效果，用法如下：

font-style：normal | italic | oblique

text-decoration属性定义字体修饰线效果，用法如下：
text-decoration：none || underline || blink || overline || line-through

blink表示闪烁效果；line-through表示贯穿效果；overline表示上划线效果。

1.3变体和大小写

使用font-variant属性可以定义字体的变体效果。用法如下：

font-variant:normal | small-caps

normal为默认值，表示正常字体；small-caps表示小型的大写字母字体。font-variant仅支持拉丁字体，中文字体没有大小写效果之分。

使用text-transform属性可以定义字体大小写效果。用法如下：
text-transform：none | capitalize | uppercase | lowercase

其中none为默认值，表示无转换发生；capitalize表示将每个单词的第一个字母转换为大写，其余无转换发生；uppercase表示把所有字母全都转换为大写；lowercase表示把所有字母转换为小写。

2.文本格式

字体属性以font为前缀命名，文本属性以text为前缀命名，下面重点介绍文本的基本格式。

2.1文本对齐

使用text-align属性可以定义文本的水平对齐方式。用法如下：
text-align：left | right | center | justify

其中left为默认值，表示左对齐；right为右对齐；center为居中对齐；justify为两端对齐。

CSS3为text-align属性新增加了多个属性值，简单说明如下：

• justify：内容两端对齐。CSS2曾经支持过，后来放弃。
• start：内容对齐开始边界。
• end：内容对齐结束边界。
• match-parent：与inherit（继承）表现一致。
• justify-all：效果等同于justify，但还会让最后一行也两端对齐。

由于大部分浏览器对这些新属性值的支持不是很友好，因此暂时忽略。

使用vertical-align属性可以定义文本垂直对齐。用法如下：
vertical-align：auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length

取值简单说明如下：

• auto：自动对齐。
• baseline：默认值，基线对齐。
• sub：下标。
• super：上标。
• top：顶端对齐
• text-top：文本顶端对齐
• middle：居中对齐
• bottom：底端对齐
• text-bottom：文本底端对齐
• length：自定义对齐位置，长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说是0%。

各属性值对应的含义如下：

2.2文本间距

文本间距包括：字距 和 词距，字距表示字母之间的距离，词距表示单词之间的距离。
letter-spacing属性可以定义字距，word-spacing属性可以定义词距。取值都是长度值，默认为normal，表示默认距离。

例如:
在 < body>标签中输入两行段落文本：

<p class="lspacing">letter spacing word spacing (字间距) </p>
<p class="wspacing">letter spacing word spacing(词间距)</p>

< style>标签内部可这样定义字距和词距：

.lspacing {letter-spacing:1em;}
.wspacing {word-spacing:1em;}

2.3行高

使用line-height属性可以定义行高。用法如下：

line-height：normal | length

其中normal表示默认值，约为1.2em；length为长度值或百分比，允许为负值。

2.4缩进

使用text-indent属性可以定义首行缩进。用法如下：

text-indent：length

length表示长度值或百分比，允许为负值。建议以em为单位，em表示一个字距，这样可以让缩进效果更整齐、美观。

text-indent取负值可以设计悬垂缩进。使用margin-left和margin-right可以设计左右缩进。

p {text-indent:2em;} /*首行缩进2个字距*/

p:first-of-type {/*匹配第一段文本，该段文本为引用内容*/
	margin-left:2em;
	margin-right:2.5em;
	padding-left:0.5em;
	border-left:solid 10px #bbb;
}

2.5换行

使用word-break属性可以定义文本自动换行。用法如下所示：

word-break:normal | keep-all | break-all

normal:默认值，允许在字内换行
keep-all：不允许在字内断开。
break-all：与normal相同