首先我们关注一下XHTML和HTML之间的主要区别。
· XHTML元素必须合理嵌套；
· XHTML文档必须格式正确；
· XHTML文档中对应的标签名称必须是小写；
· 所有XHTML元素必须关闭。
XHTML的语法规则
· XHTML DTD定义强制元素；
· 属性名称必须为小写；
· 属性值使用双引号；
· 属性简写是不允许的；
· 用id属性来替代原来的name属性。
CSS层叠样式表的优势
CSS层叠样式是为了实现在Web页面中将数据与格式分离，从而实现更加丰富的页面效果，同时也能够实现页面格式的批量动态更新。
每个样式规则都有一个选择符，通常是一个HTML的标记元素，例如body、h1和该选择符所需要设置的样式属性。
样式规则的基本语法为：
选择符 {属性: 值}
注意属性与其值之间用冒号隔开，而非空格。如果针对一个选择符需要定义多个样式属性，一般可以在属性之间用分号隔开。
选择符 {属性1: 值1; 属性2: 值2 }
需要强调的是在创建层叠样式表文件时，文件内容只能包含有关的样式规则，而不允许有其他的内容
此外，也可以在head部分的style标记中使用import导入外部的样式表文件
<style type="text/css">
<!--
@import url(mystyle.css);
-->
</style>
CSS层叠样式表的优先级问题
在掌握了使用CSS层叠样式表的基本方法之后，需要再关注一下有关优先级的问题。如果在页面中采用了多种样式表的定义方式，并且使用不同方式针对同一个HTML标记进行了重复定义，且定义的属性中有冲突，例如，在外部样式表文件中对h1标记进行了颜色的定义，而在本页面的style样式中既导入了外部的样式文件，又对该标记进行了颜色的重新定义，还有可能在页面某处的h1标记中，使用style属性进行了不同颜色的定义。那么到底谁的设置会优先生效呢？由此可见，当样式表定义有冲突时，采用就近原则，即与被修饰元素最近的优先生效。如果彼此之间不冲突，将共同作用于对应元素。
在CSS层叠样式表中，除了可以将HTML现有的标记作为CSS的选择符，实现格式设置扩充之外，也可以使用类选择符或者ID选择符进行样式规则的设定。
考虑到同一个标记有可能需要在页面的不同位置呈现出不一样的效果，CSS中允许针对同一个标记设置不同的类，从而实现不一样的样式。基本语法是，在HTML标记后添加.类选择符名，例如：
p.basic { text-indent:2em; background:yellow; font-family:宋体}
p.main { text-indent:2em; background:blue; font-family:宋体; font-style:italic; color:white}
在上面的定义中，对于段落标记根据需要可以有两种不同的格式。例如，针对基本段落设置的格式是首行缩进两个字符，背景色为黄色，字体为宋体。而针对需要重点强调的主要段落，则将背景色设置为蓝色，文字颜色为白色，并且以斜体显示。需要提醒的是，在给类命名时尽量能够反映出该类的功能。
在页面中需要具体使用时，可以在对应的标记中使用class（类）属性规定采用的到底是哪一个类
此外，也可以定义与任何HTML标记无关的独立的类选择符。这样，如果有多个标记采用同样的格式，就可以借助class属性使用同一个类选择符中定义的属性。
<style type="text/css">
.basic { text-indent:2em; background:yellow; font-family:宋体;color:yellow}
</style>
<h1 class="basic" style="font-family:黑体">
引入CSS外部文件的方式
</h1>
<p class="basic" style="font-size:20"></p>
如果在HTML标记中需要使用该ID选择符，可以使用id属性，
<style type="text/css">
#jenny { text-indent:2em; background:yellow; font-family:宋体}
</style>
<p id="jenny">
<head>
<title>css9.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
a:link {font-size: 10pt; color:red; text-decoration: none}
a:visited{font-size: 9pt; color:green; text-decoration: none}
a:hover{font-size: 15pt; color:brown; text-decoration: underline}
</style>
</head>
<body>
<a href="#">有关Ajax的最新动态</a>
</body>
在传统的HTML页面中，如果需要精确定位元素的位置，往往以表格搭建页面的布局，然后将元素放在表格的单元格中以实现目标的定位。但有时需要结合脚本语言动态的控制元素在页面中出现的位置，此时往往利用CSS控制该元素的位置，脚本语言也可以通过改变CSS中与位置相关的属性值来达到目的
<html>
<head>
<title>css10.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
div{
position:absolute;
top:70;
left:200;
}
-->
</style>
</head>
<body>
<div>
<img src="smile.gif" alt="">
</div>
</body>
</html>
在该程序中，用到了块标记<div>，该标记可以将其内部的图片及文字作为一个整体，即分层进行控制，往往可以实现页面效果的局部改变。本例中利用样式表定义了该标记的位置，具体页面顶端70像素、页面左端200像素。因此在块标记内部的图片显示在了页面中指定的位置
在CSS中还可以依据需要控制元素的显示和隐藏，与脚本语言相结合就能够动态控制目标元素的显示和隐藏，示例程序如下：
源程序名称：css11.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css11.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
div.show{
position:absolute;
top:10;
left:200;
visibility:visible;
}
div.hide{
position:absolute;
top:120;
left:200;
visibility:hidden;
}
-->
</style>
</head>
<body>
<div class="hide">
<img src="smile.gif" alt="">
</div>
<div class="show">
<img src="cry.gif" alt="">
</div>
</body>
</html>
在该程序中页面中应该有两张图片，一张是笑脸，一张是哭脸。但是利用样式表的visibility属性将页面下方的一张图片设置为隐藏，因此在页面中只能看到上方的一张
<html>
<head>
<title>movPic.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
#topdown{
position:absolute;
left:12;
top:222;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
function move(x, y)
{
topdown.style.left = x;
topdown.style.top = y;
}
</script>
</head>
<body οnmοusemοve="move(event.x, event.y)">
<div id="topdown">
<img src="smile.gif" alt="">
</div>
</body>
</html>
在该程序中首先使用层标记 <div> 将图片单独放在一层中，然后使用CSS层叠样式表定义了该图片的位置，再与onmousemove事件结合，追踪鼠标的位置（event.x和event.y），并随时用鼠标的位置修改对应图片的位置，因此该程序实现的效果是页面中显示出一张始终跟着鼠标指针移动的笑脸。
535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
