〈 !--
H1{font-style:normal;
font-weight:bold;
color：green;
line-height:20pt} ／定义样式H1／
.favor{font-style:normal;
fontsize:15pt;
background-image:url(back.imag.gif);
textalign:center} ／定义样式favor／
--〉
〈／STYLE〉
〈／HEAD〉
〈H1〉THIS IS A TEST!〈／H1〉 ／使用样式H1／
〈P CLASS=”favor”〉DO YOU LIKE THIS?〈／P〉 ／使用样式favor／
3.2 使用外部样式
样式表还可以存放在外部文件中，这个文件与页面的联系可以通过IMPORT或LINK，例如，样式表存放在文件mysite.css中，在文档中可以插入下列代码调用外部样式表：
〈LINK REL=STYLESHEET
HREF=”mysite.css”
TYPE=”text／css”
Title=”Test Style”〉
4 实现交互功能
CSS本身没有交互功能，要实现交互，就须将CSS定义的对象与文档模型(DOM)结合在一起，将Web文档转换为DHTML文档。DOM提供了脚本语言访问页上元素的途径，Microsoft和Netscape支持的对象模型有一些不同。
在Microsoft的模型中，脚本语言可以访问HTML页面上的所有元素，所有元素都被反映为document.all中的对象。下面的程序段用于写出页面中所有的元素：
for (I=0;I〈document.all.length;I++)
{
document.write(document.all［I］.tagName+”＼n” )；
}
在Netscape的模型中，脚本语言可以访问HTML页面上特定集合的元素，如〈layer〉标签中的内容。下面的程序段用于写出页面中所有layer的名称：
for (I=0;I〈document.layers.length;I++)
{
document.write(document.layers［I］.name+”＼n” )；
}
5 定位技术的使用
在HTML中，任何对象的位置与网页结构的其他部分总是相对的，我们编制网页时经常会由于添加一段文字而把一个图象挤出页面。现在，使用DHTML的定位技术可以把对象固定下来，还可以堆叠起来，即在页面的同一位置摆放多个图象，然后不断的指定摆放在最上面的对象来实现动画效果。
例子：
*myback{background-color:transparent}
*mypoit
position:absolute;
top:5in;
right:5in;
width:10in}
BODY{background-image:url(／image／back.gif);}
〈class=.mypoint〉 Img(src=”／image／a.gif)
〈DIV CLASS=”pile”ID=”image1”style=”z-index:4”〉
〈DIV CLASS=”pile”ID=”image2”style=”z-index:3”〉
〈DIV CLASS=”pine”ID=”image3”style=”z-index:2”〉
〈DIV CLASS=”pine”ID=”image4”style=”z-index:1”〉
〈／BODY〉
在上面的程序段中，背景设成了让光线透过底图，这样的效果在以前是要通过专门的做图工具才能完成的。在页面上还堆叠放置了4幅图，它们所产生的动画效 上一页 [1] [2] [3] 下一页 |
