CSS樣式思維導(dǎo)圖

├──選擇器
│  ├──元素選擇器
│  ├──類選擇器
│  ├──ID選擇器
│  ├──后代選擇器
│  ├──偽類選擇器
│  └──偽元素選擇器
├──樣式屬性
│  ├──顏色
│  ├──背景
│  ├──文本
│  ├──字體
│  ├──邊框
│  ├──尺寸
│  ├──布局
│  ├──盒模型
│  ├──動(dòng)畫
│  └──過(guò)渡
├──層疊樣式表(CSS)引入方式
│  ├──內(nèi)聯(lián)方式
│  ├──嵌入式方式
│  └──外部引入方式
├──CSS優(yōu)先級(jí)
│  ├──!important
│  ├──行內(nèi)樣式
│  ├──ID選擇器
│  ├──類選擇器/屬性選擇器/偽類選擇器
│  ├──元素選擇器/偽元素選擇器
│  └──繼承樣式
├──盒模型
│  ├──內(nèi)容
│  ├──內(nèi)邊距
│  ├──邊框
│  └──外邊距
├──居中
│  ├──水平居中
│  ├──垂直居中
│  └──水平垂直居中
├──響應(yīng)式布局
│  ├──@media查詢
│  ├──彈性布局
│  ├──柵格布局
│  └──流式布局
└──CSS框架
├──Bootstrap
├──Semantic UI
└──Foundation

以上是CSS樣式思維導(dǎo)圖的各個(gè)部分，在學(xué)習(xí)CSS時(shí)，掌握好選擇器、樣式屬性、優(yōu)先級(jí)、盒模型、居中、響應(yīng)式布局、CSS框架這些基本內(nèi)容，就可以不斷學(xué)習(xí)更多的CSS技巧，打造出各種優(yōu)美的網(wǎng)頁(yè)。