跳到内容(1) Cob.com.cn

CodeCoke

CSS初级指南·文本

您的位置:首页>>教程>>HTML和CSS网页标准指南>>CSS初级指南>>文本

文本

你可以用大量的属性来改变文本的大小和形态,概括如下:

字体族font-family

这是字体本身的名称,如“Times News Roman”,“Arial”或者“Verdana”(又如“宋体”等中文字体名称--译者著)。

你指定的字体必须存在在用户的电脑上,所以在CSS使用字体会存在某种程度上的不确定性。有少量“安全”的字体(最常用的是Arial,Verdana和Times New Roman)。但你可以指定不止一种字体,只要用半角英文逗号,隔开就行。这样做的目的是如果用户的电脑上没有你指定的第一个字体,浏览器会逐遍寻找罗列的字体直到找到电脑上安装有的字体为止。这很有用因为不同的电脑有时侯有不同的安装字体。所以,例子font-family: arial, helvetica的目的就是用在PC(一般情况下有arial字体而没有helvetica字体)和Apple Mac上(一般有helvetica字体而没有arial字体)。

注意:如果一个字体的名称超过一个单词,它应该用英文双引号括起来,如:font-family: "Times New Roman"

字体尺寸font-size

定义字体的尺寸。必须小心──像标题一样的文本不应该是段落中的大字体而已,你应该使用标题标签(h1h2 等)。甚至,在练习中,你可以使段落文本字体尺寸大于标题(不推荐使用,如果你明智的话)。

字体加粗font-weight

这用来声明文本粗细与否。实际应用中一般只有两种形式:font-weight: bold(粗体)和font-weight: normal(普通)。在理论上,它们的值有bolder(更粗),lighter(更细)

100200300400500600700800或者900,但许多浏览器会摇摇头,说:“我不认为这样”,所以使用boldnormal是比较安全的。

字体样式font-style

这定义文本正与否。可以这样使用 font-style: italic(倾斜)或者font-style: normal(正常)。

文本装饰text-decoration

这用来声明文本是否有划线。可以这样使用:

文本转换text-transform

这可以转换文本的大小写。

text-transform: capitalize——把每个单词的首字母转换成大写。

text-transform: uppercase——把所有的字母都转换成大写。

text-transform: lowercase——把所有的字母都转换成小写。

text-transform: none——?你自己试一试啦。

body 
	font-family: arial, helvetica, serif;
	font-size: 0.8em;
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.5em;
}
a {
	text-decoration: none;
}
strong {
	font-style: italic;
	text-transform: uppercase;
}

文本间距

字母间隔letter-spacing和文本间隔 word-spacing属性分别用在字母间和单词间的距离。它们的值可以是长度或者默认的普通normal

line-height属性为比如段落等元素设置行高,它并不改变字体的尺寸。它的值可以是长度,百分比或者默认的normal

文本水平对齐text-align属性将对元素里的文本向左、右、中间或者两端对齐,自然,它们的值分别left(左)、 right(右)、center(中间)或者 justify(两端)。

文本缩进text-indent属性依据你设置的长度或者百分比值对文本段落的第一行进行缩进。在印刷中经常会用到这样的格式,然而在像网页这样的电子媒体中并不常用。

p {
	letter-spacing: 0.5em;
	word-spacing: 2em;
	line-height: 1.5em;
	text-align: center;
}

延伸阅读