CSS1

引入样式：

　　行内样式表　　内部样式表(在head标签里面,title标签下面)　　外部样式表

基本选择器：

　　标签选择器(通过标签名称定位)　　类选择器(通过标签中class属性的值定位，值可以重复，不能以数字开头)　　ID选择器(通过标签中id属性的值定位，　　值不可以重复，不能以数字开头)

一.引入样式：
    1.行内样式表
        <h1 style="color: red;font-size: 18px;">10-30</h1>
     2.内部样式表(在head标签里面,title标签下面)
        <style type="text/css">
            h2{
                color: yellow;
                font-size: 20px;
            }
        </style>
        优点
            方便在同页面中修改样式
        缺点
            不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
　3.外部样式表：
        嵌入式
            <link href="../css/index.css" rel="stylesheet" type="text/css"/>
        导入式
            <style type="text/css">
                @import "../css/index.css";
            </style>
        嵌入式和导入式的区别：
            1.<link/>标签属于XHTML，@import是属于CSS2.1
            2.使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
            3.使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
            4.@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
     样式优先级：
        　　行内>内部>外部        　　就近原则
二.基本选择器：
    1.标签选择器(通过标签名称定位)
        h2{
            color: red;
        }
     2.类选择器(通过标签中class属性的值定位，值可以重复，不能以数字开头)
        .class01{
            color:yellow;
        }
        <h2 class="class01">10-30</h2>
        <h1 class="class01">10-31</h1>
     3.ID选择器(通过标签中id属性的值定位，值不可以重复，不能以数字开头)
         #id01{
            color: red;
        }
        <h2 id="id01">10-30</h2>
        <h1 id="id02">10-31</h1>
     基本选择器的优先级：
        不遵循就近原则，无论哪一种样式表的导入，都遵循：id选择器>类选择器>标签选择器
 三.高级选择器：
    1.层次选择器
         /*后代选择器*/
        li p{
            background-color: yellow;
        }
        /*子选择器*/
        body>p{
            background-color: aqua;
        }
        /*相邻兄弟*/
        .class01+p{
            background-color: red;
        }
        /*通用选择器*/
        .class01~p{
            background-color: blue;
        }
    2.结构伪类选择器
        ul li:first-child{
            background-color: yellow;
        }
        ul li:last-child{
              background-color: red;
        }
        ul li:nth-child(even){
            background-color: blue;
        }
        /*匹配元素类型*/
        p:first-of-type{
            background-color: pink;
        }
        p:last-of-type{
            background-color: green;
        }
        p:nth-of-type(3){
            background-color: aqua;
        }
    3.属性选择器
        /*包含id属性*/
        a[id]{
            background-color: red;
        }
        /*包含target属性，并且值为_blank*/
        a[target=_blank]{
            background-color: yellow;
        }
        /*包含title属性，并且值以we开头*/
        a[title^=we]{
            background-color: aqua;
        }
        /*包含title属性，并且值以e结尾*/
        a[title$=e]{
            background-color: black;
        }
        /*包含class属性，并且值包含it*/
        a[class*=it]{
            background-color: blue;
        }
        原创：梅川酷子先生