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>

通配选择器

 

posted @ 2012-12-23 14:11  编写0513  阅读(287)  评论(0)    收藏  举报