文档库 最新最全的文档下载
当前位置:文档库 › 3DHTML技术

3DHTML技术

3DHTML技术
3DHTML技术

第3章DHTML技术

3.1 什么是DHTML

3.2 级联式样式表(CSS)

3.2.1 使用CSS的必要性

3.2.2 定义CSS

3.2.3 在网页中使用CSS

3.2.4 CSS的属性与单位(自习)

3.3 客户端脚本语言

3.3.1 在HTML中使用脚本语言

3.3.2 JavaScript简介

3.3.3 VBScript简介

3.4 事件处理和文档对象模型(DOM)

3.4.1 事件处理

3.4.2 文档对象模型(DOM)

3.5 DHTML的应用

第3章DHTML技术

3.1 什么是DHTML

DHTML(Dynamic HTML)技术可以创建与用户交互并包含动态内容的页面。DHTML 是HTML、CSS和脚本语言的一种集成,DHTML建筑在这些技术的基础之上,包括三个方面的内容:

?HTML和CSS

?脚本语言

?文档对象模型(DOM)

我们已经在上一章详细讲解了HTML语言,下面将对CSS、脚本语言和文档对象模型(DOM)进行深入的介绍。

3.2 级联式样式表(CSS)

3.2.1使用CSS的必要性

通过上一章的HTML语言的学习,我们知道了HTML的强大的格式设置功能,但必须在每个需要设置的地方使用格式设置标记,如果多个地方需要相同的格式设置,那么这种格式设置方式的局限性就显露出来了。

例如:如果要将文档中的所有的H2标记中的文字的颜色设置为“蓝色”,对齐方式为“居中”,则必须在所有的H2标记中设置align=center,并使用标记设置color=blue,程序代码如下:

ex3_2_01.htm:不使用CSS

第3章DHTML技术

3.1 什么是DHTML

......

3.2 级联式样式表(CSS)

......

3.3 JavaScript

......

3.4 VBScript

......

在浏览器中的显示结果如图 3.1所示:

图 3.1 不同位置相同格式

而使用级联样式表CSS(Cascading style sheet)技术就可以克服HTML的这种局限性,下面将上例改为使用CSS来进行格式设置。

ex3_2_02.htm:使用CSS

第3章DHTML技术

3.1 什么是DHTML

......

3.2 级联式样式表(CSS)

......

3.3 JavaScript

......

3.4 VBScript

......

在浏览器中的显示结果如图 3.1所示,和不使用CSS的效果一样,但是,很明显使用CSS为网页设置统一的格式要方便的多。

此例中的样式定义只是应用到一个

标记,实际上,CSS具有强大的样式修饰功能,不但可以就某个特定的标记设置格式,而且可以使多个网页应用同一套样式,从而使多个网页的格式具有一致性。

级联样式表CSS(Cascading style sheet)中的“级联”的意义是:全局样式规则一直应用于HTML元素,直到有局部样式规则取代为止,在局部样式应用之后,全局样式规则与局部样式规则不冲突的部分将继续发挥作用。

3.2.2定义CSS

上例中

1.定义CSS

样式规则的语法如下:

   选择器{属性1:属性值1;属性2:属性值2;……}

其中,选择器表示需要应用样式的内容;属性表示由CSS标准定

义的样式属性

2.在网页中使用CSS

在浏览器中的显示结果如图 3.2所示,除了包含在

中的标记中的文字的字体采用黑体并加下划线之外,文档中其它的所有字体均采用楷体。

图 3.2 具有上下文关系的HTML标记样式的使用

3.用户定义的类

可以为某个标记定义类,也可以为所有的标记定义通用类,定义和使用的方法如下:

?为某个标记定义类

定义标记类的语法如下:

选择器.类名{属性1:属性值1;属性2:属性值2;……}

使用标记类的方法是,在相应的标记中,通过添加class属性引用所定义的类,

语法如下:

<标记名称class=类名>

?为所有的标记定义通用类

定义通用类的语法如下:

.类名{属性1:属性值1;属性2:属性值2;……}

使用通用类的方法是,在所有的标记中,都可以通过添加class属性引用所定

义的类,语法如下:

<标记名称class=类名>

ex3_2_04.htm:用户定义类的使用

1.为某个标记定义类

定义标记类的语法如下:

选择器.类名{属性1:属性值1;属性2:属性值2;……}

使用标记类的方法是,在相应的标记中,通过添加class属性引用所定

义的类,语法如下:

<标记名称class=类名></标记名称>

2.为所有的标记定义通用类

定义通用类的语法如下:

.类名{属性1:属性值1;属性2:属性值2;……}

使用通用类的方法是,在所有的标记中,都可以通过添加class属性引

用所定义的类,语法如下:

<标记名称class=类名></标记名称>

在浏览器中的显示结果如图 3.3所示。

图 3.3 用户定义类的使用

注意:CSS中的注释形式是将注释语句放置在“/*”和“*/”之间,并且注释不能嵌套。另外当定义

这样,可以确保不支持CSS的浏览器把它们作为注释忽略掉,而对于支持的浏览器可以正确使用。

4.用户定义的ID

使用ID定义样式可以达到和使用用户定义通用类一样的效果,但是,这两种方式最好只使用其中之一。

使用ID定义样式的语法如下:

#ID名称{属性1:属性值1;属性2:属性值2;……}

定义了ID样式之后,通过在标记中添加ID属性来使用ID样式,语法如下:<标记名称id=ID名称>

ex3_2_05.htm:用户定义的ID样式的使用

使用ID定义样式的语法如下

#ID名称{属性1:属性值1;属性2:属性值2;……}

定义了ID样式之后,通过在标记中添加ID属性来使用ID样式,语法如下:

<标记名称id=ID名称></标记名称>

在浏览器中的显示结果如图 3.4所示。

图 3.4 用户定义的ID样式的使用

5.虚类

对于标记,可以使用虚类的方式设置不同类型的链接的显示方式。共有三种不同类

型的链接,分别是未访问过的,已访问过的和当前选中的三种类型。可以通过指定相应的选择器来设置链接样式:

?未访问过的使用A:link 或:link

?已访问过的使用A:visited 或:visited

?当前选中的使用A:active 或:active

对于虚类可以使用编组的方式定义,虚类也可以作为上下文出现。

ex3_2_06.htm:虚类的使用

对于标记,可以使用虚类的方式设置不同类型的链接的显示方式。

共有三种不同类型的链接,分别是:

未访问过的已访问过的

href=page1.htm>当前选中的三种类型。

在浏览器中的显示结果如图 3.5所示。

图 3.5 虚类的使用

单击“当前选中的”链接后,打开相应的链接文件page1.htm,此时原文件的显示效果如图 3.6所示。

图 3.6 单击超级链接后的显示

单击图像链接后,可以查看放大的图像。

试一试: