首页 > 代码库 > 5.1 CSS文字样式
5.1 CSS文字样式
文字和图像是传达信息的基础，是网页设计永远不可缺少的元素，各种各样的文字和图像效果在整个互联网中无处不在。本章从基础的文字设置开始，详细讲解CSS设置各种文字效果的方法，然后再进一步讲解关于图像的几个重要的应用领域。 使用过任何文字处理软件的用户对文字排版都不会陌生。例如在Word软件中可以对文字的字体、大小和颜色等各种属性进行设置。CSS同样可以对HTML页面中的文字进行全面的设置。 一、准备网页 为了便于讲解和实践，首先准备一个非常简单的页面，HTML代码如下。
这个非常简单的网页，由一个h1标题和两个p段落构成。为了对两段文本段落分别进行设置，给它们各自设置了一个类别选择器，p1和p2。在没有设置任何样式时，效果如图1所示。该文件请参考网页学习网CSS教学资源中的“第5章\文字\basic.htm”。lodidance.com  图1 准备好的基本页面效果 二、设置字体 在HTML语言中，文字的字体是通过<font face="字体名称">来设置的，而在CSS中字体是通过font-fanuly属性来控制的。例如针对上面准备好的网页，在样式部分增加如下对p标记的样式设置。
以上语句声明了HTML页面中p标记的字体名称，并且同时声明了两个字体名称。分别是Arial字体和Times New Roman字体，其含义是告诉浏览器首先在访问者的计算机中寻找Arial字体。如果该访问者的计算机中没有Arial字体，就寻找Times New Roman；如果这两种字体都没有，则使用浏览器的默认字体显示。 font-family属性可以同时声明多种字体，字体之间用逗号分隔开。另外，一些字体的名称中间会出现空格，例如上面的Times New Roman，这时需要用双引号将其引起来，使浏览器知道这是一种字体的名称。 注意：不要输入中文（全角）的双引号，而要使用英文（半角）的双引号。 这时在浏览器中的效果如图2所示。可以看到，两个正文段落中的字体都发生了变化。该文件请参考网页学习网CSS教程资源中的”第5章/文字/font-family.htm”。  图2 设置正文字体 注意：很多设计者喜欢使用各种各样的字体来给页面添彩，但这些字体在大多数用户的机器上都没有安装，因此一定要设置多个备选字体，避免浏览器直接替换成默认的字体。最直接的解决方法是将使用了生僻字体的部分，用图形软件制作成小的图片，再加载到页面中。 三、文字大小 在网页中通过文字的大小来突出主题是很常用的方法，CSS是通过font-size属性来控制文字大小的，该属性的值可以使用很多种长度单位，这里分别进行介绍。 1.长度单位px 仍以上面的网页为例子，增加对font-size属性的设置，将其设置为12像素，代码如下。
这时在浏览器中的效果如图3所示。可以看到，此时两个正文段落中的文字都变小了。该文件请参考网页学习网CSS教程资源中的“第5章/文字/font-size.htm”。  图3 设置了正文文字的大小为12像素 代码中的px是一个长度单位，表示在浏览器上1个像素的大小。因为不同访问者的显示器的分辨率不同，而且每个像素的实际大小也不相同，所以px被称为相对单位，也就是相对于1个像素的比例。 在CSS中，除了可以使用px作为长度单位，还可以使用以下5种单位设置大小（包括文字、div的高度和宽度等），这5种单位都披称为绝对长度单位，它们不会随显示器的变化而变化。各个单位的含义如下表所示。
2.长度单位em和ex 此外还有两个比较特殊的长度单位：em和ex。它们与px类似，也是相对长度单位。lem表示的长度是其父元素中字母m的标准宽度，1ex则表示字母x的标准高度。当父元素的文字大小变化时，使用这两个单位的子元素的大小会同比例变化。 例如，在文字排版时，有时会要求第一个字母比其他字母大很多．并下沉显示，就可以使用这个单位。方法是先在上面的HTML中，把第2段文字的第1个字母“T”放入一对<span></span>标记中，并对它设置一个CSS类别，“.firstLIter”。
然后设置它的样式，将font-size设置为2em，并使它向左浮动，代码如下：
这时在浏览器中的效果如图4所示。此时第2段的首字母就变为标准大小的3倍，并因设置了向左浮动而实现下沉显示。该文件请参考网页学习网CSS教程资源中的“第5章/文字/first-letter.htm”。  图4 设置段首的字母放大并下沉显示 3.长度单位% 最后一种单位是使用百分比作为单位，例如“font-size:200%”，表示文字的大小为原来的两倍。lodidance.com 四、行高 在CSS中，还可以设置一个段落中各行文本的高度，这是通过line-height属性设置的。在CSS中line-height的值表示的是两行文字之间基线的距离，也就是每行文字的高度。如果给文字加上下划线，下划线的位置就是文字的基线。 line-height属性的值与CSS中所有设定具体数值的属性一样，可以设定为相对数值，也可以设定为绝对数值。在静态页面中，文字大小固定时常常使用绝对数值，达到统一的效果。而对于论坛和博客这些可以由用户自定义字体大小的页面，通常设定为相对数值，可以随着用户自定义的字体大小而改变相应的行距。 例如，对上面的例子的p标记设置如下CSS规则：
这时在浏览器中的效果如图5所示。每行的高度比原来增大了一些。该文件请参考网页学习网CSS教程资源中的“第5章/文字/line-height-1.htm”。  图5 设置正文的行高 除了可以使用像素等作为行高的单位，也可以不加任何单位，此时行高应写成与字体大小的比值。例如，字体大小是12像素，有下面这行代码：
它所产生的行高效果．与下面的代码的行高效果是相同的。
下面请读者仔细对比一下图4与图5，可以发现在设置了“line-height:18px”之后，图4中下沉显示的段首字母“T”，不再以下沉的方式显示了。如果此时将行高由绝对高度18像素改为相对高度1.5．就会发现字母“T”又下沉最示了，如图6所示。该文件请参考网页学习网CSS教程资源中的“第5章/文字/line-height-2.htm”。  图6 使用相对高度后的效果 分析：12像素的1.5倍正是18像素，行高也没有变化，为什么会影响到前面的字母“T”的位置呢？ 读者可以好好思考一下这个问题。这里考验的是读者是否已经充分理解了CSS的基本性质。答案是这样的，在本教程第1章中曾经重点介绍过CSS的样式具有继承的性质。当p的样式中，将line-height设置为18像素时，字母“T”所在的span是p元素的子元素，因此它继承了这个样式，它的行高也是18像素。这样，尽管它的文字高度变大了，但是它的盒子高度仍然被限制为18像素，旁边的文字翻绕它排版的时候是以盒子为界限的，因此效果就如图5所示了。（此时，字母“T”已经超出了盒子的范围。请读者试验一下，在IE和Firefox中的不同处理方式。） 当把p的line-hright设置为1.5时，这个样式同样被字母“T”所在的span元素继承了．因此当它的文字变为3倍大的时候，行高也随之变大，就会产生如图6所示的效果了。 从这个小例子可以看出，在学习和实际工作过程中有时会遇到一些很细小的地方，其中蕴藏着很深的道理，都值得把它探究清楚。 下面还需要说明两点。 (1) 上面介绍了设置文字的3个最基本的属性，即字体、大小和行高。在CSS中，还可以把它们组合在一条CSS规则中。例如：
这行代码表示使用Arial字体，大小为12像素，行高18像素。注意在字体和行高之间要用斜线隔开。 也可以以相对比例作为行高的数值，例如：
(2) line-height属性可以设置在文本元素中，例如上面的例子就是这样，对p元素设置行高，就是确定了段落中每一行的高度。line-height属性也可以设置在容器元素中，例如对一个div设置line-height属性，那么它里面的文字都将使用这个行高值。
| ||||||||||||
| 编辑：网页学习网 | ||||||||||||
| 本文地址:http://www.lodidance.com/css/jc/680.html |