5.1 CSS文字样式

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

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

一、准备网页

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

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

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


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

二、设置字体

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

  1. <style type="text/css"> 
  2. p{  
  3.     font-family: Arial, "Times New Roman";  
  4. }  
  5. </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像素,代码如下。

  1. <style type="text/css"> 
  2. p{  
  3.  font-family:Arial;  
  4.  font-size:12px;  
  5. }  
  6. </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”。

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

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

  1. .firstLetter{  
  2.     font-size:3em;  
  3.     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规则:

  1. line-height:18px

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


图5 设置正文的行高

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

  1. line-height:1.5

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

  1. 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规则中。例如:

  1. font:12px/18px Arial

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

也可以以相对比例作为行高的数值,例如:

  1. 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文字样式,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。