CSS初级教程文本

yibin 2015-02-09 建站源码 523

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

字体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

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

字体加粗font-weight

这用来声明文本粗细与否。实际应用中一般只有两种形式:font-weight: bold(粗体)和font-weight: normal(普通)。在理论上,它们的值有bolder(更粗),lighter(更细),100,200,300,400,500,600,700,800或者900,但许多浏览器会摇摇头,说:“我不认为这样”,所以使用bold和normal是比较安全的。

字体样式font-style

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

文本装饰text-decoration

这用来声明文本是否有划线。可以这样使用:
text-decoration: overline──文本上面的划线。
text-decoration: line-through──穿过文本的删除线。
text-decoration: underline──这应该只使用在连接中,因为用户一般认为连接才有下划线。
这个属性通常用来装饰连接,而 text-decoration: none则是表示没有任何划线。

文本转换text-transform

这可以转换文本的大小写。
text-transform: capitalize把每个单词的首字母转换成大写。
text-transform: uppercase把所有的字母都转换成大写。
text-transform: lowercase把所有的字母都转换成小写。
text-transform: none?你自己试一试啦。

示例代码 [www.dedecms.com]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属性依据你设置的长度或者百分比值对文本段落的第一行进行缩进。在印刷中经常会用到这样的格式,然而在像网页这样的电子媒体中并不常用。

示例代码 [www.dedecms.com]p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5em;
text-align: center;
}

扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询