T-CSS基礎-day01-CSS語法規範、CSS基礎選擇器

一.CSS概述

• CSS：Cascading Style Sheets 層疊樣式表，級聯樣式表，簡稱樣式表

1. 作用
   修飾html元素的樣式（亞洲4大邪術）
2. HTML和CSS的關係
   html負責頁面的結構的搭建，數據的承載
   css負責讓html元素變得好看
   以html爲基準，一層層的編寫樣式
3. html的屬性和css的樣式我們選擇誰
   W3C建議我們儘量使用css的方式來取代html的屬性
   css樣式，可以讓代碼進行重用(重用效果有限),提供了可維護性

二.CSS的語法規範

1. 使用css樣式
   1. 內聯樣式(行內樣式)
      任意元素都有style屬性，在style中定義的樣式，叫內聯樣式(項目中一般少用)
      
      如果style中，有多個樣式，使用;來分割
      <div style="color:red;background-color:pink;font-size:50px;">
      特點：1.不能重用；2.內聯樣式優先級最高
      目前需要掌握的3個css樣式屬性
      color:合法的顏色值；設置字體顏色
      background-color:合法的顏色值; 設置背景顏色
      font-size: **px； 設置字號大小
   2. 內部樣式
      在head標籤中，定義style標籤
      在style標籤中，定義樣式
      格式：選擇器{樣式聲明;樣式聲明;....}
      特點：1.代碼可以重用；2.重用只能在當前頁面重用
      項目中用的較少，在學習和測試的時候，使用較多（淘寶仍在用內部樣式，原因：框架是歐洲的）
   3. 外部樣式
      單獨創建一個css文件編寫樣式
      在html中的head標籤中，調用這個樣式
      <link rel="stylesheet" href="my.css"/>

      ---

      練習：css3種使用方式
      01_ex
      <h1>lorem內聯，背景pink，字體yellow
      <h2>lorem內部，背景yellow，字體red
      <h3>lorem外部，背景red，字體pink

      ---

2. css特性
   1. 繼承性
      多數樣式是可以被子元素繼承（但有些元素是不能繼承的，例：尺寸，邊框，內外邊距…）
      
      特殊的：a標籤不能繼承父級的字體顏色
   2. 層疊性
      可以爲一個元素定義多個樣式規則
      如果這些樣式樣式規則不衝突，那麼都可以應用到元素上
   3. 優先級
      當爲一個元素設置很多樣式
      其中樣式發生了衝突，要按照樣式的優先級來應用樣式
      默認優先級規則：
      1. 最高----內聯樣式
      2. 內部樣式和外部樣式：就近原則（誰距離目標元素近，使用誰）
      3. 最低----瀏覽器默認樣式
   4. 使用關鍵字調整樣式的優先級
      !important 提升優先級
      h4{color:#069 !important;}
      注意：1.!important比內聯優先級還高；2.內聯中,語義要求，不允許添加!important;

      ---

      練習 03_ex.html中
      一個p標籤，內容假文
      內部，文本blue,字號24px；
      外部，文本red，字號40px
      將外部引入，f12觀察效果
      內聯，文本yellow。f12觀察效果
      改變外部文件引入位置，f12觀察
      給外部添加！important.觀察效果

      ---

三.基礎選擇器(重點★)

1. 選擇器的作用
   官方：規範了頁面中哪些元素能夠使用定義好的樣式
   理解：選擇器就是一個條件，符合這個條件的元素，都可以使用定義好的樣式
2. 選擇器的詳解

   1. 通用選擇器
      *{樣式聲明}：所有元素都要匹配這個樣式：
      所有語言都要求大家儘量少用*，因爲效率非常低
      *{margin:0;padding:0}：所有元素的內邊距和外邊距清空。這個行爲叫做css reset 樣式重置。由於不同瀏覽器對同一篇代碼的解析有可能不同。所以寫代碼的時候，需要把一些樣式進行統一，或者清除。

   2. 標籤選擇器，元素選擇器
      一般用於定義某種元素的公用樣式
      元素名稱{樣式聲明}
      頁面中所有對應元素，都要應用這個樣式

   3. id選擇器
      只對當前頁面中，一個標籤生效(id不會重複)
      一般項目中id選擇器，單獨使用比較少。
      項目中#id選擇器通常用於後代和子代選擇器的第一部分
      學習和測試單獨使用比較多
      body中：<p id="p1">，可以用p#p1+tab鍵快捷輸入
      head中：#p1{樣式聲明}

      ---

      練習，03_ex.html
      h2標籤，內容是假文，id是text1
      使用id選擇器設置文本顏色purple，背景爲黃色，字體爲斜體font-style:italic.
      再使用元素選擇器，設置文本爲紅色，背景爲pink。
      寫完後會對就近原則產生疑問，不理解

      ---

   4. 類選擇器
      定義頁面上的一個樣式片段，哪個元素想用，就使用class調用，可以不停的被重用
      .類名{樣式聲明} 聲明類名有點
      <元素名 class="類名"> 調用類名沒有點
      注意，類名的定義規則
      1.定義類選擇的時候，點不能省略
      2.類名不能以數字開頭
      3.只能包含-或_
      4.見名知意
      類選擇器的特殊使用方式

      1. 多類選擇器，一個class中，引用多個類名
         <h4 class="text-red bg-yellow">類選擇器</h4>
      2. 分類選擇器
         1. 標籤選擇器.類選擇器{樣式聲明}
            調用這個類名的這個標籤，應用這個樣式，提升權值
         2. 類選擇器.類選擇器{樣式聲明}
            同時引用了這兩個類選擇器的標籤，應用這個樣式

      ---

      練習，在03_ex.html中
      添加div和p標籤，內容隨意（假文）
      用類選擇器爲所有元素設置字體顏色爲紅色
      用分類選擇器專門爲p標籤設置背景顏色爲黑色black

      ---

   5. 羣組選擇器-同時爲多個選擇器定義一種樣式
      選擇器1，選擇器2，選擇器3.......{樣式聲明}

   6. 後代選擇器
      元素的後代關係，匹配元素
      後代關係，一級或者多於一級的嵌套
      選擇器1 選擇器2 選擇器3....{樣式聲明}

   7. 子代選擇器
      通過元素的子代關係，匹配元素
      子代關係,一級的嵌套
      選擇器1>選擇器2>選擇器3…{樣式聲明}
      注意，後代選擇器和子代可以混寫，例：
      #d1 p>span{}
#d1 >p span{}

   8. 僞類選擇器
      匹配元素不同狀態下的樣式

      1. 鏈接未被訪問時的狀態
         元素:link{樣式聲明}
      2. 鏈接已訪問的狀態
         元素:visited{樣式聲明}
      3. 鼠標懸停時的狀態（常用）
         元素:hover{樣式聲明}
      4. 元素被激活時的狀態（按住該元素不放手時）
         元素:active{樣式聲明}
      5. 元素獲取焦點時的狀態
         元素:focus{樣式聲明}

         ---

         練習04_ex.html
         一個a標籤，內容隨意，跳轉一個未訪問過的頁面
         1.訪問後，文本顏色orange
         2.被激活時，文本顏色綠色
         3.鼠標懸停時，文本顏色紅色
         4.未被訪問時，文本顏色pink

         ---

         當4種狀態作用到同一個元素上，會發生衝突，必須按照一定順序編寫：愛恨原則 love & hate：link/visited/hover/active

   9. 選擇器權值問題
      !important >1000
      內聯樣式 1000
      id選擇器 100
      類選擇器 10
      僞類選擇器 10
      元素選擇器 1
      通用選擇器* 0
      繼承的樣式 無
      權值:表示當前選擇器的重要程度，權值越大優先級越高，特點：

      1. 當一個選擇器中含有多個選擇器時，需要將所有選擇器的權值進行相加，結果越大優先級越高
      2. 權值相同，使用就近原則
      3. 羣組選擇器權值不能相加，單獨計算
      4. 樣式後面添加了!important直接獲得最高權值，內聯樣式不能添加!important
      5. 權值計算結果不能超這個權值的最大數量級(1萬個元素選擇器加一起，也比10小，最大權值爲9)

四.尺寸和邊框

1. 尺寸
   設置元素在頁面中的寬高
   width:
height:
   取值：以px爲單位的數字
   附加知識點----單位
   尺寸的單位：
   1. 絕對單位（項目中用的少）：
      1. px 像素
      2. in 英寸 1in=2.54cm
      3. pt 磅值，多用於定義字號大小。1pt=1/72in
      4. cm
      5. mm
   2. 相對單位：
      1. em:以父元素設置的值爲一個基本單位，1.5em。就是1.5個基本單位
      2. rem:以html標籤設置的值爲一個基本單位
         如果html沒有設置值，1rem默認爲16px
      3. % 多數是父元素設置值的百分比