Skip Navigation Links
技术文档
·网站建设
·软件使用
·图形设计
·程序开发
·网络应用
·电脑技巧
 
公司介绍
·公司简介
·索仕SRCOS网络应用平台
·索仕网站管理系统
·影视广告制作
·联系我们
 
 

CSS教程(五)

9/27/2007 9:25:33 PM

我们在第2天的教程中学习了字体及控制文字字符的方法.今天我们将学习这些字符、单词和每行的内容之间是如何定位的。我们将学会如何设定字与字之间、字母之间的距离,以及行距(垂直间距)、文字的对齐方式、边距、边框及浮动要素等,列表如下:

  • 字间距
  • 字母间距
  • 行高
  • 文字对齐方式
  • 垂直对齐方式
  • 文字缩位
  • 顶边距、左边距等
  • 空格填充-顶部、左边等等
  • 边框-宽度、颜色、样式等
  • 浮动
  • 清除

很显然,今天我们要学很多东西,所以我们得抓紧时间。让我们开始吧!

先来看一年例子。

下面要学习的属性可以使你做到HTML标签做不到的事情:控制字间距及字母间距。

字间距

利用字间距属性,你可以在字之间加入更的距离:

    H3 { word-spacing: 1em }

你所使用的参数值将加入任何浏览器的缺设置,你可以使用我们昨天谈到的任何种长度单位:

  • in (英寸)
  • cm (厘米)
  • mm (毫米)
  • pt (点数)
  • pc (打字机字间距)
  • em ems
  • ex (x-height)
  • px (象素)

以下为显示结果:

    Behold the power of cheese.

如果你的浏览器不支持这种CSS属性,请点击这里查看显示效果。

如果你看不到任何不同之处,则说明你的览器不支持这种属性,只有MAC机用的IE4能支持这种字间距设置。

字母间距

字母间距可以在IE 4中应用,但Communicator不行,唉...

    H3 { letter-spacing: 10px }

字母间距的功能和字间距的很类似:其参值将被加入到浏览器的缺省设置中,你以使用上述任何一种长度单位。

如果你用的是IE 4,这里是一个例子:

    Behold the power of cheese.

     

对于这两种属性,你都可以使用normal参数。从而使其按照浏览器的原有缺省设置显示。

别沮丧,还有很多CSS属性可以在两种浏览器上都可使用。

下文中就是一个例子。

行与行之间的距离最常用的称呼是行距,而当网页设计者们发现他们能够控制行距时最常用的称呼是"Weee!"

行高

行高简直是上帝发给人间的福音。利用行高我们可以随心所欲地控制行与行之间的垂直距离。

 

    B { line-height: 16pt }

你所用的参数就是相邻两行的基准线(基准线就是英文小写字母如x,a的下阶线,但不包括诸如y,g等字母超过下阶线的部分)之间的垂直距离。注意你所设定的参数将完全代替浏览器的缺省参数。

Netscape Communitor和Internet Explorer在行之前加入行高参数。所以如果你将参数设为10px,浏览器将把文字的第1行以10px的高度显示。

有3种设定行高的方法:

  • 数字
  • 长度单位
  • 比例

用数字设行距

    B { font-size: 12pt;
    line-height: 2 }

当你用数字设定行高的时候,浏览器将利用字号来确定行距:它将字号乘以设定的参数值。所以,在本例中,行高将是24点。显示效果如下:

    Four score and seven years ago,
    the Web wasn't yet a glimmer in
    anyone's eye. No one needed it,
    no one missed it. Eighty-seven
    years from now, what will
    people laugh at us for lacking?

你还可以用小数设定参数值。

(你应该知道IE 3 不支持数字参数值,在IE 3 中使用数字参数将出现大片文字的互相重叠。)

用长度单位设定行距

    B { font-size: 12pt; line-height: 11pt }

设定行高的另一种方法就是利用先前学过的长度单位(em及pt是最常用的单位),以下为显示效果:

    Four score and seven years ago,
    the Web wasn't yet a glimmer in
    anyone's eye. No one needed
    it, no one missed it.
    Eighty-seven years from now,
    what will people laugh at us
    for lacking?

你既可以轻松地将行距缩小也可以将行距放大。有了样式表,这一切都易如反掌!

用比例设定行距

    B { font-size: 10pt; line-height: 140% }

在本例中,行距是长度10points的140%,即14points。明白了吗?

让文字互相重叠!

你可能会问这样的问题:如果行距太小的话,文字岂不就重叠在一起了吗?是这样的。我们来看看这个例子:

    B { font-size: 28pt; line-height: 2pt }

以下为显示效果:

    Whoa.
    Cool.

"Whoa" 使用了浏览器的缺省行高设置。但"Cool"的行高很小所以它和第1行重叠了。 

(Communicator和Internet Explorer对行高的诠释有所不同。 Communicator将只是将文字的上半部分重叠一点,而IE则将其全部重叠。)

如果你计划将你的网页中的某些内容重叠显示,行高设置还不是最佳的选择,因为不同的浏览器对其的支持有差别。在第5天的课程中我们将研究文字及图象布局的最佳方式。

现在我们谈谈段落及图象的对齐和加入段落缩行。

文字对齐

利用文字对齐属性,你可以控制段落的水平对齐:

    H4 { text-align: center }

这项属性只用于整块的内容,如<P>、 <H1>-<H6>、
<BLOCKQUOTE>和 <UL>。

以下为各种选项:

left指将要素左对齐,如本段所示。

right指将要素右对齐,如本段所示。

center指将要素居中,如本段所示。

justify指将要素左右对齐,如本段所示。justify
属性可用于Communicator(两种操作平台)及IE 4
(Windows版), 但不能用
于MAC机的IE 3或IE 4。

截止现在,我们所谈到的只是将CSS用于文字,但CSS 的属性页可以用于其它替代要素(替代要素指用其它内容代替了的要素,图象是最常用的替代内容,还有Java applets,QuickTime movies和其它内容。)

所以我们可以将图象右对齐,如下所示:

day3_page4b.gif (1589 bytes)

(如果你将样式表属性直接加到<IMG>之上,Communicator有时候可能会捣乱。为了安抚它的这种驴脾气,你可以将<IMG>包含在<SPAN>或<DIV>之内,然后将样式表加到<SPAN>或<DIV>上,最好是加在<DIV>上,因为IE 4有时候对于联结到<SPAN>上的样式会闹一点小性子。

垂直对齐

目前浏览器根本还不能支持初衷对齐属性,但愿5.0版的浏览器能够做
到这一点。

    H4 { vertical-align: top }

    垂直对齐可以使你控制文字或替代要素(比如图象)相对于其母体要素的的垂直位置。例如,如果你将一个2x2象素的GIF图象同其母体要素文字的顶部垂直对齐,则该GIF图象将在该行文字的顶部显示。

    以下为各项参数:

  • top将要素顶部同最高的母体要素对齐。
  • bottom将要素的底部同最低的母体要素对齐。 
  • text-top将要素的顶部同母体要素文字的顶部对齐。
  • text-bottom将要素的底部同母体要素文字的底部对齐。
  • baseline将要素的基准线同母体要素的基准线对齐。
  • middle将要素的中点同母体要素的中点对齐。
  • sub将要素以下标的形式显示。
  • super将要素以 上标的形式显示。

    目前只有IE 4能支持这项属性,它支持最后的两项参数。

    文字缩行

    你想使段落缩行吗?(在Internet上呆一段时间之后,你可能已经忘
    了缩行是怎么一回事!)

      P { text-indent: 2em }

      在本段中你就可以看到缩行的应用。该属性只应用于整块的内容。你可以使用任何一种熟悉的长度单位设定缩行。

      你还可以使用比例参数。
      例如,本段
      的缩行为40%的比例,即本段的第1行的起始位置比其正常位置缩进
      了40%。

      (Windows版的IE 4假定比例指相对于整个浏览器窗口。而不是指段落的宽度) 如果你将文字缩行赋予一个负值,则文字第1行的起始位置比其正常位置还偏左。

      本段的文字缩行赋值为-10象素。IE 4对这项属性不太适应,它有可能不显示最初的几个字母。

      充分运用你的缩行威力吧,年轻的杰地战士!

来源:网猴
 
 
 
昆明索仕科技开发有限公司 版权所有 Copyright© 2002-2010 Kunming Source Technology Exploitive Co.,LTD. All Rights Reserved.
电话:0871-5627877 业务QQ:163871 联系我们
本站基于:索仕网站信息管理系统建设 版本 2.0.4325