层叠样式单定位 (Cascading Style Sheets Positioning)

无论对于 Netscape Navigator 4.0 还是 Internet Explorer 4.0, 层叠样式单 (CSS) 都是 DHTML 的基础. CSS 使你能够设定网页上元素的展示方式, 即所谓"样式"(styles). 层叠样式单定位 (CSS-P) 是 CSS 的一个扩展, 它可用来精确控制网页中所有元素的位置. 由于已经有许多很好的关于 CSS 和 CSS-P 的教材, 我就不再赘述了 — 我所要做的工作是以其为基础的.

以下是两个介绍 CSS 和 CSS-P 的相关网址:

尽管这些网站对 CSS 做了详尽的叙述并解释了怎样去实现它, 我还是要在这里重新介绍一下本指南中将涉及到的部份.

段标签 (DIV Tags) 的使用:

当我们使用层叠样式单定位的时候, 通常是将其用在 DIV (段)标签中. 当你把 HTML/文本 放在DIV 中, 一般可称它为"DIV块", 或"DIV元素", 或"CSS层次", 或干脆象我一样称之为"层"(也可译为"层次"). 所以当你在某些与 DHTML 相关的网站或新闻组中看到这些名词的时候, 你就应该知道它们指的是同一个概念 — 一段在已定位的 DIV 中的 HTML.

使用 DIV 的方法跟使用其它标签的方法一样:

<DIV>
This is a DIV tag
</DIV>

单独使用 DIV 标签时它的效果和 <P></P> 并没有什么两样.

可是当我们把 CSS 运用到 DIV 中时, 我们就可以定义这段 HTML 代码在屏幕上显示的具体位置, 还可以定义图形, 或是定义一段文字在 DIV 中的显示方式. 在做这些工作之前, 首先要给这个 DIV 命名一个 ID (就是类似名字的东西):

<DIV ID="truck">
This is a truck
</DIV>

取什么名字完全取决于你, 它可以是任何英文字母和数字(a-z, A-Z, 0-9), 但第一个字符必须是字母.

以下有两种 CSS 的应用方法:

内联样式单 (Inline CSS):

内联样式单是最常用的方法. 我们将以此法演示如何编写 HTML 和 JavaScript.

<DIV ID="truck" STYLE="styles go here">
This is a truck
</DIV>

外部样式标签 (External STYLE tag):

使用此法将得到更好的效果, 但就目前我们的水平来说要写出这样的 CSS 还有一定的难度, 所以我建议你在学完嵌套层之后再进行实践. 在这里我们只是看看它的形式...

<STYLE TYPE="text/css">
<!--
#truck {styles go here}
-->
</STYLE>

<DIV ID="truck">
This is a truck
</DIV>

注意 ID 是如何在 STYLE 中被用来指定 CSS 的样式的.

通用 CSS 属性:

本教程的最终目的是创建出在 Netscape 和 Internet Explorer 中都能正常显示的 DHTML, 因此在使用 CSS 的样式和属性方面有所局限. 下面这些属性基本符合 W3C 的标准.

位置 (position)
决定 DIV 标签放置的位置 -- "relative" 表示 DIV 的位置是较其他 HTML 标签的相对位置, 反之 "absolute" 则表示 DIV 被精确的坐标所定位. Absolute 位置将是此教程的重点话题.
左端 (left)
左端 (距浏览器窗口最左端的象素(pixels)值).
上端 (top)
上端 (距浏览器窗口最上端的象素(pixels)值).
宽度 (width)
DIV 标签的宽. 任何放在 DIV 里的 文本/html 都将被这个值所限制. 如果它未被定义则里面的内容将呈一条直线排列.

注意:
当你想使用动态层时,必须定义宽度. 这是因为在 IE 中宽度的缺省设置为显示屏的整行. 当你移动层的时候, 屏幕底端将出现一个讨厌的滚动条,并导致动态效果速度减慢.

高度 (height)
DIV 标签的高度. 这个性质很少需要用到, 除非你想剪切层.
剪切 (clip)
为"层"定义四边的位置. 它可以将 DIV 放置于已精确定位的矩形当中. 你可以用以下四条边值来定义这个矩形的大小:
clip:rect(top,right,bottom,left);
显示状态 (visibility)
定义 DIV 在屏幕上的显示状态: "visible"(显示), "hidden"(隐藏), 或 "inherit"(固有)(即省缺显示).
第三维度 (z-index)
DIV 标签的堆叠顺序.
背景色 (background-color)
DIV 的背景色. 在 Netscape 中它只能设定文字的背景色. 如果你想用 CSS 来制作层, 就必须用 layer-background-color 再设一遍背景色.
背景色 (layer-background-color)
专门用于 Netscape 的 DIV 背景颜色设定属性.
背景图 (background-image)
Internet Explorer 的背景图设定方式. 在 Netscape 中它只能设定文本的背景图.
背景图 (layer-background-image)
专门用于 Netscape 的 DIV 背景图设定属性.

CSS 的句法与 HTML 的有所不同, 你需要用冒号来分开属性和数值, 再用分号来分开各属性:

position: absolute;
left: 50px;
top: 100px;
width: 200px;
height: 100px;
clip: rect(0,200,100,0);
visiblity: visible;
z-index: 1;
background-color:#FF0000;
layer-background-color:#FF0000;
background-image:URL(filename.gif);
layer-background-image:URL(filename.gif);

在描述 CSS 的属性时你有较大的灵活性,没有必要极尽描述之能事. 空格是被忽略的, 所以你既可以将它们写在同一行, 也可以分成不同的行. 同样, DIV 的省缺单位值为 pixels (象素), 所以在 left, top, width, height 四个值后面不必添加 "px", 尽管这是被要求的.

position:absolute; left:50; top:100; width:200; height:100; clip:rect(0,200,100,0); background-color:#FF0000; layer-background-color:#FF0000;

内联样式单实例:

<DIV ID="divname" STYLE="position: absolute; left: 50px; top: 100px; width: 200px; height: 100px; clip: rect(0,200,100,0); visiblity: visible; z-index: 1;">
</DIV>

外联样式单实例:

<STYLE TYPE="text/css">
<!--
#divname {position: absolute; left: 50px; top: 100px; width: 200px; height: 100px; clip:rect(0,200,100,0); visiblity: visible; z-index: 1;}
-->
</STYLE>

<DIV ID="divname">
</DIV>

一个实例胜过千言万语:

首页 下一课: 通用 JavaScript
copyright 1998 Dan Steinman
Translated by Cartouche YU