快捷搜索:

CSS教程(五)

---《网猴》版权所有

我们在第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 Elorer在行之前加入行高参数。以是假如你将参数设为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 Elorer对行高的诠释有所不合。 Communicator将只是将翰墨的上半部分重叠一点,而IE则将其整个重叠。)

假如你计划将你的网页中的某些内容重叠显示,行高设置还不是最佳的选择,由于不合的浏览器对其的支持有区别。在第5天的课程中我们将钻研翰墨及图象结构的最佳要领。

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

翰墨对齐

使用翰墨对齐属性,你可以节制段落的水平对齐:

H4 { text-align: center }

这项属性只用于整块的内容,如

、 -、

和 。

以下为各类选项:

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

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

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

justify指将要素阁下对齐,如本段所示。justify

属性可用于Communicator(两种操作平台)及IE 4

(版), 但不能用

于MAC机的IE 3或IE 4。

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

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

(假如你将样式表属性直接加到之上, Communicator无意偶尔候可能会捣鬼。为了安抚它的这种驴性格,你可以将包孕在或

之内,然后将样式表加到或

上,最好是加在

上,由于IE 4无意偶尔候对付联络到上的样式会闹一点小性质。

垂直对齐

今朝浏览器根本还不能支持初衷对齐属性,但愿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%。

(版的IE 4假定比例指相对付全部浏览器窗口。而不是指段落的宽度) 假如你将翰墨缩行付与一个负值,则翰墨第1行的肇端位置比其正常位置还偏左。

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

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

您可能还会对下面的文章感兴趣: