自学动态Html---教程一 文章来源：中国石油大学 如果您是HTML的初学者，请您先自学HTML。因为DHTML是现有的HTML技术的一个综合，所以HTML语言对学习动态HTML是非常重要的。
自从HTML 4.0出现以后，引入了“层叠样式表”(CSS),于是网页制作者能够随心所欲地对自己的网页进行外观和动态的设计，并且使网页具有交互性。其实动态Html（DHtml）并不是一种专门的技术，而是Html技术的一个综合，说白了就是一种技巧，但往往是这样或那样的小技巧使我们的网页变得更加好看、实用。好了，废话少说，下面开始以实例来说明动态HTML在网页设计中的应用。 例1 使用<style>和</style>标志对修饰文本
<html>
<head>
<title>DHtml举例1</title>
<style><!--
h2 {font-family:"宋体";font-size=12pt;text-align:center;color:blue}
-->
</style>
</head>
<body>
<h2>被修饰文本</h2>
</body>
</html> 本例中，我们使用了<style>和</style>标志对来修饰文本，请留意蓝色字，<style>和</style>标志对是加在<head>和</head>标志对之间的，而加上<!--和-->是为了让不支持<style>和</style>标志对的浏览器跳过样式表，否则可能会出错。本例先对<h2></h2>标志对中的文本样式在<style>和</style>标志对中进行定义，于是在后边<h2></h2>中就依样式表定义的内容对文本进行修饰。font-family定义字体，font-size定义字体大小，text-align定义文本对齐方式，color定义前景颜色。
除此之外，我们还可以采用另一种方法来实现。请看下边的例子。 例2 直接用style属性修饰文本
<html>
<head>
<title>DHtml举例2</title>
</head>
<body>
<h2 style="font-family:'宋体';color:blue;font-size:12pt;text-align:center">被修饰文本</h2>
</body>
</html> 请务必注意font-family后是用单引号来定义字体的（font-family:'宋体'）。好了，现在您已经初步掌握了样式单的用法了，现在我们开始让您的主页动起来，请看下边的例子。 例3 使用鼠标触发事件和动态样式表改变文本
<html>
<head>
<title>DHtml举例3</title>
</head>
<body>
<h2 onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='underline'" style="font-size:12;text-align:center">请将鼠标移到上面！</h2>
<br>
<h3 align="center" onmouseover="this.style.color='red'" onmouseout="this.style.color='green'">我是变色龙！</h3>
</body>
</html> 在这个例子中,当您把光标放在文字上时,onmouseover事件将被触发，于是执行其后的style定义，此时文字下加了一条直线（this.style.textDecoration='underline'的作用），this用来指代当前的对象，即<h2></h2>标志对。当您把光标移开文字时onmouseout事件被触发，此时文字下的直线消失了（this.style.textDecoration='underline'的作用），这样网页就有了动态的效果。同理，我们可以通过触发鼠标事件来改变文本的颜色，如上例中的第二行黑体字所示。
再次提醒读者，在使用样式单的时候一定要注意格式。比如，在<style></style>标志对中进行样式单定义时应使用text-decoration:underline，而不是用textDecoration='underline'来修饰文本，后者是用于事件触发中的（如onmouseover或onmouseout事件）。许多CSS属性的名字中都有连字符(像text-decoration)，但是连字符在许多脚本语言（如JavaScript）中是不合法的标识符，因此，在HTML或样式表中指明CSS属性的时候用连字符命名方式，但在作为一个脚本属性时，就必须去掉连字符，并将它后面的第一个字母大写。例如：
text-decoration变为textDecoration、background-color变成backgroundColor、margin-top变成marginTop。
您可能想用鼠标点击文本来改变其的颜色，要做到这一点很简单，只要在onclick事件中定义样式即可，onclick的用法与onmouseover、onmouseout相似。请看下边的例子。 例4 使用onclick动态改变字体的颜色
<html>
<head>
<title>DHtml举例4</title>
</head>
<body>
<h3 align="center" onmouseover="this.style.color='red'" onmouseout="this.style.color='green'" onclick="this.style.color='blue'">我是变色龙！</h3>
</body>
</html> 在这一例子中，当您把鼠标移动到文字上时，文字颜色变为红色，当鼠标离开文字时，文字颜色变为绿色，当在文字上单击鼠标时，文字颜色变成了蓝色。
下面是我用样式单制作的一个自认为比较漂亮的Html文件。 例5 “轻松自学动态HTML”的图形标志
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DHtml举例5</title>
<style>
<!--
body {font-family:"宋体";font-size:9pt;color:#00aaff}
h2.top {font-family:serif;font-size:9pt;color:yellow;text-align:right;background-color:rgb(174,0,0)}
h2.bottom {font-family:serif;font-size:12pt;margin-left:-2pt;margin-top:-50pt}
-->
</style>
</head> <body bgcolor="#000000">
<br>
<table align="center" border="0" width="27%" bgcolor="#000000" cellpadding="12">
<tr>
<td width="168"><h2 class="top">轻 松 自 学 动 态 HTML</h2>
<h2 class="bottom"><span style="font-size:50pt;color:lime"><i>t</i></span>
each youself DHtml</h2>
</td>
</tr>
</table>
</body>
</html> 例5的效果如下图，请注意例子中的蓝色部分，class属性是用来定义标志对使用的样式类，如<h2 class="top">……</h2>指定了 <h2></h2>标志对中使用样式类“top”，而“top”则是在<style></style>标志对中定义的。
OK，您会了吗？样式单就这么简单。 轻 松 自 学 动 态 HTMLt each youself DHtml |
[返回] | 
