Web 前端入門到精通必會的 CSS 樣式和屬性大全
時間：2023-08-29 23:54:02 | 來源：網站運營
時間：2023-08-29 23:54:02 來源：網站運營
Web 前端入門到精通必會的 CSS 樣式和屬性大全：Web前端入門到精通必會的CSS樣式和屬性，昨天更新了
Web前端入門到精通必學的標簽及屬性大全，得到了很多同學的認可，有同學想要看接下來CSS以及JS的相關基礎內容，今天他來了！
抽時間為大家總結了實際開發(fā)中必會的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 | 規(guī)定計算一個元素實際寬高的方式 |
| display | 設置元素表現的類型，例如： display:block;設置元素表現為塊元素 |
| visibility | 設置元素是否是可見的 |
常用文本樣式屬性
常用文本樣式屬性：color，font-size，font-weight，font-style，text-decoration
| 單詞 | 描述 |
| color | 規(guī)定字體的顏色，也稱為前景色 |
| 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 | 導入樣式規(guī)則 （不常用，了解即可）例如：@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 | 規(guī)定元素的定位類型 |
| relative | 定義相對定位 |
| top | 設置定位元素距離頂部的距離 |
| bottom | 設置定位元素距離底部的距離 |
| left | 設置定位元素距離左側的距離 |
| right | 設置定位元素距離右側的距離 |
| absolute | 定義絕對定位 |
| z-index | 設置定位元素的堆疊順序，數值大的會蓋住數值小的 |
| fixed | 定義絕對定位 |
鼠標樣式
鼠標樣式：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
背景：background相關
| 單詞 | 描述 |
| background-color | 設置背景顏色 |
| background-image | 設置盒子的背景圖片 |
| 設置線性漸變背景 |
| 設置徑向漸變背景 |
| background-repeat | 設置背景圖像是否重復 |
| background-size | 設置背景圖片大小 |
| background-clip | 設置背景的繪制區(qū)域（不常用，了解即可） |
| background-origin | 設置背景圖片顯示區(qū)域的位置（不常用，了解即可） |
| 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老師博客（
http://www.arryblog.com），來這里學習更多的課程！
在線咨詢
