Cascading Style Sheets (CSS) 是 DHTML 的基础。 CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning (CSS-P)是 CSS 的一个扩展, 它可用来控制任何东西在网页上或是说在窗口中的位置. 请你记住这两个名词：CSS 和 CSS－P。 下面四个英文网址提供了详细的关于 CSS 和 CSS-P 的文件和解释。

• Official CSS-Positioning Working Draft
• CSS-Positioning for Microsoft Internet Explorer
• Netscape Dynamic HTML Guide
• Builder.com's CSS Guide

而这里我只是给出你大概的轮廓使得你可以了解它们以及看懂以后 的课程. 我们会在以后的课程里再回过头来仔细讨论 CSS 的.

使用 DIV Tags

当我们使用 CSS-P 的时候， 我们主要把它用在 DIV (division) tag 上. 当你把文字, 图象, 或其他的放在 DIV 中， 它可称作为 "DIV block", 或 "DIV element" 或 "CSS-layer", 或干脆叫 "layer". 而中文我们把它称 作 "层次". 所以当你以后看到这些名词的时候， 你就知道它们是指 一段在 DIV 中的 HTML。

使用 DIV 的方法跟使用其他 tag 的方法一样

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

如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使 用 <P></P> 是一样的。

但当我们把 CSS-P 用到 DIV 中去以后， 我么就可以严格设定它的 位置. 首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说 是它的名字。比如说我们给下面这个 DIV 的名字是 truck. 给名字的 目的是我们以后可用 JavaScript 来控制它， 比如说移动它或改变它 的一些性质等等。

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

给层次取什么名字是随意的, 名字可以是任何英文字母和数字, 但第 一个必须是字母. 有两种把 CSS-P 应用到 DIV 的方法.

Inline CSS:

Inline 是最常用的方法。

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

我们下面将会告诉你都有哪些 style 和如果把它们写到 DIV 里。

External STYLE tag:

使用 External 方法的结果是一样的。 我们会在以后的课程里再详细 解释这种方法. 现在我们主要讨论 Inline 方法。 请注意在 External 方 法里， 在 STYLE 里的 ID 和 DIV 里的关系。

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

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

Cross-Browser CSS 性质:

我们这个课程的主要目的是让你写出的网页在 NS4 和 IE4 上都能工 作， 所以我们主要讨论那些对俩者都通用的性质。 下面这些性质符合由 W3C 给出的标准。

position

决定 DIV tag 是如何放置的。 "relative" 意思是DIV的位置是相 对于其他 tag 的。而"absolute" 是说 DIV tag 的位置是相对于它 所在的窗口. 这里主要讨论 absolute.

left

相对于窗口左边的位置 (pixels)

top

相对于窗口上边的位置 (pixels)

width

DIV tag 的宽度。 所有在 DIV 里的文字或html都在里面。

height

DIV tag 的高度。 这个性质很少用除非你想 Clip 层次。

clip

给出 layer 的 clipping (可看的见的) 部分. Clip 可使得 DIV 显示 为一个可以定义的很准确的方块。 你可以用以下的四个值来 给出这个方块的在 DIV 位置和大小。
clip:rect(top,right,bottom,left);

visibility

隐蔽或展现DIV 根据它的值 "visible", "hidden", "inherit".

z-index

DIV tag 的立体位置。 值越大 DIV 的位置越高。

background-color

DIV 背景的颜色。

layer-background-color

Netscape 的 DIV 背景颜色.

background-image

DIV 的背景图象

layer-background-image

Netscape 的 DIV 的背景图象。

CSS 的语法是用冒号来分开性质和它的值, 用半分号来分开性质:

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 的格式比较活。 你不必定义所有的性质。 空格可用在定义中 间使得原程序比较清楚。

Inline Example:

<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;
	background-color:#FF0000; 
	layer-background-color:#FF0000";">
</DIV>

External Example:

<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;
	background-color:#FF0000; 
	layer-background-color:#FF0000";}
-->
</STYLE>

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

小结

这一节我们介绍了如何定义一个 DIV tag, 也就是我们所说的 layer 或说是层次. 以及如何用 CCS 来给出它的性质。请你自己先定义 几个 DIV tag 然后展示在浏览器上， 看看到底是怎么意思。

　　《DHTML Builder》 Jie/文