前端之CSS介紹（層疊樣式表）

Cascading Style Sheets（CSS）

1.CSS就是在HTML文檔中，如何顯示HTML標簽，元素，以及他們的樣式佈局，前端頁面的展示形式均由CSS來佈局.

2.如何使用CSS

1. 內部樣式表
   1. head標簽里<style></style>
   2. 內聯樣式，在HTML標簽裡面直接寫style
2. 外部樣式表
   1. 內容
   2. 表現---可以直接引入寫好的CSS樣式文件（.css）,提高效率
   3. 存儲--存儲在CSS文件中
3. 基本語法
   1. 通過xxx{屬性：值}，等同於xxx{key:value}
4. 選擇器
   1. 基本選擇器
      1. 元素選擇器（名稱選擇器）---標簽的名稱:h1{key:value}
      2. 屬性選擇器---id=“屬性名稱”，一般由#號後面跟屬性名稱，
      3. 類選擇器---class選擇器，class關鍵字，用來描述一類樣式的元素---.類名{key:value}
   2. 高級選擇器
      1. 分組選擇器（組合選擇器）---小組1,小組2,小組3...
      2. 通用選擇器---*{margin:0;padding:0}
      3. 後代選擇器---選擇器1 選擇器2 選擇器3...比如：h1 p{}
      4. 兄弟選擇器
      5. 子元素選擇器---比如:ul>li{}
      6. 偽類選擇器---a:hover{},a:active{}.a:visited{}
5. CSS註釋---/**/
6. 常見的屬性
   1. 寬高
      1. width
      2. hegiht
   2. 顏色
      1. color--值
         1. 顏色名稱：red
         2. 顏色進位：#000000
         3. 顏色標識：rgb/rgba
   3. 背景
      1. background-color
      2. background-image
      3. background-repeat
      4. background-postion
   4. 字體
      1. font-size---修改字體大小
      2. font-family---使用哪種字體
      3. font-style:normal
      4. font-weghit:normal bold
   5. 文本
      1. text-align：center,left,right
   6. 鏈接
      1. a標簽：link,active,hover,visited
   7. 列表
      1. 有序列表
         1. list-style:圖片，原點，小三角，矩形，星號...
      2. 無序列表
   8. 表格
      1. table---表格
         1. tr
         2. th
            1. background-color
         3. td
            1. text-align
            2. vertical-align
      2. table-collapse
   9. 輪廓
      1. outline
         1. outline-color
         2. outline-style
7. 盒子模型
   1. 盒模型
   2. 邊框
   3. 外邊框
   4. 內邊框
8. 定位和浮動
   1. float：涉及元素的排列方式---left,right
   2. position
      1. fixed(固定)
      2. absolute(絕對定位)
      3. relative(相對定位)
9. DIV標簽佈局

本文來自博客園，作者：田家少閑月-，轉載請註明原文鏈接：https://www.cnblogs.com/zhaoyunxiang/p/16484240.html