CSS的三種使用方式以及常用的選擇器

一、CSS的三種使用方式：

1. 內聯樣式
             * 在標簽內使用style屬性指定css代碼
             * 如：<div style="color:red;">hello css</div>
2. 內部樣式
            * 在head標簽內，定義style標簽，style標簽的標簽體內容就是css代碼
            * 如：
                <style>
                    div{
                        color:blue;
                    }
                </style>
                <div>hello css</div>
3. 外部樣式
            1. 定義css資源文件。
            2. 在head標簽內，定義link標簽，引入外部的資源文件
            * 如：
                * a.css文件：
                    div{
                        color:green;
                        }
                    <link rel="stylesheet" href="css/a.css">
                    <div>hello css</div>
                    <div>hello css</div>

二、CSS的常用選擇器：

1. 基礎選擇器
                1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一
                    * 語法：#id屬性值{}
                2. 元素選擇器：選擇具有相同標簽名稱的元素
                    * 語法： 標簽名稱{}
                    * 注意：id選擇器優先級高於元素選擇器
                3. 類選擇器：選擇具有相同的class屬性值的元素。
                    * 語法：.class屬性值{}
                    * 注意：類選擇器選擇器優先級高於元素選擇器
2. 擴展選擇器：
                1. 選擇所有元素：
                    * 語法： *{}
                2. 並集選擇器：
                    * 選擇器1,選擇器2{}
                
                3. 子選擇器：篩選選擇器1元素下的選擇器2元素
                    * 語法：  選擇器1 選擇器2{}
                4. 父選擇器：篩選選擇器2的父元素選擇器1
                    * 語法：  選擇器1 > 選擇器2{}

                5. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
                    * 語法：  元素名稱[屬性名="屬性值"]{}

                6. 偽類選擇器：選擇一些元素具有的狀態
                    * 語法： 元素:狀態{}
                    * 如： <a>
                        * 狀態：
                            * link：初始化的狀態
                            * visited：被訪問過的狀態
                            * active：正在訪問狀態
                            * hover：鼠標懸浮狀態