Web前端入門到精通必會的CSS樣式和屬性，昨天更新了Web前端入門到精通必學的標籤及屬性大全，得到了很多同學的認可，有同學想要看接下來CSS以及JS的相關基礎內容，今天他來了！
抽時間爲大家總結了實際開發中必會的CSS、CSS3樣式和屬性（常用和不常用的內容都有標註），做成了網頁版，以便於查詢使用，對於初學者來說可以少走彎路，明確重點，時間誠可貴呀️！
盒模型
盒模型：width，height，padding，margin，box-sizing，display，visibility
|
單詞 |
描述 |
|
width |
設置元素的寬度 |
|
height |
設置元素的高度 |
|
padding-top |
設置元素上內邊距 |
|
padding-right |
設置元素右內邊距 |
|
padding-bottom |
設置元素內邊距 |
|
padding-left |
設置元素左內邊距 |
|
padding |
設置元素四個方向的內邊距 |
|
margin-top |
設置盒子與上方盒子的距離 |
|
margin-right |
設置盒子與右方盒子的距離 |
|
margin-bottom |
設置盒子與下方盒子的距離 |
|
margin-left |
設置盒子與左方盒子的距離 |
|
margin |
設置在上、右、下和左四個方向的外邊距 |
|
box-sizing |
規定計算一個元素實際寬高的方式 |
|
display |
設置元素表現的類型，例如： display:block;設置元素表現爲塊元素 |
|
visibility |
設置元素是否是可見的 |
常用文本樣式屬性
常用文本樣式屬性：color，font-size，font-weight，font-style，text-decoration
|
單詞 |
描述 |
|
color |
規定字體的顏色，也稱爲前景色 |
|
font-size |
設置字體大小 |
|
font-weight |
設置字體粗細 |
|
font-style |
設置字體樣式 |
|
text-decoration |
設置添加到文本的裝飾線 |
字體屬性
字體屬性：font-family，@font-face
|
單詞 |
描述 |
|
ont-family |
設置元素的字體 |
|
@font-face |
定義字體，例如：阿里巴巴普惠體 |
段落和行相關屬性
段落和行相關屬性：text-indent，line-height，text-align，font
|
單詞 |
描述 |
|
text-indent |
設置首行文本的縮進 |
|
line-height |
設置文本行間的距離（行高） |
|
text-align |
設置文本對齊方式 |
|
font |
設置所有字體屬性 |
CSS的書寫位置
css的書寫位置：style，link，@import
|
單詞 |
描述 |
|
style |
1、內嵌式，書寫在head標籤對中，使用<style></style>標籤對，裏面書寫css樣式。例如： <head> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head> 2、行內式，直接在標籤上書寫style屬性設置css樣式。這種方式不常用，瞭解即可 示例：<h1 style="color:blue;text-align:center">這是一個標題</h1> |
|
link |
鏈接外部樣式文件,例如： <head> <link rel="stylesheet" href="css文件"> </head> |
|
@import |
導入樣式規則 （不常用，瞭解即可） 例如：@import url('css文件') |
層疊性和選擇權重
層疊性和選擇權重：!important
|
單詞 |
描述 |
|
!important |
提升權重（不常用，瞭解即可） |
僞元素
僞元素：::before，::after，::selection，::first-letter，::first-line
|
單詞 |
描述 |
|
::before |
作爲匹配選中元素的第一個子元素，必須設置content屬性 |
|
::after |
作爲匹配選中元素的最後一個子元素，必須設置content屬性 |
|
::selection |
設置文檔中被用戶高亮的部分，即使用鼠標圈選的部分（不常用，瞭解即可） |
|
::first-letter |
選擇塊元素中的第一個字母設置樣式（不常用，瞭解即可） |
|
::first-line |
選擇塊元素中的第一行全部文字設置樣式（不常用，瞭解即可） |
僞類
僞類：:link，:visited，:active，:hover
|
單詞 |
描述 |
|
:link |
選擇所有未被訪問的超級鏈接 |
|
:visited |
選擇所有訪問過的超級鏈接 |
|
:active |
選擇被用戶激活的元素 |
|
:hover |
選擇鼠標懸停的元素 |
css3新增僞類
css3新增僞類：:empty，:focus，:enabled，:disabled，:checked，:root （不常用，瞭解即可）
|
單詞 |
描述 |
|
:empty |
選擇沒有任何子級的元素 |
|
:focus |
選擇當前獲得焦點的元素 |
|
:enabled |
選擇已啓用的元素 |
|
:disabled |
選擇禁用的元素 |
|
:checked |
選擇選中的輸入元素（僅適用於單選按鈕或複選框） |
|
:root |
選擇根元素，即標籤 |
標籤選擇器和id選擇器
標籤選擇器和id選擇器 ：element、#id
|
單詞 |
描述 |
|
element |
標籤選擇器，直接使用元素的標籤名，表示選擇指定元素名稱的所有元素 示例：p{color:red;}選擇所有的p標籤 |
|
#id |
id選擇器，使用井號#作爲前綴，表示選擇指定id的元素 示例：#firstname{color:yellow;} 選擇id=firstname" 的元素 |
class 選擇器
class 選擇器：.class
|
單詞 |
描述 |
|
.class |
class選擇器，使用點.作爲前綴， 表示選擇指定類名的元素 p示例：.intro{color:red;} 選擇class="intro" 的元素 |
複合選擇器
複合選擇器：後代，交集，並集
|
單詞 |
描述 |
|
element1 element2 |
後代選擇器，使用空格分隔兩個元素 示例：.box p{} 表示選擇類名爲box的標籤的後代元素p標籤 |
|
element1.class |
交集選擇器 示例：h3.spec{} 表示選擇有.spec類的<h3>標籤 |
|
element1,element2 |
並集選擇器，也叫分組選擇器，使用逗號隔開 示例：ul, ol{} 表示同時選擇<ul>標籤和<ol>標籤 |
元素關係選擇器
元素關係選擇器：子選擇器，相鄰兄弟，通用兄弟選擇器
|
單詞 |
描述 |
|
element>element |
子選擇器，使用 > 符號分隔兩個元素 示例： div > p {} 選擇<div>下的所有子級<p>元素 |
|
element+element |
相鄰兄弟選擇器，使用 + 分隔兩個元素 示例：div + p {}選擇所有緊接着 <div> 元素之後的第一個<p>元素 |
|
element1~element2 |
通用兄弟選擇器，使用 ~ 分隔兩個元素 示例：p~ul {}選擇同一父元素下的 p 元素之後的每一個 ul 元素 |
序號選擇器
序號選擇器：:first-child，:last-child，:nth相關
|
單詞 |
描述 |
|
:first-child |
匹配其父元素中的第一個子元素 示例：p:first-child{}匹配<p>的父元素的第一個<p>元素 |
|
:last-child |
匹配父元素中最後一個子元素 示例：p:last-child{}匹配<p>的父元素下最後一個<p>元素 |
|
:nth-child(n) |
匹配父元素中的第 n 個子元素 示例：p:nth-child(2)匹配<p>的父元素中第2個子元素<p>標籤 |
|
:nth-of-type(n) |
匹配同類型中的第n個同級兄弟元素 （不常用，瞭解即可） 示例：p:nth-of-type(2){}指定每個<p>元素匹配同類型中的第2個同級兄弟元素 |
|
:nth-last-child(n) |
匹配屬於其父元素的第n個子元素的所有元素，從最後一個子元素開始計數 （不常用，瞭解即可） 示例：p:nth-last-child(2){}指定每個<p>元素匹配同類型中的倒數第2個同級兄弟元素 |
|
:nth-last-of-type(n) |
匹配同類型中的倒數第n個同級兄弟元素，從最後一個子元素開始計數（不常用，瞭解即可） 示例：p:nth-last-of-type(2){}指定每個<p>元素匹配同類型中的倒數第2個同級兄弟元素 |
屬性選擇器
屬性選擇器：[attribute]、[attribute=value]、[attribute^=value]、[attribute$=value]、[attribute*=value] 、[attribute~=value] 、[attribute|=value] （不常用，瞭解即可）
|
單詞 |
描述 |
|
[attribute] |
選擇指定屬性的元素 |
|
[attribute=value] |
選擇指定了屬性和值的元素 |
|
[attribute^=value] |
選擇屬性值帶指定的值開始的元素 |
|
[attribute$=value] |
選擇屬性值帶指定的值結尾的元素 |
|
[attribute*=value] |
選擇元素屬性值包含指定值的元素 |
|
[attribute~=value] |
選擇屬性值包含一個指定單詞的元素 |
|
[attribute|=value] |
選擇屬性值以指定值開頭的元素 |
浮動
浮動：float，BFC，overflow，clear
|
單詞 |
描述 |
|
float |
設置元素浮動 |
|
BFC |
塊級格式化上下文，它是頁面上一個獨立的容器 |
|
overflow |
溢出隱藏：溢出盒子邊框的內容會被隱藏，也可以讓盒子形成BFC（塊級格式上下文） |
|
clear |
清除元素的浮動 |
定位
定位：position，relative，top，bottom，left，right，absolute，z-index，fixed
|
單詞 |
描述 |
|
position |
規定元素的定位類型 |
|
relative |
定義相對定位 |
|
top |
設置定位元素距離頂部的距離 |
|
bottom |
設置定位元素距離底部的距離 |
|
left |
設置定位元素距離左側的距離 |
|
right |
設置定位元素距離右側的距離 |
|
absolute |
定義絕對定位 |
|
z-index |
設置定位元素的堆疊順序，數值大的會蓋住數值小的 |
|
fixed |
定義絕對定位 |
鼠標樣式
鼠標樣式：cursor
|
單詞 |
描述 |
|
cursor |
設置光標的形狀 |
邊框
邊框：border相關，屬性（solid，dashed，dotted）
|
單詞 |
描述 |
|
border-width |
設置邊框的寬度 |
|
border-style |
設置邊框線的形狀 |
|
border-color |
設置邊框的顏色 |
|
border-top-width |
設置上邊框寬度 |
|
border-right-width |
設置右邊框寬度 |
|
border-bottom-width |
設置下邊框寬度 |
|
border-left-width |
設置左邊框寬度 |
|
border-top-style |
設置上邊框樣式 |
|
border-right-style |
設置右邊框樣式 |
|
border-bottom-style |
設置下邊框樣式 |
|
border-left-style |
設置左邊框樣式 |
|
border-top-color |
設置上邊框顏色 |
|
border-right-color |
設置右邊框顏色 |
|
border-bottom-color |
設置下邊框顏色 |
|
border-left-color |
設置左邊框顏色 |
|
border-top |
上方向邊框樣式的複合寫法 |
|
border-bottom |
下方向邊框樣式的複合寫法 |
|
border-right |
右方向邊框樣式的複合寫法 |
|
border-left |
左方向邊框樣式的複合寫法 |
|
border |
邊框的複合寫法，設置所有的邊框屬性 |
|
solid |
定義實線邊框 |
|
dashed |
定義虛線邊框 |
|
dotted |
定義點狀線邊框 |
圓角
圓角：border-radius
|
單詞 |
描述 |
|
border-top-left-radius |
設置左上方的圓角 |
|
border-top-right-radius |
設置右上方的圓角 |
|
border-bottom-left-radius |
設置左下方的圓角 |
|
border-bottom-right-radius |
設置右下方的圓角 |
|
border-radius |
設置圓角的複合寫法 |
盒子陰影
盒子陰影：box-shadow
|
單詞 |
描述 |
|
box-shadow |
給元素添加陰影效果 |
背景：background相關
|
單詞 |
描述 |
|
background-color |
設置背景顏色 |
|
background-image |
設置盒子的背景圖片 |
|
設置線性漸變背景 |
|
|
設置徑向漸變背景 |
|
|
background-repeat |
設置背景圖像是否重複 |
|
background-size |
設置背景圖片大小 |
|
background-clip |
設置背景的繪製區域（不常用，瞭解即可） |
|
background-origin |
設置背景圖片顯示區域的位置（不常用，瞭解即可） |
|
background-attachment |
設置背景圖像是否固定或者隨着頁面的其餘部分滾動（不常用，瞭解即可） |
|
background-position |
設置背景圖像的位置 |
|
background |
設置背景樣式的複合寫法 |
瀏覽器前綴
瀏覽器前綴：-webkit-，-moz-，-ms-，-o-
|
單詞 |
描述 |
|
-webkit- |
谷歌瀏覽器的私有前綴 |
|
-moz- |
火狐瀏覽器的私有前綴 |
|
-ms- |
IE、Edge瀏覽器的私有前綴 |
|
-o- |
歐朋瀏覽器的私有前綴 |
2D/3D轉換
2D/3D轉換：transform，transform
|
單詞 |
描述 |
|
transform |
對元素進行旋轉、縮放、移動或傾斜 |
|
transform-origin |
設置元素變換的原點 （不常用，瞭解即可） |
|
scale |
設置縮放變形（不常用，瞭解即可） |
|
skew |
設置斜切變形（不常用，瞭解即可） |
|
translate |
設置位移變形 |
|
perspective |
設置透視強度，即“人眼到舞臺的距離” |
還需要總結什麼 ？需要的同學留言，做我的粉絲我會寵你 接下來我會抽時間把這15年的Web全棧相關的經驗和知識從入門到精通逐一總結出來
內容來自：arry 老師博客（www.arryblog.com），上博客關注更多內容！