晓宁博客

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

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

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

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

字间距

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

H3 { word-spacing: 1em }

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

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

以下为显示结果：

Behold the power of cheese.

如果你看不到任何不同之处，则说明你的览器不支持这种属性，只有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和其它内容。）

 

所以我们可以将图象右对齐，如下所示：

 

如果你将样式表属性直接加到<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对这项属性不太适应，它有可能不显示最初的几个字母。

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

  我们都知道可以用HTML设定边距，但你必须使用表格，别无它法。而样式表则......
  
  快速定义边距

  首先，我们应该了解样式表语言的术语，便我们理解正在谈什么。每一个整块的素或替代要素都包含在样式表生成器称为box的容器之内。box包括：

  • 要素本身
  • 围绕要素的空格填充（padding）
  • 围绕空格填充的边框（border）
  • 围绕边框的边距（空白－margin）

  图示如下：

   

  你可以分别控制空格填充、边框和边距，如我们即将做的。

  顶边距、底边距、左边距和右边距
  
  这4项属性可以使你控制一个要素的四周的边距。如下：

  H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }

  你可以看到，每一个边距都可以有不同的置。或者你可以设置一个边距，然后让览器用缺省设置设定其它的几个边距。可以将边距应用于文字和替代要素（如象）。

  设定边距参数值最明显的方法是利用长度位：px(象素）、pt（点数）等。你也可以用比例值设定边距。
  
   

  将边距值设为负值，你就可以将两个要素叠在一起，例：

  Books

  are mind food

  上例中， "are mind food" 的底边距为－55象素，右边距为60象素。

  使用负值使要素重叠的的缺陷是不同的浏器对其处理方式不同。比如，在显示上例子时，不同的4种主要浏览器（Communicator for PC, Communicator for Mac, IE for PC, IE for Mac）对文字重叠的程度不同。

  另一个缺陷是你不能完全控制位于底部的内容，而且不同的浏览器对其显示也不同。例如， Communicator总是将图象显示在文字的上部。 IE似乎是将个要素按照其载入浏览器窗口的顺序显示各要素。

  换句话说，如果你打算将几个要素叠放在一起，就不要对边距使用负值。今天的教程将教你如何叠放个要素。

  浏览器对该属性的支持方面还应注意以下几点：

  • 当你在IE 3中使用标尺单位(如英寸和厘米）时，IE 3有时会加大底边距。同样，有些HTML标签可以适用底边距，有些则不能，
  • IE 4有时在对替代要素（如图象）设定左边距时会出现问题，你可以将图象包在一个<DIV>中，然后给<DIV>设定样式。

  顶空格填充，底空格填充，左空格填充和右空格填充

  空格填充的作用类似于边距控制，你可以设定一个要素的前后左右的空格填充的尺寸。

  H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px }

  你可以使用任何一种长度单位或比例值设定空格填充。其使用方法同边距的属性。

  但是空格填充不能使用负值（而且，IE 3不支持空格填充属性）。

  下面我们将探讨位于边距和空格填充之间的边框。

  有几种样式表属性可以将网页要素周围加上边框。
  
  （注意：IE 3和IE 4不支持任何边框属性。）

  顶边框宽度，底边框宽度，左边框宽度和右边框宽度

  你可以控制整个边框的宽度，也可以分别控制每一边的边框宽度：

  H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px }

  以下是上述CSS规则的显示结果：

  你还可以给替代要素加上边框，很好玩，是吧？

  你无须给一个要素的每一边都加上边框。

  你可以使用上述任何一种长度单位设定边框宽度，也可以使用内置关键字设定宽度：

  本段文字的顶边框宽度参数值为thin。

  本段文字的顶边框宽度参数值为medium。

  本段文字的顶边框宽度参数值为thick。

  如果你想使边框四面应用相同的宽度，很简单，使用border-width标签就可一次完成，例：

  IMG { border-width: 1in }

  边框颜色

  例：

  P { border-color: green; border-width: 3px }

  本段文字显示上述代码的执行效果。

  你可以使用浏览器认可的颜色或者直接使用RGB参数值，例：

  H4 { border-color: #FF0033; border-width: thick }

  如果你想使边框的四边显示不同的颜色，你可以在设置中分别列出各种颜色：

  P { border-color: #666699 #FF0033 #000000 #FFFF99; border-width: 3px }

  浏览器将第1种颜色理解为顶边框的颜色参数值，第2种颜色为右边框，然后是底边框，然后是左边框。

  本段文字显示上述代码的执行效果。

  注意： Communicator 不能识别多色彩，在Communicator中，你只能使用一种颜色。（如果你使用多色彩，Communicator很有可能用蓝色显示整个边框。我们也对此感到莫名其妙）

  如果不使用边框颜色属性，则边框将以要素自身的颜色显示边框颜色。

  边框样式

  你还可以设定边框线的样式，例：

  P { border-style: double; border-width: 3px }

  可以使用的关键字参数值如下：

  • solid
    
  • double
    
  • dotted
    
  • dashed
    
  • groove
    
  • ridge
    
  • inset
    
  • outset

  注意：Communiactor只支持其中的几种关键字属性。

  我们在网页中经常看到浮动的图象和表格，只需对一个<IMG>标签使用ALIGN=left属性，文字就会绕到浮动图象的右边继续显示。样式表对于浮动要素有一个更为灵活的语法，也就是本篇中将要谈到的主题。

  （IE3和IE 4不支持本页中谈到的任何功能。如果你使用IE 4，你将会看到一些奇怪的格式。）

  浮动

  浮动属性使你能将一个要素周围用文字包裹，不仅仅是包裹图象，而且能包裹整块的文字。

  H4 { float: left }

  本标题文字为向左浮动。

  你可以看到这项CSS规则应用于<H4>的文字。而本段内容则包裹在标题文字的右下边，就象是用文字包裹图象时的效果那样。你也可以使用向右浮动的参数值。

  如果浮动要素周围的边距太小，你可以使用之前学过的空格填充属性给它加大四周的空间（但似乎使用边距会造成问题）。

  清除

  如果你想使一段文字包裹某一要素，而下一段文字不包裹，你可以使用clear属性，很象HTML的CLEAR属性的用法（例： CLEAR=right）。

  P { clear: left }

  例：

   

  第1、2段文字包裹了向左浮动的第1幅图象。

  而使用了清除（clear）属性后，第4、5段文字中只有第4段包裹了图象，而第5段文字没有包裹。

   

 

原创文章如转载，请注明：转载自晓宁博客〖http://www.grnnet.com/〗

本文链接地址：http://www.grnnet.com/post/35.html