CSS層疊樣式表用來美化網頁，被稱為網頁的美術師，非常有趣和好玩，一起來學習吧！

知識點01: CSS---層疊樣式表
    HTML只關注內容的語義，不能滿足設計者的需要，
    操作HTML屬性不方便，
    給程式碼帶來更多的繁瑣和臃腫,不易維護，所以它有一定的侷限性，
    css層疊樣式表可以美化網頁，稱為網頁的美容師。
    所以HTML專注去做結構呈現，樣式交給CSS。
知識點02：CSS初識---版面的佈局和外觀顯示樣式
    gray：灰色；pink: 粉紅色；purple：紫色；blue：藍色；green：綠色；hotpink、deeppink：深粉；orange：橙色；
    css書寫位置：
    行內式：內聯式：行內/間樣式，寫在作用標籤裡,<標籤名 sytle="屬性：屬性值；">,控制範圍少
    內部樣式表（內嵌樣式表）：將style程式碼集中寫在HTML文件的head 中，控制範圍中
        <style>     選擇器 {樣式屬性：屬性值;}    </style>
    外部樣式表(結構樣式分離)：將所有的樣式放在一個或多個以.css為副檔名的檔案中，注意，這時HTML中就不需要寫sytle了，控制範圍多
             語法：<link   rel="stylesheet"  type="text/css   href="css放置路徑"  />，這句話就是給HTML檔案和CSS檔案簡歷一種聯絡，需要引入。
知識點03: 外部樣式表---樣式共享
    可以讓多個頁面使用相同的樣式檔案，
    團隊約定--程式碼風格：一種是緊湊型，一種是展開式，
    團隊約定--程式碼大小寫：樣式選擇器，屬性名，屬性值，關鍵字全部使用小寫字母書寫，屬性字串允許使用大寫。
知識點04：CSS樣式規則
    h1    { color : red;   font-size : "25px"  }
    選擇器      屬性 ：值；（鍵值對）
知識點05: CSS選擇器
    選擇器的作用：選擇標籤的，
    ①標籤選擇器---p{ 屬性：值 }；
    用html標籤名稱作為選擇器，按標籤名來分類，
    ②類選擇器---.red{屬性：值};<標籤名 class="red" >
    語法：     .類名 { 屬性：值 }；       <標籤名 class="類名" >來呼叫，類命名儘量用英文字母
    △  類選擇器特殊用法（多類名）：給標籤多個類名，方便選擇，一個標籤內只能用一個class
    ③id選擇器以及和類選擇器的區別---#類名，id="類名"
    語法：id選擇器使用"#類名，後跟“id="" ”,類名id和類選擇器區別在使用次數上不同，id選擇器用於頁面唯一性的元素屬性身上。
    ④萬用字元選擇器---*{ 屬性：值 }；
    萬用字元選擇器可以將頁面所有的元素選取，降低頁面響應速度，不建議  隨便  使用。
    ⑤屬性選擇器---  標籤名 [屬性="屬性值"] { …… }；
    例如：input[type="button"]  {
                 color: green;
                 font-weight:700;
                       }
知識點06：團隊約定---選擇器使用
    儘量少用通用選擇器，
    少用ID選擇器，
    不使用無具體語義定義的選擇器。
知識點07：字型樣式---font-xxx：；
    ①語法：font-size：16px；
    font-size：字號大小，單位：em相對單位，一般用於首行縮排（相對於當前物件內文字的文字尺寸）、px畫素（常用,css中用的一般都是px）in 英寸、cm釐米、mm毫米、pt點，
    一般給body指定整個頁面的文字字號，
    ②語法：font-family："microsoft yahei";
    font-family：字型，如果指定多個子體，那麼要用英文逗號隔開，表示如果瀏覽器不支援第一個字型，則會選擇下一個，知道找到合適的字型，如果沒有，則儘量使用電腦系統自帶字型，注意，漢字或多個英文連字字型要加引號，單雙引號都可以。
    unicode字型：直接用Unicode字型可以避免瀏覽器編譯亂碼，但Unicode字型字不同的字符集編碼下要了解其字型對應什麼，例如“\5B8B\4F53”這是在UTF-8字符集下宋體字型。
    ③語法：font-weight: normal；
    font-weight：字型加粗，normal正常的、bold加粗、bolder更加粗、lighter較細、100-900加粗數值，400相當於normal，700相當於bold
    語法：font-weight：700;    該標籤不加任何單位，沒有單位
    ④語法：font-style：normal;
    font-style：字型風格 , normal 正常的、italic 斜體的，oblique 傾斜的字型（特殊字元應用，很少用，基本不用）
知識點08：字型綜合寫法---font：；
    語法：font：font-style   font-weight  font-size/line-height   font-family;
    //font：字型樣式  字型加粗 字型字號/行高  字型
    注意：順序一定不能改變，有些屬性可以有省略，但一定要保留font-size和font-family，必須要寫，不能省略。 
知識點09：CSS外觀屬性
    文字顏色：color：#000000；三種方法：①直接寫英文②16進位制或簡寫③rgb(0,0,0);或rgba(0,0,0,0.5);   a是透明度，透明度為0.5
    文字首行縮排---text-indent：2em；1em是1個字元的寬度，即一個字；
    文字居中---text-align：center；//有三種方式right右邊、center中間、left左邊，注意：不能直接設定給span 、a標籤
    文字行高：line-height：15px；
    文字裝飾：text-decoration（裝飾、修飾）：none；有三種：none、underline，blink閃爍、line-through貫穿線（刪除線）、overline上劃線，可以給文字新增，可以給文字取消。注意：記住如何給一個普通的文字新增下劃線。
知識點10：開發者工具---chrome
    F12鍵開啟檢視網頁元素，或點選右鍵-》檢查都可以，可更改檢視頁面排列方式和查詢網頁元素錯誤，及時更正和維護。
知識點11：emmet語法
    div*3    生成3個div標籤
    .demo    生成1個class的div類標籤
    .demo$3  如果生成的div類名是按順序排列的，可使用$來快捷遞增    
    結果是：   <div class="demo1"></div>
        <div class="demo2"></div>
        <div class="demo3"></div>
    還有很多快捷鍵，具體可以去網上查詢，可去mdn。