重溫系列5《css 引入 選著器 選擇器權種》

補充：主流瀏覽器的內核：
IE ： trident ；Firefox：Gecko ；Google chrome ：webkit / blink；Sefari ： webkit ；Opera：presto

1.css的定義：cascading style sheet 層疊樣式表，css就是渲染html用的，修飾，裝飾的作用。給了html色彩。
補充：在後續開發講究，結構(html) 、樣式(css)、 行為(javascript) 相分離。
2.css的引用方式有三種：
2-1.行間樣式：直接在Html標籤後面加上屬性style = ‘css的代碼’，代碼演示如下：

2-2.頁面引入的方式，就是在head標籤裏面寫上style標籤在style{}標籤裏面寫代碼。

2-3.css文件的方式引入（實際開發的時候用，考量補充說明第一點）
第一點：首頁需要獨立創建一個單獨css文件，文件署名也是xxx.css，注意後綴噢。
第二點：在head標籤裏面寫link標籤，如下所示：我單獨引入了一個名為base.css的外包css文件。

補充：在外部文件引入的時候，大家可能會在意他是如何運行的？其實在我們瀏覽一般網頁的時候，我的瀏覽器通過訪問別人的服務器，服務器會傳回一個文件包，這個文件包，涵蓋了所有的文件，例如html css js …當我們的瀏覽器接受到這些文件的時候，如果同時進行，我們稱之為異步加載，不同時進行，稱之為同步加載。

3.css的選擇器：作用是選中DOM標籤元素，將選中的元素給它進行渲染。
3-1.id選著器，現在給div 設置一個id屬性，屬性名為myId。

下面是css的代碼。

      /* id選擇器 */
        #myId{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: red;
        }

被選中的div被css的代碼渲染成這樣：大小為50px，有邊框，背景顏色紅色。

3-2.class選擇器，現在給div設置一個class類名為myClass，選中它，給它添加樣式。

下面試css的代碼：

   .myClass{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: blue;
            color: red;
        }

效果演示：

3-3.標籤選著器，就是標籤自己。例如div，它就是一標籤，同樣可以被css選中。它不需要進行命名，它自己就是一個名字。

所以我直接寫div就可以選中，這個DOM元素。

   div{
            /* 我現在選中的是一個div */
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }

效果如下，並未完全截圖，只是做個簡單說明，最好自己每一個都需要嘗試一下。

3-4.通配符選擇器，用一個 * 表示，如下：

它表示選中所有的元素，這個選著器一般是設置通用屬性，例如字體大小，顏色等。真正開發也是如此，但是做一些小的項目的時候可以用來消除margin值以及padding值。（這個需要掌握盒模型后就比較清楚一些）

3-5.屬性選擇器，就是選擇莫個元素中的莫個屬性。個人感覺用的還是很少。瞭解一下就ok了。
做個簡單的例子，選擇第一個input的標籤。

下面演示如何選中input標籤中的type值為text1的元素。css代碼如下：

       input[type="text1"] {
            color:red;
        }

就是這麼簡單。

4.選擇器的權重（這個點非常重要）：通常我們的一個標籤元素會同時被多個css選擇器選中，那這個標籤到底會執行誰的樣式呢？？？
4-1.首先我們需要知道，css樣式賦給標籤的時候，會有覆蓋作用。
4-2.為什麽會有覆蓋？其一，因為標籤有父子集結構。其二，程式編寫的方法。例如通配符選擇器作用所有標籤，然後又單獨給莫個標籤設置其它樣式，這時候相同屬性就會有覆蓋。
4-3.當產生賦蓋作用的時候，我們需要知道廳誰的。誰大廳誰的！
4-4.css權重，優先級大小（括号表示优先等级）：
！important（无穷大，优先级最高）>
行间样式（1000）>
id（100）>
class/属性/伪类（10）>
标签/伪元素（10）>
通配符（0）
补充：
1-！important写在css代码后，infinity意思是正无穷。
2-这里括号里面的值是256进制！
3-同级别的标签谁在后面就执行谁。