里增加ID 属性,



ID的取名任意你可以使用符号(a~z, A~Z, 和下划线_ ), 必须以字母为字首.

有两中方法使用CSS.

inline CSS

比较常用, 我们将在本教程中使用Inline CSS显示用javascript创建DHTML.


External STYLE tag:
你也可以使用外部方法. 与CSS相关, 你可以在学完"Nesting Layers"(后面的教程) 再测试. 现在只是看一看它的基本使用格式.




注意橘色表示的"truck" -- STYLE tag中的ID应用到CSS style中.

跨browser的CSS Properties:

我们的目标是使DHTML同时使用于NS和IE, 以下是我们可以使用的CSS styles/properties.
可以参考更详细的定义[url www.w3c.org/]W3C[/url]

position
定义DIV tag 在网页中显示的位置.
"relative"指DIV tag 以其他的HTML tag为参照做移动.
"absolute"指DIV 将被固定在页面. Absolute是本教程的重点.

left
左边位置(从browser window的左边边框算起的像素数值.)
Top
上限位置(从browser window的顶部边框向下算起的像素数值.)
width
DIV tag所定义的宽度. 任何在DIV tag中间的text/html都出现在这个区域内. 宽度不定义,所有的内容将出现在一行内.

Important:
使用layers做animation. 你最好定义宽度. 因为IE将默认整个屏幕宽度为宽. 移动layer, browser底部会出现滚动条. 这不仅烦人而且使动画速度降低.

height
DIV tag 的高度. 不常用.

clip
定义layer的方形. 以四边的值定义矩形.
clip:rect(top,right,bottom,left)

visibility
确定DIV 属性 "visible", "hidden"或者"inherit"(默认)

z-index
DIV tag 的stacking 顺序.

background-color
DIV的背景. NS中只用来定义text背景. 如果需要用CSS画带颜色的矩形需要在 layer-background-color 定义相同的RGB值.

layer-background-color
用于表示NS的DIV背景色

background-image
使用背景图 (IE only)

layer-background-image
使用背景图 (NS only)

不同与HTML的是: CSS用冒号分割属性和值; 用分号分割不同的属性.

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


CSS属性定义是随意的. 你不必定义全部.
和HTML一样, 空格是忽略的,
你可以把所有属性写在一行, 也可以分成多行.
默认单位是像素. 所以你可以不必在"left""right""width"数值的右边写"px", 虽然推荐:
position:absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); background-color:#FF0000; layer-background-color:#FF0000;

Inline 范例:



External 范例: