前端之CSS介紹（層疊樣式表）-有解無憂

Cascading Style Sheets（CSS）

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

2.如何使用CSS

內部樣式表
1. head標簽里<style></style>
2. 行內樣式，在HTML標簽里面直接寫style
外部樣式表
1. 內容
2. 表現---可以直接引入寫好的CSS樣式檔案（.css）,提高效率
3. 存盤--存盤在CSS檔案中
基本語法
1. 通過xxx{屬性：值}，等同于xxx{key:value}
選擇器
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{}
CSS注釋---/**/
常見的屬性
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
盒子模型
1. 盒模型
2. 邊框
3. 外邊框
4. 內邊框
定位和浮動
1. float：涉及元素的排列方式---left,right
2. position
  1. fixed(固定)
  2. absolute(絕對定位)
  3. relative(相對定位)
DIV標簽布局

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546490.html

標籤：其他

上一篇：HTML表格

下一篇：vue+leaflet示例:地圖分屏對比展示(附原始碼下載)