Web前端入門級學習筆記

1.基本概念

css-cascading style sheet

2.網頁設計中HTML,CSS,JavaScript地位

HTML：內容

CSS：呈現（樣式）

JavaScript：互動（頁面的動態效果）

實現：內容與樣式與互動的分離

3.CSS的基本語法

選擇器{

         k:v;

         k:v;

         k:v;

      }

學法：多觀察、多做

必須記住這些樣式表的屬性和它對應的值

4.CSS程式碼能寫在3個地方，或者說3種用法

（1）行內樣式；堅決杜絕

（2）內連樣式；學習階段使用

（3）外鏈樣式；把樣式表程式碼移出到一個單獨的.CSS檔案中，內容與呈現的物理分離

5.樣式表的基本語法—選擇器

（1）標籤名做選擇器

    只寫標籤名就行，不要加"< >"。

    標籤名做選擇器會把當前頁面上的所有這個型別的標籤都選中

（2）id做選擇器

    每一個頁面標籤都可以新增id屬性

    標籤的id值必須遵循以下的規範：

              1、只能由字母、下劃線、數字組成

              2、必須是字母開頭

              3、不能與標籤名同名

              4、儘量使用有意義的單詞縮寫，比如：nav（導航欄）

注意：1.任何一個頁面上不能出現重名的id

        通過實驗我們發現，如果出現同名的id,瀏覽器會把同名id的元素都使用相同的樣式修飾，但是不代表你可以這麼做。id是表示唯一性的：getElementById()

      2.頁面上的任意一個元素，都可以同時被多個選擇器同時選中，並且這多個選擇器能同時作用於這個標籤，也就是多個選擇器選中同一個標籤，他們的樣式能疊加下來，這就是CSS為啥叫：“層疊”的一個原因

      3.如果多個選擇器選中同一個元素後，他們之間的樣式有衝突，那麼這時候就存在一個選擇器優先順序問題

前臺和後臺分離，便於改版

（3）類名做選擇器

    1、用類名做選擇器，必須在類名前打.

    2、所有的標籤都可以有class屬性

    3、class屬性的名字與id命名規範一樣

    4、一個標籤的id名和class名甚至可以相同，但是千萬不要這麼做

    5、不同型別的標籤可以從屬於同一個class

    6、一個標籤可以從屬於多個不同的class

       (1)不同的類名之間必須用“空格”隔開

       (2)不允許在標籤裡出現2個class屬性，任何一個html標籤內部都不能出現相同名字的屬性

    7、儘量使用原子化的類，少用大而全的類

    8、樣式表中，儘量使用class，儘量不用id做選擇器：

class上樣式,，id上行為。class是為樣式表準備的，id是為你JS準備的

    document.getElemetById() 

    document.getElemetByClass()

    從語義上來講，class是表示同一類元素，但是我們在樣式表中即使這一類只有1個標籤，我們也用class，不用id做選擇器

（4）後代選擇器

     注意：後代選擇器不是兒子選擇器（直接的子元素）還有孫子，重孫子...

     問題：用後代選擇器還是用直接給元素上個類，使用類選擇器？

      後代選擇器的意圖是：

          表達出：把在頁面上的某一部分（區域）之內的所有什麼什麼元素，樣式設定為、、、、 

（5）交集選擇器

     語法：標記名，類名，類名...

     後代選擇器是打空格，交集選擇器不要空格

（6）並集選擇器（組選擇器）

     語法：多個選擇器之間用逗號隔開，表示被選中的這些元素，採用相同的樣式

（7）萬用字元*

     *表示選中頁面上的所有元素（一般用來做初始化）。這麼做不好，效率太低。

6.CSS的繼承性

（1）只能把自己的樣式繼承給後代節點，但是不能影響自己的父節點和兄弟節點

（2）什麼屬效能繼承下來？修飾文字樣式的屬效能被繼承下來。color、text-、font-、line-

     不是修飾文字的屬性不能被後代節點繼承下來。比如：有關盒子模型的屬性、定位的屬性、背景屬性

7.CSS的層疊性

1.   層疊性指的是當CSS的樣式產生衝突時的處理機制。

2.   層疊性的優先順序：算權重的演算法，誰權重大，就聽誰的，權重小的就會被覆蓋掉。

3.   計算權重的描述方式（id的個數，class的個數，標籤名的個數）——比較時先比較id，然後數類、、

4.   id 的優先順序最高，class 的優先順序次之，標籤名的優先順序最低。並且三者之間不存在進位。（實際上也是存在進位的，255個進一位，所以根本沒有意義）

5. 如果都選中了同一個元素，並且權重計算都一樣，聽誰的？  誰寫在最後就聽誰的，後面的可以把前面的覆蓋掉

6. 如果是繼承過來的樣式，權重是0（如果沒有直接選中這個標籤，你給他寫的屬性的權重是0）

7. 如果大家都沒直接選中，權重是0，這個時候有一個“就近原則”

判斷哪個樣式起作用：

（1）先看有沒有直接選中

（2）如果選中了，就計算權重

（3）如果權重都一樣，誰寫在最後誰起作用

（4）如果都沒有選中，採用就近原則

注意：內連樣式無論權重多大，都幹不過行內樣式。但是，如果使用行內樣式，就違背了我們內容與呈現與互動的相分離的初衷。所以無論如何也不要使用行內樣式

8.！important 屬性

    !important屬性是修飾符，它的語法是 K:V !important;

    錯誤寫法：（1）K:V;!important;

                      （2）.box1 !important{;}

   !important 屬性，只能提升一條語句的優先順序，不能提升一個選擇器的優先順序。

   !important 把被修飾的語句優先順序提升到無窮大。

   如果被層疊的樣式都使用!important 修飾，那麼按照語句所在選擇器的權重來起作用。

   如果是繼承過來的樣式，它的權重是0，!important 屬性無法提升權重為0的樣式

   如果樣式都是繼承過來的，!important 能否提升 （能打破就近原則麼）？  還是就近原則管用。