5.1 CSS文字样式 / 憋错料

文字和图像是传达信息的基础，是网页设计永远不可缺少的元素，各种各样的文字和图像效果在整个互联网中无处不在。本章从基础的文字设置开始，详细讲解CSS设置各种文字效果的方法，然后再进一步讲解关于图像的几个重要的应用领域。

使用过任何文字处理软件的用户对文字排版都不会陌生。例如在Word软件中可以对文字的字体、大小和颜色等各种属性进行设置。CSS同样可以对HTML页面中的文字进行全面的设置。

一、准备网页

为了便于讲解和实践，首先准备一个非常简单的页面，HTML代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页学习网-Head Line</title>
<style type="text/css">
/*这里填写CSS代码*/
</style>
</head>
<body>
<h1>Head Line</h1>
<p class="p1">
he Internet Society mission is to achieve a world in which
everyone everywhere is connected to an open and universally accessible Internet.
</p>
<p class="p2">
The Internet Society’s mission is to achieve a world in which everyone everywhere
is connected to an open and universally accessible Internet.
这里省略其他文字
</p>
</body>
</html>

这个非常简单的网页，由一个h1标题和两个p段落构成。为了对两段文本段落分别进行设置，给它们各自设置了一个类别选择器，p1和p2。在没有设置任何样式时，效果如图1所示。该文件请参考网页学习网CSS教学资源中的“第5章\文字\basic.htm”。lodidance.com

图1 准备好的基本页面效果

二、设置字体

在HTML语言中，文字的字体是通过<font face="字体名称">来设置的，而在CSS中字体是通过font-fanuly属性来控制的。例如针对上面准备好的网页，在样式部分增加如下对p标记的样式设置。

<style type="text/css">
p{
font-family: Arial, "Times New Roman";
}
</style>

以上语句声明了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像素，代码如下。

<style type="text/css">
p{
font-family:Arial;
font-size:12px;
}
</style>

这时在浏览器中的效果如图3所示。可以看到，此时两个正文段落中的文字都变小了。该文件请参考网页学习网CSS教程资源中的“第5章/文字/font-size.htm”。

图3 设置了正文文字的大小为12像素

代码中的px是一个长度单位，表示在浏览器上1个像素的大小。因为不同访问者的显示器的分辨率不同，而且每个像素的实际大小也不相同，所以px被称为相对单位，也就是相对于1个像素的比例。

在CSS中，除了可以使用px作为长度单位，还可以使用以下5种单位设置大小（包括文字、div的高度和宽度等），这5种单位都披称为绝对长度单位，它们不会随显示器的变化而变化。各个单位的含义如下表所示。

长度单位	说明
in	inch，英寸
cm	ccnlimcler，厘米
mm	millimeter，毫米
pt	point，印制的点敷，在一般的显示器中1pt相当于1/72inch
pc	pica，1pc=12pt

2.长度单位em和ex

此外还有两个比较特殊的长度单位：em和ex。它们与px类似，也是相对长度单位。lem表示的长度是其父元素中字母m的标准宽度，1ex则表示字母x的标准高度。当父元素的文字大小变化时，使用这两个单位的子元素的大小会同比例变化。

例如，在文字排版时，有时会要求第一个字母比其他字母大很多．并下沉显示，就可以使用这个单位。方法是先在上面的HTML中，把第2段文字的第1个字母“T”放入一对<span></span>标记中，并对它设置一个CSS类别，“.firstLIter”。

<p class="p2"><span class="firstLetter">T</Span>he……

然后设置它的样式，将font-size设置为2em，并使它向左浮动，代码如下：

.firstLetter{
font-size:3em;
float:left;
}

这时在浏览器中的效果如图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规则：

line-height:18px;

这时在浏览器中的效果如图5所示。每行的高度比原来增大了一些。该文件请参考网页学习网CSS教程资源中的“第5章/文字/line-height-1.htm”。

图5 设置正文的行高

除了可以使用像素等作为行高的单位，也可以不加任何单位，此时行高应写成与字体大小的比值。例如，字体大小是12像素，有下面这行代码：

line-height:1.5;

它所产生的行高效果．与下面的代码的行高效果是相同的。

line-height:18px;

下面请读者仔细对比一下图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规则中。例如：

font:12px/18px Arial;

这行代码表示使用Arial字体，大小为12像素，行高18像素。注意在字体和行高之间要用斜线隔开。

也可以以相对比例作为行高的数值，例如：

font:12px/1.5 Arial;

(2) line-height属性可以设置在文本元素中，例如上面的例子就是这样，对p元素设置行高，就是确定了段落中每一行的高度。line-height属性也可以设置在容器元素中，例如对一个div设置line-height属性，那么它里面的文字都将使用这个行高值。

编辑：网页学习网

本文地址:http://www.lodidance.com/css/jc/680.html

5.1 CSS文字样式,布布扣,bubuko.com

时间： 2024-10-12 08:46:30

5.1 CSS文字样式

5.1 CSS文字样式的相关文章

百度前端学习日记08——CSS文字样式，边框，背景

CSS系列：CSS文字样式

第七章 CSS文字样式

CSS文字样式

CSS文字样式属性

CSS+DIV网页样式与布局——文字样式&段落（一）

4 css文本和文字样式

Bootstrap_排版_文字样式

2015-09-21CSS：引入方式、选择器、注释、文字样式