css的屬性分為什麼類別-前端問答-PHP中文網

css屬性的分類：動畫屬性、轉換屬性、過渡屬性、Box屬性、Marquee屬性、尺寸屬性、外邊距屬性、內邊距屬性、邊框屬性、定位屬性、多列屬性、可伸縮框屬性、清單屬性、Grid屬性、表格屬性、文字屬性、字型屬性、Color屬性、背景屬性等。

css的屬性分為什麼類別

本教學操作環境：windows7系統、CSS3版、Dell G3電腦。

css的屬性分類

##--列表/表格#多列屬性（Multi-column）可伸縮框屬性（Flexible Box）CSS 清單屬性（List）Grid 屬性#CSS 表格屬性（ Table）文字字型顏色CSS 文字屬性（Text）CSS 字型屬性（Font）Color 屬性CSS 背景屬性（Background） # # 少用屬性Hyperlink 屬性內容產生（Generated Content） Content for Paged Media 屬性使用者介面屬性（User-interface）Paged Media 屬性 CSS 列印屬性（ Print） #

#動畫屬性分類	CSS3 動畫屬性（ Animation）	2D/3D 轉換屬性（Transform）	過渡屬性（Transition）	#Box 屬性	#Marquee 屬性
#尺寸/位置--	CSS 尺寸屬性（Dimension）	CSS 外邊距屬性（Margin）	CSS 內邊距屬性（Padding）	CSS 邊框屬性（Border 和Outline）	CSS 定位屬性（Positioning）

CSS3 動畫屬性（Animation）

#描述CSS##@keyframes animationanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode

CSS 背景屬性（Background）


規定動畫。	3
所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。	3
規定 @keyframes 動畫的名稱。	3
#規定動畫完成一個週期所花費的秒或毫秒。	3
規定動畫的速度曲線。	3
#規定動畫何時開始。	3
#規定動畫被播放的次數。	3
#規定動畫是否在下一週期逆向播放。	3
#規定動畫是否正在運作或暫停。	3
規定物件動畫時間以外的狀態。	3

#屬性	描述	CSS
		#CSS
background	在一個宣告中設定所有的背景屬性。	1
background-attachment	設定背景圖片是否固定或隨著頁面的其餘部分滾動。	1
background-color	設定元素的背景顏色。	1
background-image	設定元素的背景圖片。	1
background-position	設定背景圖片的開始位置。	1
background-repeat	設定是否及如何重複背景影像。	1
background-clip	規定背景的繪製區域。	3
background-origin	規定背景圖片的定位區域。	3

background-size

規定背景圖片的尺寸。

3# #屬性描述CSSborder在一個宣告中設定所有的邊框屬性。 1border-bottom在一個宣告中設定所有的下邊框屬性。 1border-bottom-color#設定下邊框的顏色。 2border-bottom-style#設定下邊框的樣式。 2border-bottom-width設定下邊框的寬度。 1border-color設定四條邊框的顏色。 1border-left在一個宣告中設定所有的左邊框屬性。 1border-left-color#設定左邊框的顏色。 2border-left-style#設定左邊框的樣式。 2border-left-width設定左邊框的寬度。 1border-right在一個宣告中設定所有的右邊框屬性。 1border-right-color設定右邊框的顏色。 2border-right-style設定右邊框的樣式。 2border-right-width#設定右邊框的寬度。 1border-style設定四條邊框的樣式。 1border-top在一個宣告中設定所有的上邊框屬性。 1border-top-color設定上邊框的顏色。 2border-top-style設定上邊框的樣式。 2border-top-width設定上邊框的寬度。 1border-width設定四條邊框的寬度。 1outline在一個宣告中設定所有的輪廓屬性。 2outline-color設定輪廓的顏色。 2outline-style設定輪廓的樣式。 2outline-width設定輪廓的寬度。 2border-bottom-left-radius定義邊框左下角的形狀。 3border-bottom-right-radius定義邊框右下角的形狀。 3border-image簡寫屬性，設定所有 border-image-* 屬性。 3border-image-outset#規定邊框影像區域超出邊框的量。 3border-image-repeat#圖片邊框是否要平鋪(repeated)、鋪滿(rounded)或拉伸(stretched )。 3border-image-slice#規定影像邊框的向內偏移。 3border-image-source#規定用作邊框的圖片。 3border-image-width規定圖片邊框的寬度。 3border-radius簡寫屬性，設定所有四個 border-*-radius 屬性。 3border-top-left-radius定義邊框左上角的形狀。 3border-top-right-radius定義邊框右下角的形狀。 3box-decoration-break# 3##box -shadow

	CSS 邊框屬性（Border 和Outline）

在方框中新增一個或多個陰影。 ######3############

Box 屬性

屬性	#描述	#CSS
#overflow-x	如果內容溢出了元素內容區域，是否會對內容的左/右邊緣進行裁切。	3
overflow-y	如果內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁切。	3
overflow-style	規定溢出元素的首選捲動方法。	3
rotation	圍繞由 rotation-point 屬性定義的點旋轉元素。	3
rotation-point	定義距離上左方框邊緣的偏移點。	3

Color 屬性

##屬性描述CSScolor-profile#允許使用來源的顏色設定檔的預設以外的規格。 3opacity規定元素的不透明層級。 3rendering-intent允許使用色彩設定檔渲染意圖的預設以外的規格。 3

Content for Paged Media 屬性

屬性描述CSSbookmark-label規定書籤的標記。 3bookmark-level規定書籤的等級。 3bookmark-target規定書籤連結的目標。 3float-offset#將元素放在 float 屬性通常放置的位置的相反方向。 3hyphenate-after#規定連字單字中連字號之後的最小字元數。 3hyphenate-before#規定連字單字中連字字之前的最小字元數。 3hyphenate-character規定當發生斷字時顯示的字串。 3hyphenate-lines#指示元素中連續斷字連線的最大數。 3hyphenate-resource#規定幫助瀏覽器決定斷字點的外部資源（逗號分隔的清單）。 3hyphens設定如何對單字進行拆分，以改善段落的佈局。 3image-resolution#規定影像的正確解析度。 3marks在文件中新增裁切標記或十字標記。 3string-set 3

##CSS 尺寸屬性（Dimension）

#屬性##CSSheight設定元素高度。 1max-height設定元素的最大高度。 2max-width設定元素的最大寬度。 2min-height設定元素的最小高度。 2min-width設定元素的最小寬度。 2width設定元素的寬度。 1可擴展框屬性（Flexible Box）

描述

屬性描述CSSbox-align規定如何對齊框的子元素。 3box-direction規定框的子元素的顯示方向。 3box-flex規定框的子元素是否可伸縮。 3box-flex-group將可伸縮元素指派到柔性分組。 3box-lines規定當超出父元素方塊的空間時，是否有換行顯示。 3box-ordinal-group#規定框的子元素的顯示順序。 3box-orient規定框的子元素是否應水平或垂直排列。 3box-pack規定水平框中的水平位置或垂直框中的垂直位置。 3

CSS 字型屬性（Font）

##CSSfont在一個宣告中設定所有字體屬性。 1font-family規定文字的字體系列。 1font-size規定文字的字體尺寸。 1font-size-adjust#為元素規定 aspect 值。 2font-stretch縮寫或拉伸目前的字體系列。 2font-style規定文字的字型樣式。 1font-variant規定是否以小型大寫字母的字體顯示文字。 1font-weight規定字型的粗細。 1

#屬性	描述

內容生成（Generated Content）

##屬性contentcounter-incrementcounter-resetquotescropmove-topage-policy

描述	CSS
#與:before 以及:after 偽元素配合使用，來插入生成內容。	2
遞增或遞減一個或多個計數器。	2
建立或重設一個或多個計數器。	2
設定嵌套引用的引號類型。	2
允許被取代元素只是物件的矩形區域，而不是整個物件。	3
從流中刪除元素，然後在文件中後面的點上重新插入。	3
確定元素基於頁面的 occurrence 套用於計數器還是字串值。	3

Grid 屬性

屬性grid-columnsgrid-rows

描述	CSS
規定網格中每個列的寬度。	3
#規定網格中每個列的高度。	3

Hyperlink（超連結）屬性

屬性targettarget-nametarget-newtarget-position

描述	CSS
#簡寫屬性，設定target-name、target-new以及target-position屬性。	3
規定在何處開啟連結（連結的目標）。	3
規定目標連結在新視窗還是在已有視窗的新標籤頁中開啟。	3
規定在何處放置新的目標連結。	3

CSS 清單屬性（List）

屬性list-stylelist-style-imagelist-style-positionlist-style-typemarker-offset##CSS 外邊距屬性（Margin）

描述	CSS
在一個宣告中設定所有的清單屬性。	1
將圖象設定為清單項目標記。	1
設定清單項目標記的放置位置。	1
設定清單項目標記的類型。	1
	2

#屬性描述在一個宣告中設定所有外邊距屬性。設定元素的下外邊距。設定元素的左外邊距。設定元素的右外邊距。設定元素的上外邊距。 Marquee 屬性

##CSS		margin
1		margin-bottom
1		margin-left
1		margin-right
1		margin-top
1

屬性描述設定移動內容的方向。 #設定內容移動多少次。設定內容捲動得多快。設定移動內容的樣式。

CSS

marquee-direction

marquee-play-count

marquee-speed

marquee-style

多列屬性（Multi-column）

#屬性	描述	#CSS
column-count	規定元素應該被分隔的列數。	3
column-fill	#規定如何填入欄位。	3
column-gap	#規定列之間的間隔。	3
column-rule	#設定所有 column-rule-* 屬性的簡寫屬性。	3
column-rule-color	#規定列之間規則的顏色。	3
column-rule-style	#規定列之間規則的樣式。	3
column-rule-width	規定列之間規則的寬度。	3
column-span	#規定元素應該橫跨的列數。	3
column-width	#規定列的寬度。	3
columns	規定設定 column-width 和 column-count 的簡寫屬性。	3

CSS 內邊距屬性（Padding）

屬性	描述	CSS
padding	在一個宣告中設定所有內邊距屬性。	1
padding-bottom	設定元素的下內邊距。	1
padding-left	設定元素的左內邊距。	1
padding-right	設定元素的右內邊距。	1
padding-top	設定元素的上內邊距。	1

Paged Media（分頁媒體）屬性

屬性	說明	CSS
fit	示意如何縮放width和height屬性都不是auto的被替換元素進行縮放。	3
fit-position	定義盒內物件的對齊方式。	3
image-orientation	#規定使用者代理程式套用於影像的順時針方向旋轉。	3
page	規定元素應該被顯示的頁面特定類型。	3
size	規定頁面內容包含框的尺寸和方向。	3

CSS 定位屬性（Positioning）

屬性	描述	CSS
bottom	設定定位元素下外邊距邊界與其包含區塊下邊界之間的偏移。	2
clear	規定元素的哪一邊不允許其他浮動元素。	1
clip	剪裁絕對定位元素。	2
cursor	規定要顯示的遊標的類型（形狀）。	2
display	規定元素應該產生的方塊的類型。	1
float	規定框是否應該浮動。	1
left	設定定位元素左外邊距邊界與其包含區塊左邊界之間的偏移。	2
overflow	規定當內容溢出元素方塊時發生的事情。	2
position	規定元素的定位類型。	2
right	設定定位元素右外邊距邊界與其包含區塊右邊界之間的偏移。	2
top	設定定位元素的上外邊距邊界與其包含區塊上邊界之間的偏移。	2
vertical-align	設定元素的垂直對準方式。	1
visibility	規定元素是否可見。	2
z-index	設定元素的堆疊順序。	2

CSS 列印屬性（Print）

屬性	描述	CSS
orphans	設定當元素內部發生分頁時必須在頁面底部保留的最少行數。	2
page-break-after	設定元素後的分頁行為。	2
page-break-before	#設定元素前的分頁行為。	2
page-break-inside	設定元素內部的分頁行為。	2
widows	設定當元素內部發生分頁時必須在頁面頂部保留的最少行數。	2

CSS 表格屬性（Table）

##CSSborder-collapse規定是否要合併表格邊框。 2border-spacing規定相鄰單元格邊框之間的距離。 2caption-side規定表格標題的位置。 2empty-cells#規定是否顯示表格中的空白儲存格上的邊框和背景。 2table-layout設定用於表格的佈局演算法。 2

#屬性	描述

CSS 文字屬性（Text）

屬性描述CSScolor#設定文字的顏色。 1direction規定文字的方向 / 書寫方向。 2letter-spacing設定字元間距。 1line-height設定行高。 1text-align規定文字的水平對齊方式。 1text-decoration規定加入到文字的裝飾效果。 1text-indent規定文字區塊首行的縮排。 1text-shadow規定要加入到文字的陰影效果。 2text-transform控製文字的大小寫。 1unicode-bidi設定文字方向。 2white-space規定如何處理元素中的空白。 1word-spacing設定單字間距。 1hanging-punctuation#規定標點字元是否位於線框之外。 3punctuation-trim#規定是否要修剪標點字元。 3text-align-last設定如何對齊最後一行或緊鄰強制換行符之前的行。 3text-emphasis向元素的文字應用重點標記以及重點標記的前景色。 3text-justify#規定當 text-align 設定為 "justify" 時所使用的對齊方法。 3text-outline規定文字的輪廓。 3text-overflow規定當文字溢出包含元素時發生的事情。 3text-shadow為文字新增陰影。 3text-wrap規定文字的換行規則。 3word-break規定非中日韓文字的換行規則。 3word-wrap允許將長的不可分割的單字分割並換行到下一行。 3

2D/3D 轉換屬性（Transform）

屬性描述CSStransform向元素套用2D 或3D 轉換。 3transform-origin允許你改變被轉換元素的位置。 3transform-style規定被巢狀元素如何在 3D 空間中顯示。 3perspective規定 3D 元素的透視效果。 3perspective-origin#規定 3D 元素的底部位置。 3backface-visibility定義元素在不面對螢幕時是否可見。 3

轉換屬性（Transition）

屬性描述CSStrans#簡寫屬性，用於在一個屬性中設定四個過渡屬性。 3transition-property#規定應用過渡的 CSS 屬性的名稱。 3transition-duration#定義過渡效果所花費的時間。 3transition-timing-function規定過渡效果的時間曲線。 3transition-delay規定過渡效果何時開始。 3

使用者介面屬性（User-interface）

#屬性	描述	CSS
appearance	讓您可以將元素設定為標準使用者介面元素的外觀	3
box-sizing	讓您以確切的方式定義適應某個區域的具體內容。	3
icon	為創作者提供使用圖示化等價物來設定元素樣式的能力。	3
nav-down	規定在使用 arrow-down 導航鍵時要向何處導航。	3
nav-index	設定元素的 tab 鍵控制順序。	3
nav-left	規定在使用 arrow-left 導航鍵時要向何處導航。	3
nav-right	規定在使用 arrow-right 導覽鍵時要向何處導覽。	3
nav-up	規定在使用 arrow-up 導覽鍵時要向何處導覽。	3
outline-offset	對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。	3
resize	規定是否可由使用者對元素的尺寸進行調整。	3