css选择器代码
<style> <!-- H2 { Background-color:green; } --> </style>
css开头代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>利用后代选择器</title> <style> <!-- li a { font-size:150%; text-decoration:none; } --> </style> </head> <body> <h2 align="center" class="changeColor">页面的标题。</h2> <hr noshade height=1 align=center> <ul> <li><a href=www.sohu.com>搜狐</a></li> <li><a href=www.sina.com.cn>新浪</a></li> </ul> <p align=left id=p2><a href=www.sohu.com>普通的链接：搜狐</a></p> </body> </html>
后代选择器
<html>
<head>
<title>类选择器演示</title>
<style>
<!--
.changeColor{
background-color:green;
color:white;
}
-->
</style>
</head>
<body>
<h2 align="center" class=changeColor>页面的标题。</h2>
<hr noshade height=1 align=center>
<p align="center" class=changeColor>这是内容中的一段，也是居中显示的。</p>
<p align=left id=p2>第二段内容，但是居左显示。</p>
</body>
</html>
类选择器演示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>属性选择符演示</title>
<style>
<!--
p[align="center"]{
background-color:green;
color:white;
}
-->
</style>
</head>
<body>
<h2 align="center">页面的标题。</h2>
<hr noshade height=1 align=center>
<p align="center">这是内容中的一段，也是居中显示的。</p>
<p align=left>第二段内容，但是居左显示。</p>
</body>
</html>
属性选择符演示
<html> <head> <title>ID选择器演示</title> <style> <!-- #p1{ background-color:green; color:white; } --> </style> </head> <body> <h2 align="center">页面的标题。</h2> <hr noshade height=1 align=center> <p align="center" id=p1>这是内容中的一段，也是居中显示的。</p> <p align=left id=p2>第二段内容，但是居左显示。</p> </body> </html>
ID选择器演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>通配选择器</title> <style> <!— * { Font-family:”宋体”; } .changeColor{ background-color:green; color:white; } --> </style> </head> <body> <h2 align="center" class=changeColor>页面的标题。</h2> <hr noshade height=1 align=center> <p align="center" class=changeColor>这是内容中的一段，也是居中显示的。</p> <p align=left id=p2>第二段内容，但是居左显示。</p> </body> </html>
通配选择器
