|
CSS是DHTML的基础，CSS用于设定HTML元素在页面上的显示风格，而CSS-P则是CSS的一个扩展，它可用来控制HTML元素在网页上或者说在窗口的位置。下面的两个链接提供了CSS和CSS－P详尽的技术手册：
W3C CSS-Positioning
Builder.com's CSS Guide
在本课程中，将会反复地对CSS进行介绍。
使用DIV标签
使用CSS－P，主要依靠< div >标签来实现，当你把HTML内容放在<
div >标签里时，可以称它为:“DIV块”, “DIV 元素”, “CSS-layer”,或者简单的称之为“layer”。
使用DIV标签的方法和其他标签没有什么两样：
< div >
HTML内容
< /div >
纯粹使用< DIV >标签而不加任何CSS内容，其效果与用<
P >< /P >是一样的。
但当把CSS放进DIV标签中以后，我们就可以指定HMTL元素显示在屏幕上的具体位置，可以在某一位置上画出方形或线，或者指定文字在某一个块中如何显示。首先要做的，是给这个DIV元素（即层）加上一个唯一的ID标识（ID的作用类似于为这个层起个名字）。
< div id="abc"
>
加一个ID号
< /div >
层的ID可以随意设定，可由字母、数字和下划线组成，但必须以字母起头。
你可以用以下两种方法来实现CSS：
嵌入式CSS:
嵌入式是最常用的方法，
< div id="abc"
style="this is style" >
内嵌式CSS
< /div >
外部样式表：
使用外部引入方法的结果是一样的，只不过它在书写上要相应的复杂一点。
< style type="text/css"
>
< !--
#abc {this is style}
-- >
< /style
>
< div id="abc"
>
引用外部样式表
< /div >
跨浏览器CSS属性：
我们的目标是使Netscape和IE两者都能对所写出的DHTML顺利工作，我们对书写的CSS属性有些限制。一般来说，以下属性是由W3C进行过定义的标准。
position
定义如何放置DIV，"relative"是指DIV与其他HTML元素的相对位置；"absolute"则是指DIV在窗口中的绝对定位。这一课中我们主要是讲“absolute”。
left
左边距（相对于窗口的像素宽）
top
顶部边距
width
层宽
height
层高
所有DIV中的HTML元素都在这个限定的宽与高里面。
clip
为DIV定义可见部份，格式为：clip(top,right,bottom,left)
visibility
隐藏或显示DIV块，它的值为"visible", "hidden",
"inherit"（默认值）。
z-index
DIV在页面上显示的层次。
background-color
DIV的背景色。在Netscape中该属性显示为文字的背景色。
layer-background-color
Netscape浏览器中DIV的背景色。
background-image
DIV的背景图，在Netscape中该属性显示为文字下面的背景图像。
layer-background-image
Netscape中DIV的背景图像。
CSS的语法与HTML有所不同，使用“：”来分离属性和值，用“；”来分开各种不同的属性。
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属性时你有较大的灵活性。你不必定义所有的CSS属性，你可以把所要定义的属性写在一行里，也可以分开几行来写，或是在每个属性之间空开一段距离。大小的值为pixel（像素），在CSS中可以简写为“px”。
内部CSS例子：
< div id="abc" style="position:
absolute;
left:50px; top:100px; width:200px; height:100px;
clip:rect(0px 200px 100px 0px);
visiblity:visible;
z-index:1;" >
< /div >
外部CSS例子：
< style type="text/css"
>
< !--
#abc { position: absolute;
left:50px; top:100px; width:200px; height:100px;
clip:rect(0px 200px 100px 0px);
visiblity:visible;
z-index:1;}
-- >
< /style >
< div id="abc"
>
< /div >
|
