<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>样式表</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="http://www.360.com">360官网</a>
<P>春来了！</P><br />
<p>春天花会开</p>
<div class=""></div><br />
css，（cascding style sheets）层叠样式表，作用是美化HTML网页<br />
/*注释区域*/注释语法用法<br />
样式表的基本概念<br />
一、样式表分类<br />
1、内联式样式表<br />
和HTML联合显示，控制精确，但是可用性差，冗余太多<br />
<div style="background:#0F0">51899789</div><br />
2、内嵌样式表<br />
作为一个独立的区域内嵌在网页里，必须写在head标签里面<br />
<!--<style type="text/css">
p//格式对p标签起作用
{
样式；
}
</style>
-->
3、外部样式表<br />
新建一个css文件，用来放置样式表。如果在html文件中调用样式表，需要在HTML文件中点击右键-css样式-附加样式表，一般用link链接方式<br />
有些标签默认边距，一般写样式代码的时候都会先去除（也可以设置其他样式），如下<br />
<!--<style type="text/css">
*{
margin:0px;
padding:0px;
}
</style> -->
（二）选择器<br />
1、标签选择器，用标签名作为选择器<br />
<!--<style type="text/css">
p
{
样式；
}
</style> -->
<p>夏天来了</p>
<p>夏天太热了</p>
2、class选择器。都是以“.”开头。<br />
class是相同属性的放在一起<br />
<!--.aa//定义一个名字叫aa的样式表
{//定义aa里面具体的样式属性
width:300px;
height:200px;
border:1px solid #009;
} -->
<div class="aa" id="a1"><!--用class选择器调用aa样式表，调用id叫a1的样式表 -->1</div><br />
<div class="aa" id="a2" ><p><!--用class选择器调用aa样式表，调用id叫a2的样式表，重叠aa类里面p的样式 -->2</p></div><br />
<div class="aa" id="a3"><!--用class选择器调用aa样式表 ，调用id叫a3的样式表-->3</div><br />
<div class="aa" id="a4"><!--用class选择器调用aa样式表 ，调用id叫a4的样式表-->4</div><br />
<div class="aa" id="a5"><!--用class选择器调用aa样式表 ，调用id叫a5的样式表-->5</div><br />
3、ID选择器。以“#”开头<br />
id具有唯一性，尽量只用一个标签引用<br />
调用形式：<!--<div id="样式名"> --><br />
<div id="a1">1</div><!--调用id叫a1的样式表 -->
4、复合选择器<br />
（1）使用，隔开表示并列<br />
<!--<style type="text/css">
p,span //标签p、span两者同样的样式
{
样式；
}
</style> -->
<span style="background-color:#360">夏天<br />
太热了</span><br />
<!--span标签叠打了与p标签一样的样式 -->
<p>夏天<br />
太热了</p>
（2）用空格隔开，表示后代<br />
<!--<style type="text/css">
.aa p //标签p、span两者同样的样式
{
样式；
}
</style> -->
<div class="aa"><p>夏天来了</p></div>
<div class="aa"><p>夏天太热了</p></div><!--样式p叠加了class aa里面的属性 -->
（3）筛选“.”。跟其他的p标签不一样<br />
<p class="aa">夏天<br />
天太热了
</p>
<p class="bb">
<span style="background:#06C" style="size:150">夏天<br />
天太热了
</span>
</p>
三、样式表属性<br />
四、超链接样式：l v h a<br /><br />
a:link/*链接前链接的样式*/<br />
a:visited/*链接后链接的样式*/<br />
a:hover/*鼠标悬浮时链接的样式*/<br />
a:active/*鼠标点击时时链接的样式*/<br />
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
