1. CSS简介

1.1 CSS是什么？

　　CSS称为样式层叠表，是用于增强或控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。

1.2 我们为什么要使用CSS？

　　1.为了方便样式的复用，方便网站后期维护。

　　2.为了达到页面的精准控制，实现精美复杂的页面。

简单点说，CSS就是为了让你的网页更加好看。前面学的HTML相当于你买了一个毛坯房，虽然结构有了，但是实在是太难看了，不能住人，所以你就需要CSS来给你装修一下。

2.CSS基本语法

2.1 CSS的三种链接方式

<div style="all: inherit;"></div>

2.1.1行内样式表

　　1.将CSS样式与HTML代码，完全糅杂在一起，不符合W3C关于"内容与表现分离"的基本规范，不利于后期维护。
　　2.优先级最高，但是不推荐使用。

2.1.2内部样式表

    <style type="text/css"></style>

　　1.一定程度的将CSS样式与HTML代码分离，但是分离不够彻底，无法实现样式复用。
　　2.优先级低于行内样式表。

<link rel="stylesheet" type="text/css" href="02.应用CSS的三种方法.css"/>

2.1.3外部样式表

　　1.实现了CSS样式与HTML代码的彻底的分离，符合W3C的规范，方便样式复用与维护。
　　2.优先级低于内部样式表。
　　3.以后开发推荐使用。

2.1.4扩展阅读（导入外部样式表的另一种方式）

<style type="text/css">
            @import url("02.");
        </style>

【两种导入方法的区别】
　　1.link标签是标准的HTML标签，而import不是。
　　2.link可以连接各种样式的文件，而import只能导入CSS文件。
　　3.link使用的是链接的方式，相当于HTML与CSS文件的桥梁。
　　　　import使用的是导入的方式，会在文档加载时，将CSS的代码导入到HTML中。
　　4.link在网页边加载的时候边链接CSS文件，而import会在网页完全加载之后，在导入CSS文件。

2.2CSS常用选择器

2.2.1标签选择器

　　1.写法：HTML标签名{样式属性：样式属性值；--}
　　2.作用选中页面中所有对应的标签。

2.2.2类选择器

　　1.写法：.选择器名称{}
　　　　调用：在需要修改样式的标签上，使用class="选择器名称"，调用对应选择器。
　　2.作用：修改所有调用选择器的标签。
　　3.优先级高于标签选择器。

2.2.3ID选择器

　　1.写法：#选择器名称{}
　　　　调用：在需要修改样式的标签上，使用id="选择器名称"，调用对应选择器。
　　2.ID是唯一的，同一页面只能有一个ID
　　3.优先级大于class选择器。

2.2.4通用选择器

　　1.写法：*{}
　　2.作用：选中页面中所有标签。
　　3.优先级最低。

2.2.5后代选择器

　　1.写法：选择器1 选择器2 选择器3...{}（中间加空格）
　　　　例子：div .li{}需满足，div里面的class="li" 的元素。可以是子代，也可以是后代。

2.2.6子代选择器

　　1.写法：选择器1>选择器2>选择器3...{}（大于号隔开）
　　　　例如：div>ul{}则ul必须是div的直接子代。
　　2.优先级：近者优先，越精确越优先。

2.2.7交集选择器

　　1.写法：选择器1选择器2...{}（中间什么都不写）
　　　　例如：.li#li{}元素必须同时具备class="li",id="li"才能生效。

2.2.8并集选择器

　　　1.写法：选择器1,选择器2...{}（用逗号隔开）
　　　　例如：.li,#li{}元素只要具备class="li"或者id="li"就能生效。

2.2.9伪类选择器

　　1.写法：选择器名称：伪类状态{}
　　2.常用伪类状态
　　　　link：未访问状态
　　　　visited：已访问状态
　　　　hover：鼠标之上状态
　　　　actived：激活选定状态
　　　　focus：获得焦点（input常用）
　　3.超链接多种伪类共存时顺序：
　　　　link（visited）hover actived
　　4.使两个控件同时对鼠标事件做出反应的写法：
　　共同父容器选择器：伪类状态控件选择器{
　　　　　　　　　　　　　　　　　　　　　　对应控件事件}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS常用选择器</title>
        
        <!--页面中插入CSS的写法，需使用style标签包裹。type="text/css"-->
        <style type="text/css">
            
        
            
            
            li{
                color: red;
            }
            /*【标签选择器】
             * 1.写法：HTML标签名{样式属性：样式属性值；--}
             * 2.作用选中页面中所有对应的标签。*/
            .li{
                color: orange;
            }
            /*【类选择器】
             * 1.写法：.选择器名称{}
             *         调用：在需要修改样式的标签上，使用class="选择器名称"，调用对应选择器。
             * 2.作用：修改所有调用选择器的标签。
             * 3.优先级高于标签选择器。*/
            #li{
                color: yellow;
            }
            /** 【ID选择器】
             * 1.写法：#选择器名称{}
             *         调用：在需要修改样式的标签上，使用id="选择器名称"，调用对应选择器。
             * 2.ID是唯一的，同一页面只能有一个ID
             * 3.优先级大于class选择器。*/
            *{
                font-size: 20px;
                background-color: aqua;
            }
            /*【通用选择器】
             * 1.写法：*{}
             * 2.作用：选中页面中所有标签。
             * 3.优先级最低。*/
            div li{
                color: green;
            }
            /*【后代选择器】
             * 1.写法：选择器1 选择器2 选择器3...{}
             *             例子：div .li{}需满足，div里面的class="li" 的元素。可以是子代，也可以是后代。
             * 【子代选择器】
             * 1.写法：选择器1>选择器2>选择器3...{}
             *         例如：div>ul{}则ul必须是div的直接子代。
             * 2.优先级：近者优先，越精确越优先。
             * 【伪类选择器】
             * 
             * 
             * */
            .li#li{
                
                color: blue;
            }
            .li,#li{
                color: darkviolet;
            }
            a:link{
                color: black;
            }
            a:visited{
                color: blue;
            }
            a:hover{
                color: red;
            }
            a:active{
                color: yellow;
            }
            input:hover{
                color: red;
            }
            input:active{
                color: blue;
            }
            input:focus{
                color: yellow;
            }
            
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li class="li" id="li">列表第一项</li>
                <li>列表第二项</li>
                <li class="li">列表第三项</li>
                <li id="li">列表第四项</li>
            </ul>
        </div>
            <ul>
                <li class="li">列表第一项</li>
                <li>列表第二项</li>
                <li class="li">列表第三项</li>
                <li id="li">列表第四项</li>
            </ul>
            <a href="03.CSS常用文本属性.html" target="_blank"> This is a chaolianjie</a>
            <input type="text" name="text" id="text" />
    </body>
</html>

【扩展阅读】

2.2.1选择器的优先级
　　　1.第一原则：近者优先，最内层选择器要大于外层。
　　　　例如： div ul li>div #ul li在ul 内层，所以li标签选择器能覆盖#ul id选择器
　　2.当作用在同一层时，ID选择器>class选择器>标签选择器。
　　　　例如：div #li>div .li>div li。只要最后一个选择器都作用与li 那么无论之前有多少嵌套，均没有选择关系。
　　3.当作用于同一层，而且最后一层为同等选择器
　　　　例如：div ul li>div li作用范围选的更精准，则优先级更高。
　　4.当优先级完全相同时，写在后面的选择器会覆盖选在后面的选择器。

2.2.2选择器的命名规范

1.只能使用字母数字下划线。
2.开头不能是数字。