CSS

1.1 CSS 指层叠样式表 (Cascading Style Sheets)

    样式定义如何显示 HTML 元素

    样式通常存储在样式表中

    把样式添加到 HTML 中，是为了解决内容与表现分离的问题

    外部样式表可以极大提高工作效率

    外部样式表通常存储在 CSS 文件中

    多个样式定义可层叠为一

1.2 CSS和HTML结合的方式：

    方式一：

        使用style 标签

        <style type="text/css"><!--CSS内容 -->
            div{
                border:#F90 dashed 2px;
                height:200px;
                width:400px;
            }
        </style>

        每一个html标签中都有一个style样式属性。该属性的值就是css代码。 

        使用style标签的方式。 一般都定义在head标签中

    方式二：使用外部的CSS文件。

        <link rel="stylesheet" href="1.css" type="text/css" />
        link是html的一个标签，link是在加载页面前把css加载完毕

    方式三：使用import进行引用。

        <style type=”text/css”>
            @import url(main.css);
        </style>
        @import是css的一个标签,@import url（）则是读取完文件后在加载

1.3 四中定义CSS样式的方法：

    1.3.1 标签选择器
        div{
            background-color:#09F;
            color:#FFF;
        }
        <div>div区域这部分区域按照div样式显示</div>

    1.3.2 类选择器     
        .demo{
            background-color:#FF3;
            color:#0C0;
        }
        <div class="demo">div区域这部分区域按照demo类样式显示</div>
    1.3.3 id选择器
        #id{通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可
        以被js使用。id通常都是为了去标示页面中一些特定区域使用的。
            background-color:#000;
            color:#FFF;
        }
        <div id="id">div区域这部分区域按照id样式显示</div>


    1.3.4 style属性
        <div style="width:200px;height:200px;background-color:Black;">
            div区域
        </div> 
    1.3.5 其他的
    span b{关联选择器 选择器中的选择器
        background-color:#09F;
        color:#FFF;
    }
    .id,div b{对多种选择器进行相同样式定义
        background-color:#000;
        color:#C00;
    }
    1.3.6 总结
        优先级：
            标签选择器<类选择器<id选择器<style属性

1.4 CSS设置超链接的点击效果。

    <a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a>

    /*未访问*/
    a:link{
        background-color:#06F;
        color:#FFF;
        text-decoration:none;
        font-size:18px;
    }


    /*
    鼠标悬停
    */
    a:hover{
        background-color:#FFF;
        color:#F00;
        font-size:24px;
    }


    /*点击效果*/
    a:active{
        background-color:#000;
        color:#FFF;
        font-size:36px;
    }

    /*访问后效果*/

    a:visited{
            background-color:#FF9;
            color:#000;
            text-decoration:line-through;
    }