css学习笔记之基础知识

最近在学习前端知识，学习之余回顾了一些css的基础知识，有简要的解释，本来源码里面有一些附带有链接，不过因版权问题没有附带上，要完整的源码可以发短消息给我。

    /*派生选择器-example*/
    li strong{
        font-style: italic;
        font-weight: normal;
    }/*只对li标签中的strong标签有效，不在li标签中的strong均没有这种样式*/

    /*id选择器-example*/
    #red {
        color:red;
        font-family: Times;
    }/*id选择器以#开头，只能在每个html文档中使用一次*/

    /*id派生选择器*/
    #sidebar p {
        font-style: italic;
        text-align: center;
    }

    /*class（类）选择器*/
    .center {
        text-align: center;
    }/*类名的第一个字符不能使用数字！firefox中无法起作用*/

    /*属性选择器*/
    [title~=hello] {
        color: red;
    }/*属性选择器title=hello，在应用时有title=hello world同样起作用*/

    [lang|=en] {
        color: red;
    }/* <p lang="en-us"></p>可以应用样式*/

    /* selector */
    exp:
        p {}        /*元素选择器*/
        #id {}        /*id选择器*/
        .class {}    /*类选择器*/
        p a{}        /*后代选择器*/
        p > a {}    /*子代选择器，区别后代，指p后面的第一个子a标签，其余不受影响，eg,<p><em><a></a></em></p>*/
        p + a {}    /*相邻兄弟选择器，一个结合符只能选择两个相邻兄弟中的第二个元素*/


    
    /*内联样式、内部样式表、外联样式表 导入样式表*/
    /*优先使用顺序：就近原则,即内联样式、内部样式表、外联样式表 导入样式表*/
    <p style="color: red; margin-left: 20px"></p>
    <style type="text/css">
        p {
            color: red;
            font-family: Arial;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="../../">
    <style type="text/css">
        @import "test.css";
    </style>

    /*权值计算详解：
        内联样式：权值为1000
        ID选择器：权值为100
        类选择器: 权值为10
      元素选择器: 权值为1*/
    /* 特殊情况: 当样式后带有!important，则优先级最高*/

    /* BOX-model */
    盒子模型: margin; border; padding; content;


    /* 超链接的四种状态 */
    a:link {color:#FF0000;}        /* 未被访问的链接 */
    a:visited {color:#00FF00;}    /* 已被访问的链接 */
    a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
    a:active {color:#0000FF;}    /* 正在被点击的链接 */
    /*   a:hover 必须位于 a:link 和 a:visited 之后
          a:active 必须位于 a:hover 之后*/

    /* border-style */
    a:link {border-style: outset;}
    /* border-width */
    It must need border-style first!
    exp:
    p {
        border-style: solid;
        border- 20px 15px;
    }

    /* 改变鼠标指针样式 */
    ref:http://www.w3school.com.cn/css/css_classification.asp;


    /*伪类*/                                /*伪元素*/
    psevdo-classes                         psevdo-elements
    :link                                  :first-letter
    :visited                               :first-line
    :hover                                 :before
    :active                                :after
    :focus                                 :selection
    :first-child