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