总结代码示例：
<html>
<head>
<style type=”text/css”>
/*
div{
color:#0F0;
}
*/
</style>
</head>
<body>
<div style=”color:#F0F”>Hello 黑马程序员</div>
</body>
</html>
2.类选择器
<html>
<head>
<style type=”text/css”>
/*
div.divclass{
color:#F0F;
}
*/
.divclass{
color:#0F0;
}
</style>
</head>
<body>
<div class=”divclass”>Hello 黑马程序员</div>
<div class=”divclass”>Hi 新长城</div>
</body>
</html>
3.ID选择器
<html>
<head>
<style type=”text/css”>
/*
span#spanid{
color:#F0F;
}
*/
#spanid{
color:#0F0;
}
</style>
</head>
<body>
<span id=”spanid”>How are you?</span>
<span id=”spanid”>I’m beat.</span>
</body>
</html>
4.扩展选择器
1) 关联选择器
<html>
<head>
<style type=”text/css”>
div div{
font-size:36px;
}
</style>
</head>
<body>
<table>
<div><div>黑马程序员</div></div>
<div>黑马程序员——新长城</div>
</table>
</body>
</html>
2）组合选择器
<html>
<head>
<style type=”text/css”>
div,span{
color:Green;
}
</style>
</head>
<body>
<div>Hello 黑马</div>
<span>Hi I’m coming</span>
</body>
</html>
3）伪元素选择器
<html>
<head>
<style type=”text/css”>
a:link{
color:Green;
text-decoration:none;
}
a:visited{
color:#FFFFFF;
}
a:hover{
font-size:36px;
color:#66FF00;
}
a:active{
color:#0000FF;
}
</style>
</head>
<body>
<a href=”http://www.so.com/”>360搜索</a>
</body>
</html>
5、段落样式总结代码示例：
<html>
<head>
<style type=”text/css”>
/*
p:first-letter{
color:#FF6600;
font-size:36px;
}*/
p:first-line{
color:#FF6600;
font-size:36px;
}
</style>
</head>
<body>
<p>
黑马程序员 我来了！<br />嘻嘻
</p>
<p>
欢迎光临！
</p>.
</body>
</html>
6、图片定位代码示例：
<html>
<head>
<style type=”text/css”>
.imgtext{
border:1px #FF3300 solid;
}
#text{
font-family:楷体;
color:#FF0080;
font-size:36px;
position:absolute;
top:180px;
left: 73px;
}
</style>
</head>
<body>
<div class=”imgtext”>
<div id=”img”><img src=”1.jpg” width=”1000″ height=”500″/></div>
<div id=”text”>美女！我来了 soga！</div>
</div>
</body>
</html>
