DHTML Cross-Browser Tutorial: CSS position

动态基本教程第一节: CCS 和位置设定

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

而这里我只是给出你大概的轮廓使得你可以了解它们以及看懂以后
的课程. 我们会在以后的课程里再回过头来仔细讨论 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 然后展示在浏览器上，看看到底是怎么意思。