快捷搜索:

CSS教程(六)

---《网猴》版权所有

我们都知道可以用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无意偶尔在对替代要素(如图象)设定左边距时会呈现问题,你可以将图象包在一个

中,然后给

设定样式。

顶空格添补,底空格添补,左空格添补和

右空格添补

空格添补的感化类似于边距节制,你可以设定一个要素的前后阁下的空格添补的尺寸。

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

你可以应用任何一种长度单位或比例值设定空格添补。其应用措施同边距的属性。

然则空格添补不能应用负值(而且,IE 3不支持空格添补属性)。

下面我们将探究位于边距和空格添补之间的边框。

有几种样式表属性可以将网页要素周围加上s2es@#边框。

(留意: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只支持此中的几种关键字属性。

我们在网页中常常看到浮动的图象和表格,只需对一个标签应用ALIGN=left属性,翰墨就会绕到浮动图象的右边继承显示。样式表对付浮动要素有一个更为机动的语法,也便是本篇中将要谈到的主题。

(IE3和IE 4不支持本页中谈到的任何功能。假如你应用IE 4,你将会看到一些稀罕的款式。)

浮动

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

H4 { float: left }

本标题翰墨为向左浮动。

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

假如浮动要素周围的边距太小,你可以应用之前学过的空格添补属性给它加大年夜四周的空间(但彷佛应用边距会造成问题)。

清除

假如你想使一段翰墨包裹某一要素,而下一段翰墨不包裹,你可以应用clear属性,很象HTML的CLEAR属性的用法(例: CLEAR=right)。

P { clear: left }

例:

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

而应用了清除(clear)属性后,第4、5段翰墨中只有第4段包裹了图象,而第5段翰墨没有包裹。

小问题:若何只应用CSS和HTML而无须gif就制造出着落阴影的效果?谜底见翌日的课程。

本日是个好气象。我们扩展了串接样式表等方面的进修,将翰墨和图象都置于我们的自由节制之下。它使我们可以做到通俗的HTML标签不能做到的工作。

以下是我们本日进修内容的总结:

* 字间距设定字与字之间的间隔。

* 字母间距设定每个字母之间的间隔。

* 行高设定每行翰墨之间的垂直间隔。

* 翰墨对齐用于设定段落的左、右对齐、居中和阁下两边对齐。

* 垂直对齐用于垂直对齐翰墨。

* 翰墨缩行可以使段落缩行。

* 各类边距属性设定环抱翰墨块、图等的边距。

* 空格添补属性用于设定空格添补的性。

* 边框属性用于设定边框的宽度、颜和样式。

* 浮动和清除用于节制各要素之间的包裹。

翌日我们将继承探索串接样式表的神奇魅力。

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