HTML CSS样式

一、样式表

1.内联样式表：

<span style="background-color:#FF0">span层标签，默认用多少占多少</span>

2.内嵌样式表：

<style type="text/css">
p,div
{
font-size:36px;
color:#F00;
background-color:#60F;}
</style>

3.外部样式表：

需要新建一个CSS文件，用来放置样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。

<style>
*
{
margin:0px;
padding:0px;

}
</style>

<link href="Untitled-css2.css" rel="stylesheet" type="text/css" />

二、选择器

1.标签选择器：

<style>
qq
{
color:#0FF;
background-color:#63F}
</style>

2.class选择器：

<style>
.qq
{
color:#0FF;
background-color:#63F}
</style>

<p class="qq">今天天气很不错。</p>

3.id选择器：

#qq
{
color:#0F0;
background-color:#666;
text-decoration:none;
font-size:36px;}

<p id="qq">12345</p>

4.复合选择器：

(1)用，隔开表示并列

<style type="text/css">
p,span
{
color:#F00;
background-color:#0F6;}
</style>

（2）用空格隔开表示后代：

<style>
.qq p
{
color:#F00;
background-color:#0F6;}
</style>

三、超链接的Style

a:link 超链接被点前状态

a:visited 超链接点击后状态

a:hover 悬停在超链接时

a:active 点击超链接时

<style>
a:link
{
color:#000;
text-decoration:none;
}
a:visited
{
color:#0F0;
text-decoration:underline;}
a:hover
{
color:#F00;
text-decoration:underline;}
a:active
{
color:#F60;
text-decoration:underline;}
</style>