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>