溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹css中屬性分為哪些類別，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
css屬性的分類：動(dòng)畫屬性、轉(zhuǎn)換屬性、過渡屬性、Box屬性、Marquee屬性、尺寸屬性、外邊距屬性、內(nèi)邊距屬性、邊框?qū)傩?、定位屬性、多列屬性、可伸縮框?qū)傩?、列表屬性、Grid屬性、表格屬性、文本屬性、字體屬性、Color屬性、背景屬性等。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3版、Dell G3電腦。
css的屬性分類
| 動(dòng)畫屬性分類 | CSS3 動(dòng)畫屬性（Animation） | 2D/3D 轉(zhuǎn)換屬性（Transform） | 過渡屬性（Transition） | Box 屬性 | Marquee 屬性 |
| 尺寸/位置-- | CSS 尺寸屬性（Dimension） | CSS 外邊距屬性（Margin） | CSS 內(nèi)邊距屬性（Padding） | CSS 邊框?qū)傩裕˙order 和 Outline） | CSS 定位屬性（Positioning） |
| --列表/表格 | 多列屬性（Multi-column） | 可伸縮框?qū)傩裕‵lexible Box） | CSS 列表屬性（List） | Grid 屬性 | CSS 表格屬性（Table） |
| 文本字體顏色 | CSS 文本屬性（Text） | CSS 字體屬性（Font） | Color 屬性 | CSS 背景屬性（Background） | |
| 少用屬性 | Hyperlink 屬性 | 內(nèi)容生成（Generated Content） | Content for Paged Media 屬性 | 用戶界面屬性（User-interface） | Paged Media 屬性 |
| CSS 打印屬性（Print） |
| 屬性 | 描述 | CSS |
|---|---|---|
| @keyframes | 規(guī)定動(dòng)畫。 | 3 |
| animation | 所有動(dòng)畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | 3 |
| animation-name | 規(guī)定 @keyframes 動(dòng)畫的名稱。 | 3 |
| animation-duration | 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。 | 3 |
| animation-timing-function | 規(guī)定動(dòng)畫的速度曲線。 | 3 |
| animation-delay | 規(guī)定動(dòng)畫何時(shí)開始。 | 3 |
| animation-iteration-count | 規(guī)定動(dòng)畫被播放的次數(shù)。 | 3 |
| animation-direction | 規(guī)定動(dòng)畫是否在下一周期逆向地播放。 | 3 |
| animation-play-state | 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。 | 3 |
| animation-fill-mode | 規(guī)定對象動(dòng)畫時(shí)間之外的狀態(tài)。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| background | 在一個(gè)聲明中設(shè)置所有的背景屬性。 | 1 |
| background-attachment | 設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。 | 1 |
| background-color | 設(shè)置元素的背景顏色。 | 1 |
| background-image | 設(shè)置元素的背景圖像。 | 1 |
| background-position | 設(shè)置背景圖像的開始位置。 | 1 |
| background-repeat | 設(shè)置是否及如何重復(fù)背景圖像。 | 1 |
| background-clip | 規(guī)定背景的繪制區(qū)域。 | 3 |
| background-origin | 規(guī)定背景圖片的定位區(qū)域。 | 3 |
| background-size | 規(guī)定背景圖片的尺寸。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| border | 在一個(gè)聲明中設(shè)置所有的邊框?qū)傩浴?/td> | 1 |
| border-bottom | 在一個(gè)聲明中設(shè)置所有的下邊框?qū)傩浴?/td> | 1 |
| border-bottom-color | 設(shè)置下邊框的顏色。 | 2 |
| border-bottom-style | 設(shè)置下邊框的樣式。 | 2 |
| border-bottom-width | 設(shè)置下邊框的寬度。 | 1 |
| border-color | 設(shè)置四條邊框的顏色。 | 1 |
| border-left | 在一個(gè)聲明中設(shè)置所有的左邊框?qū)傩浴?/td> | 1 |
| border-left-color | 設(shè)置左邊框的顏色。 | 2 |
| border-left-style | 設(shè)置左邊框的樣式。 | 2 |
| border-left-width | 設(shè)置左邊框的寬度。 | 1 |
| border-right | 在一個(gè)聲明中設(shè)置所有的右邊框?qū)傩浴?/td> | 1 |
| border-right-color | 設(shè)置右邊框的顏色。 | 2 |
| border-right-style | 設(shè)置右邊框的樣式。 | 2 |
| border-right-width | 設(shè)置右邊框的寬度。 | 1 |
| border-style | 設(shè)置四條邊框的樣式。 | 1 |
| border-top | 在一個(gè)聲明中設(shè)置所有的上邊框?qū)傩浴?/td> | 1 |
| border-top-color | 設(shè)置上邊框的顏色。 | 2 |
| border-top-style | 設(shè)置上邊框的樣式。 | 2 |
| border-top-width | 設(shè)置上邊框的寬度。 | 1 |
| border-width | 設(shè)置四條邊框的寬度。 | 1 |
| outline | 在一個(gè)聲明中設(shè)置所有的輪廓屬性。 | 2 |
| outline-color | 設(shè)置輪廓的顏色。 | 2 |
| outline-style | 設(shè)置輪廓的樣式。 | 2 |
| outline-width | 設(shè)置輪廓的寬度。 | 2 |
| border-bottom-left-radius | 定義邊框左下角的形狀。 | 3 |
| border-bottom-right-radius | 定義邊框右下角的形狀。 | 3 |
| border-image | 簡寫屬性，設(shè)置所有 border-image-* 屬性。 | 3 |
| border-image-outset | 規(guī)定邊框圖像區(qū)域超出邊框的量。 | 3 |
| border-image-repeat | 圖像邊框是否應(yīng)平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 | 3 |
| border-image-slice | 規(guī)定圖像邊框的向內(nèi)偏移。 | 3 |
| border-image-source | 規(guī)定用作邊框的圖片。 | 3 |
| border-image-width | 規(guī)定圖片邊框的寬度。 | 3 |
| border-radius | 簡寫屬性，設(shè)置所有四個(gè) border-*-radius 屬性。 | 3 |
| border-top-left-radius | 定義邊框左上角的形狀。 | 3 |
| border-top-right-radius | 定義邊框右下角的形狀。 | 3 |
| box-decoration-break | 3 | |
| box-shadow | 向方框添加一個(gè)或多個(gè)陰影。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| overflow-x | 如果內(nèi)容溢出了元素內(nèi)容區(qū)域，是否對內(nèi)容的左/右邊緣進(jìn)行裁剪。 | 3 |
| overflow-y | 如果內(nèi)容溢出了元素內(nèi)容區(qū)域，是否對內(nèi)容的上/下邊緣進(jìn)行裁剪。 | 3 |
| overflow-style | 規(guī)定溢出元素的首選滾動(dòng)方法。 | 3 |
| rotation | 圍繞由 rotation-point 屬性定義的點(diǎn)對元素進(jìn)行旋轉(zhuǎn)。 | 3 |
| rotation-point | 定義距離上左邊框邊緣的偏移點(diǎn)。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| color-profile | 允許使用源的顏色配置文件的默認(rèn)以外的規(guī)范。 | 3 |
| opacity | 規(guī)定元素的不透明級別。 | 3 |
| rendering-intent | 允許使用顏色配置文件渲染意圖的默認(rèn)以外的規(guī)范。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| bookmark-label | 規(guī)定書簽的標(biāo)記。 | 3 |
| bookmark-level | 規(guī)定書簽的級別。 | 3 |
| bookmark-target | 規(guī)定書簽鏈接的目標(biāo)。 | 3 |
| float-offset | 將元素放在 float 屬性通常放置的位置的相反方向。 | 3 |
| hyphenate-after | 規(guī)定連字單詞中連字符之后的最小字符數(shù)。 | 3 |
| hyphenate-before | 規(guī)定連字單詞中連字符之前的最小字符數(shù)。 | 3 |
| hyphenate-character | 規(guī)定當(dāng)發(fā)生斷字時(shí)顯示的字符串。 | 3 |
| hyphenate-lines | 指示元素中連續(xù)斷字連線的最大數(shù)。 | 3 |
| hyphenate-resource | 規(guī)定幫助瀏覽器確定斷字點(diǎn)的外部資源（逗號分隔的列表）。 | 3 |
| hyphens | 設(shè)置如何對單詞進(jìn)行拆分，以改善段落的布局。 | 3 |
| image-resolution | 規(guī)定圖像的正確分辨率。 | 3 |
| marks | 向文檔添加裁切標(biāo)記或十字標(biāo)記。 | 3 |
| string-set | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| height | 設(shè)置元素高度。 | 1 |
| max-height | 設(shè)置元素的最大高度。 | 2 |
| max-width | 設(shè)置元素的最大寬度。 | 2 |
| min-height | 設(shè)置元素的最小高度。 | 2 |
| min-width | 設(shè)置元素的最小寬度。 | 2 |
| width | 設(shè)置元素的寬度。 | 1 |
| 屬性 | 描述 | CSS |
|---|---|---|
| box-align | 規(guī)定如何對齊框的子元素。 | 3 |
| box-direction | 規(guī)定框的子元素的顯示方向。 | 3 |
| box-flex | 規(guī)定框的子元素是否可伸縮。 | 3 |
| box-flex-group | 將可伸縮元素分配到柔性分組。 | 3 |
| box-lines | 規(guī)定當(dāng)超出父元素框的空間時(shí)，是否換行顯示。 | 3 |
| box-ordinal-group | 規(guī)定框的子元素的顯示次序。 | 3 |
| box-orient | 規(guī)定框的子元素是否應(yīng)水平或垂直排列。 | 3 |
| box-pack | 規(guī)定水平框中的水平位置或者垂直框中的垂直位置。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| font | 在一個(gè)聲明中設(shè)置所有字體屬性。 | 1 |
| font-family | 規(guī)定文本的字體系列。 | 1 |
| font-size | 規(guī)定文本的字體尺寸。 | 1 |
| font-size-adjust | 為元素規(guī)定 aspect 值。 | 2 |
| font-stretch | 收縮或拉伸當(dāng)前的字體系列。 | 2 |
| font-style | 規(guī)定文本的字體樣式。 | 1 |
| font-variant | 規(guī)定是否以小型大寫字母的字體顯示文本。 | 1 |
| font-weight | 規(guī)定字體的粗細(xì)。 | 1 |
| 屬性 | 描述 | CSS |
|---|---|---|
| content | 與 :before 以及 :after 偽元素配合使用，來插入生成內(nèi)容。 | 2 |
| counter-increment | 遞增或遞減一個(gè)或多個(gè)計(jì)數(shù)器。 | 2 |
| counter-reset | 創(chuàng)建或重置一個(gè)或多個(gè)計(jì)數(shù)器。 | 2 |
| quotes | 設(shè)置嵌套引用的引號類型。 | 2 |
| crop | 允許被替換元素僅僅是對象的矩形區(qū)域，而不是整個(gè)對象。 | 3 |
| move-to | 從流中刪除元素，然后在文檔中后面的點(diǎn)上重新插入。 | 3 |
| page-policy | 確定元素基于頁面的 occurrence 應(yīng)用于計(jì)數(shù)器還是字符串值。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| grid-columns | 規(guī)定網(wǎng)格中每個(gè)列的寬度。 | 3 |
| grid-rows | 規(guī)定網(wǎng)格中每個(gè)列的高度。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| target | 簡寫屬性，設(shè)置target-name、target-new以及target-position屬性。 | 3 |
| target-name | 規(guī)定在何處打開鏈接（鏈接的目標(biāo)）。 | 3 |
| target-new | 規(guī)定目標(biāo)鏈接在新窗口還是在已有窗口的新標(biāo)簽頁中打開。 | 3 |
| target-position | 規(guī)定在何處放置新的目標(biāo)鏈接。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| list-style | 在一個(gè)聲明中設(shè)置所有的列表屬性。 | 1 |
| list-style-image | 將圖象設(shè)置為列表項(xiàng)標(biāo)記。 | 1 |
| list-style-position | 設(shè)置列表項(xiàng)標(biāo)記的放置位置。 | 1 |
| list-style-type | 設(shè)置列表項(xiàng)標(biāo)記的類型。 | 1 |
| marker-offset | 2 |
| 屬性 | 描述 | CSS |
|---|---|---|
| margin | 在一個(gè)聲明中設(shè)置所有外邊距屬性。 | 1 |
| margin-bottom | 設(shè)置元素的下外邊距。 | 1 |
| margin-left | 設(shè)置元素的左外邊距。 | 1 |
| margin-right | 設(shè)置元素的右外邊距。 | 1 |
| margin-top | 設(shè)置元素的上外邊距。 | 1 |
| 屬性 | 描述 | CSS |
|---|---|---|
| marquee-direction | 設(shè)置移動(dòng)內(nèi)容的方向。 | 3 |
| marquee-play-count | 設(shè)置內(nèi)容移動(dòng)多少次。 | 3 |
| marquee-speed | 設(shè)置內(nèi)容滾動(dòng)得多快。 | 3 |
| marquee-style | 設(shè)置移動(dòng)內(nèi)容的樣式。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| column-count | 規(guī)定元素應(yīng)該被分隔的列數(shù)。 | 3 |
| column-fill | 規(guī)定如何填充列。 | 3 |
| column-gap | 規(guī)定列之間的間隔。 | 3 |
| column-rule | 設(shè)置所有 column-rule-* 屬性的簡寫屬性。 | 3 |
| column-rule-color | 規(guī)定列之間規(guī)則的顏色。 | 3 |
| column-rule-style | 規(guī)定列之間規(guī)則的樣式。 | 3 |
| column-rule-width | 規(guī)定列之間規(guī)則的寬度。 | 3 |
| column-span | 規(guī)定元素應(yīng)該橫跨的列數(shù)。 | 3 |
| column-width | 規(guī)定列的寬度。 | 3 |
| columns | 規(guī)定設(shè)置 column-width 和 column-count 的簡寫屬性。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| padding | 在一個(gè)聲明中設(shè)置所有內(nèi)邊距屬性。 | 1 |
| padding-bottom | 設(shè)置元素的下內(nèi)邊距。 | 1 |
| padding-left | 設(shè)置元素的左內(nèi)邊距。 | 1 |
| padding-right | 設(shè)置元素的右內(nèi)邊距。 | 1 |
| padding-top | 設(shè)置元素的上內(nèi)邊距。 | 1 |
| 屬性 | 描述 | CSS |
|---|---|---|
| fit | 示意如何對width和height屬性均不是auto的被替換元素進(jìn)行縮放。 | 3 |
| fit-position | 定義盒內(nèi)對象的對齊方式。 | 3 |
| image-orientation | 規(guī)定用戶代理應(yīng)用于圖像的順時(shí)針方向旋轉(zhuǎn)。 | 3 |
| page | 規(guī)定元素應(yīng)該被顯示的頁面特定類型。 | 3 |
| size | 規(guī)定頁面內(nèi)容包含框的尺寸和方向。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| bottom | 設(shè)置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 | 2 |
| clear | 規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。 | 1 |
| clip | 剪裁絕對定位元素。 | 2 |
| cursor | 規(guī)定要顯示的光標(biāo)的類型（形狀）。 | 2 |
| display | 規(guī)定元素應(yīng)該生成的框的類型。 | 1 |
| float | 規(guī)定框是否應(yīng)該浮動(dòng)。 | 1 |
| left | 設(shè)置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 | 2 |
| overflow | 規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。 | 2 |
| position | 規(guī)定元素的定位類型。 | 2 |
| right | 設(shè)置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 | 2 |
| top | 設(shè)置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 | 2 |
| vertical-align | 設(shè)置元素的垂直對齊方式。 | 1 |
| visibility | 規(guī)定元素是否可見。 | 2 |
| z-index | 設(shè)置元素的堆疊順序。 | 2 |
| 屬性 | 描述 | CSS |
|---|---|---|
| orphans | 設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁時(shí)必須在頁面底部保留的最少行數(shù)。 | 2 |
| page-break-after | 設(shè)置元素后的分頁行為。 | 2 |
| page-break-before | 設(shè)置元素前的分頁行為。 | 2 |
| page-break-inside | 設(shè)置元素內(nèi)部的分頁行為。 | 2 |
| widows | 設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁時(shí)必須在頁面頂部保留的最少行數(shù)。 | 2 |
| 屬性 | 描述 | CSS |
|---|---|---|
| border-collapse | 規(guī)定是否合并表格邊框。 | 2 |
| border-spacing | 規(guī)定相鄰單元格邊框之間的距離。 | 2 |
| caption-side | 規(guī)定表格標(biāo)題的位置。 | 2 |
| empty-cells | 規(guī)定是否顯示表格中的空單元格上的邊框和背景。 | 2 |
| table-layout | 設(shè)置用于表格的布局算法。 | 2 |
| 屬性 | 描述 | CSS |
|---|---|---|
| color | 設(shè)置文本的顏色。 | 1 |
| direction | 規(guī)定文本的方向 / 書寫方向。 | 2 |
| letter-spacing | 設(shè)置字符間距。 | 1 |
| line-height | 設(shè)置行高。 | 1 |
| text-align | 規(guī)定文本的水平對齊方式。 | 1 |
| text-decoration | 規(guī)定添加到文本的裝飾效果。 | 1 |
| text-indent | 規(guī)定文本塊首行的縮進(jìn)。 | 1 |
| text-shadow | 規(guī)定添加到文本的陰影效果。 | 2 |
| text-transform | 控制文本的大小寫。 | 1 |
| unicode-bidi | 設(shè)置文本方向。 | 2 |
| white-space | 規(guī)定如何處理元素中的空白。 | 1 |
| word-spacing | 設(shè)置單詞間距。 | 1 |
| hanging-punctuation | 規(guī)定標(biāo)點(diǎn)字符是否位于線框之外。 | 3 |
| punctuation-trim | 規(guī)定是否對標(biāo)點(diǎn)字符進(jìn)行修剪。 | 3 |
| text-align-last | 設(shè)置如何對齊最后一行或緊挨著強(qiáng)制換行符之前的行。 | 3 |
| text-emphasis | 向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。 | 3 |
| text-justify | 規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時(shí)所使用的對齊方法。 | 3 |
| text-outline | 規(guī)定文本的輪廓。 | 3 |
| text-overflow | 規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。 | 3 |
| text-shadow | 向文本添加陰影。 | 3 |
| text-wrap | 規(guī)定文本的換行規(guī)則。 | 3 |
| word-break | 規(guī)定非中日韓文本的換行規(guī)則。 | 3 |
| word-wrap | 允許對長的不可分割的單詞進(jìn)行分割并換行到下一行。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| transform | 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。 | 3 |
| transform-origin | 允許你改變被轉(zhuǎn)換元素的位置。 | 3 |
| transform-style | 規(guī)定被嵌套元素如何在 3D 空間中顯示。 | 3 |
| perspective | 規(guī)定 3D 元素的透視效果。 | 3 |
| perspective-origin | 規(guī)定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定義元素在不面對屏幕時(shí)是否可見。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。 | 3 |
| transition-property | 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費(fèi)的時(shí)間。 | 3 |
| transition-timing-function | 規(guī)定過渡效果的時(shí)間曲線。 | 3 |
| transition-delay | 規(guī)定過渡效果何時(shí)開始。 | 3 |
| 屬性 | 描述 | CSS |
|---|---|---|
| appearance | 允許您將元素設(shè)置為標(biāo)準(zhǔn)用戶界面元素的外觀 | 3 |
| box-sizing | 允許您以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容。 | 3 |
| icon | 為創(chuàng)作者提供使用圖標(biāo)化等價(jià)物來設(shè)置元素樣式的能力。 | 3 |
| nav-down | 規(guī)定在使用 arrow-down 導(dǎo)航鍵時(shí)向何處導(dǎo)航。 | 3 |
| nav-index | 設(shè)置元素的 tab 鍵控制次序。 | 3 |
| nav-left | 規(guī)定在使用 arrow-left 導(dǎo)航鍵時(shí)向何處導(dǎo)航。 | 3 |
| nav-right | 規(guī)定在使用 arrow-right 導(dǎo)航鍵時(shí)向何處導(dǎo)航。 | 3 |
| nav-up | 規(guī)定在使用 arrow-up 導(dǎo)航鍵時(shí)向何處導(dǎo)航。 | 3 |
| outline-offset | 對輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。 | 3 |
| resize | 規(guī)定是否可由用戶對元素的尺寸進(jìn)行調(diào)整。 | 3 |
以上是“css中屬性分為哪些類別”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
