最新的Web開發教程
×

CSS 參考

CSS 參考 CSS 選擇器 CSS 功能 CSS 參考聽覺 CSS 網絡安全字體 CSS 動畫 CSS 單位 CSS PX-EM轉換器 CSS 顏色 CSS 顏色 值 CSS3 瀏覽器支持

CSS 屬性

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight hanging-punctuation height justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index



 

CSS參考


注意 w3ii“CSS引用與所有主流瀏覽器定期測試。


CSS屬性

CSS屬性組


"CSS"列表示CSS版本屬性定義(CSS1, CSS2, or CSS3)

顏色屬性

屬性 描述 CSS
color 設置文本的顏色 1
opacity 設置不透明度為元素 3

背景和邊框屬性

屬性 描述 CSS
background 簡寫屬性在一個聲明中設置所有的背景屬性 1
background-attachment 設置背景圖像是否是與頁面的其餘部分固定或滾動 1
background-blend-mode 指定每個背景圖層的混合模式(color/image)
background-color 指定元素的背景色 1
background-image 指定一個或多個背景圖像元素 1
background-position 指定背景圖像的位置 1
background-repeat 設置背景圖片如何重複 1
background-clip 指定背景的繪畫面積 3
background-origin 指定了背景image(s)是/定位 3
background-size 指定背景的尺寸image(s) 3
border 設置在一個聲明中所有的邊框屬性 1
border-bottom 設置在一個聲明中所有的底部邊框屬性 1
border-bottom-color 設置底邊框的顏色
border-bottom-left-radius 定義左下角邊框的形狀 3
border-bottom-right-radius 定義右下角邊框的形狀 3
border-bottom-style 設置底邊框的樣式 1
border-bottom-width 設置底邊框的寬度 1
border-color 設置四個邊框的顏色 1
border-image 簡寫屬性設置所有邊界圖像 - *屬性 3
border-image-outset 指定由該邊界圖像區域延伸超出邊界框的量 3
border-image-repeat 指定邊界圖像是否應當被重複,圓形或拉伸 3
border-image-slice 指定如何切片圖像邊界 3
border-image-source 指定要用作邊界的路徑圖像 3
border-image-width 指定圖像邊框的寬度 3
border-left 設置在一個聲明中所有的左邊框屬性 1
border-left-color 設置左邊框的顏色 1
border-left-style 設置左邊框的樣式 1
border-left-width 設置左邊框的寬度 1
border-radius 簡寫屬性設置所有四個邊框 - * - 半徑屬性 3
border-right 設置在一個聲明中所有的右邊框屬性 1
border-right-color 設置右邊框的顏色 1
border-right-style 設置右邊框的樣式 1
border-right-width 設置右邊框的寬度 1
border-style 設置四個邊框的樣式 1
border-top 設置在一個聲明中所有的頂級邊框屬性 1
border-top-color 設置上邊框的顏色 1
border-top-left-radius 定義了左上角的邊界的形狀 3
border-top-right-radius 定義右上角的邊框的形狀 3
border-top-style 設置上邊框的風格 1
border-top-width 設置上邊框的寬度 1
border-width 設置四個邊框的寬度 1
box-decoration-break 設置元素的背景和邊框的行為在分頁符,或者,對於在線元件,在斷行。 3
box-shadow 附加一個或多個下拉陰影框 3

基本框屬性

屬性 描述 CSS
bottom 指定定位元素的底部位置 2
clear 指定在其他浮動元素不允許該元素的面 1
clip 剪輯絕對定位的元素 2
display 指定某個HTML元素的顯示方式 1
float 指定框是否應該浮動 1
height 設置元素的高度 1
left 指定定位元素的左邊位置 2
margin 設置在一個聲明中的所有邊距屬性 1
margin-bottom 設置元素的下邊距 1
margin-left 設置元素的左邊距 1
margin-right 設置元素的右邊緣 1
margin-top 設置元素的上邊距 1
max-height 設置元素的最大高度 2
max-width 設置元素的最大寬度 2
min-height 設置元素的最小高度 2
min-width 設置元素的最小寬度 2
overflow
指定在內容溢出元素框時會發生什麼 2
overflow-x 指定是否剪輯的內容的左/右邊緣,如果它溢出元素的內容區 3
overflow-y 指定是否剪輯內容的頂部/底部邊緣,如果它溢出元素的內容區 3
padding 設置在一個聲明中的所有padding屬性 1
padding-bottom 設置元素的底部填充 1
padding-left 設置元素的左填充 1
padding-right 設置元素的右填充 1
padding-top 設置元素的頂部填充 1
position 指定用於一個元件定位方法的類型(靜態的,相對的,絕對的或固定的) 2
right 指定定位元素的正確位置 2
top 指定定位元素的頂部位置 2
visibility 指定一個元素是否是可見 2
width 設置元素的寬度 1
vertical-align 設置元素的垂直取向 1
z-index 設置一個定位元素的堆疊順序 2

彈性框佈局

屬性 描述 CSS
align-content 指定當項目不使用柔性容器內的線之間的對準的所有可用空間 3
align-items 指定一個柔性容器內的物品的對準 3
align-self 指定一個柔性容器內選擇的項目的對準 3
flex 指定的項目相對於其餘部分的長度, 3
flex-basis 指定的柔性物品的初始長度 3
flex-direction 指定柔性物品的方向 3
flex-flow 簡寫屬性柔性方向和柔性包裝特性 3
flex-grow 指定項目將多少相對於其餘的成長 3
flex-shrink 指定該項目將如何縮小相對靜止 3
flex-wrap 指定靈活的項目是否應該換還是不 3
justify-content 指定當項目不使用柔性容器內的項之間的對準的所有可用空間 3
order 設置柔性物品的相對於其餘部分的次序, 3

文本屬性

屬性 描述 CSS
hanging-punctuation 指定一個標點符號是否可能被放置的行外箱 3
hyphens 設置如何分割單詞以改善段落的佈局 3
letter-spacing 增加或減少的字符之間的空間中的文本 1
line-break 指定如何/如果破線 3
line-height 設置行高度 1
overflow-wrap 指定瀏覽器是否可破的話行內,以防止溢出(當一個字符串太長以適應其載箱) 3
tab-size 指定製表字符的長度 3
text-align 指定文本的水平對齊方式 1
text-align-last 描述了當的text-align是塊或強制斷行前的行權的最後一行是對齊的"justify" 3
text-combine-upright 指定的多個字符的組合成單個字符的空間 3
text-indent 指定一個文本塊中的第一行的縮進 1
text-justify 指定當文本對齊是所使用的方法的理由"justify" 3
text-transform 控制文字的資本 1
white-space 指定元素中空白的處理方式 1
word-break 指定非CJK文字換行規則 3
word-spacing 增加或減少的話之間的空間中的文本 1
word-wrap 允許長,牢不可破的話被突破,換到下一行 3

文本修飾屬性

屬性 描述 CSS
text-decoration 指定裝飾添加到文本 1
text-decoration-color 指定文本裝飾的顏色 3
text-decoration-line 指定文本裝飾線的類型 3
text-decoration-style 指定文本裝飾線的樣式 3
text-shadow 添加陰影文本 3
text-underline-position 指定它是使用text-decoration屬性設置下劃線的位置 3

字體屬性

屬性 描述 CSS
@font-face 一個規則,允許網站下載並使用其他字體比"web-safe"的字體 3
@font-feature-values 允許作者在字體變,交替使用一個共同的名字在功能激活的OpenType不同 3
font 設置在一個聲明中所有的字體屬性 1
font-family 指定字體家族文本 1
font-feature-settings 允許對在OpenType字體印刷先進的控制功能 3
font-kerning 控制的字距信息的使用(how letters are spaced) 3
font-language-override 控制特定語言的字形在字體的使用 3
font-size 指定文本的字體大小 1
font-size-adjust 當字體回退時保持文本的可讀性 3
font-stretch 從字體的家庭選擇一個正常的,凝結,或擴展的臉 3
font-style 指定文本的字體樣式 1
font-synthesis 控制哪些缺失字體(bold or italic)可能會被瀏覽器合成 3
font-variant 指定是否文本應以小型大寫字體顯示 1
font-variant-alternates 相關控制在@字體特徵值定義的備選名稱替代字形的使用 3
font-variant-caps 控制替代字形為大寫字母的使用 3
font-variant-east-asian 控制替代字形的東亞腳本的使用(如日本和中國) 3
font-variant-ligatures 其中連字和上下文形式應用於元素的文本內容被用於控制 3
font-variant-numeric 控制替代字形的數字,分數,順序標記的使用 3
font-variant-position 控制有關的字體的基線定位為標或下標較小尺寸的替代字形的使用 3
font-weight 指定字體的重量 1

書寫模式屬性

屬性 描述 CSS
direction 指定文本的方向/書寫方向 2
text-orientation 定義了文本的方向在一個行 3
text-combine-upright 指定的多個字符的組合成單個字符的空間 3
unicode-bidi 與一起使用方向屬性來設置或返回文本是否應該重寫以支持多種語言在同一文件中 2
writing-mode3

表格屬性

屬性 描述 CSS
border-collapse 指定表格邊框是否應該被折疊 2
border-spacing 指定相鄰小區的邊界之間的距離 2
caption-side 指定表格標題的位置 2
empty-cells 指定是否在表中顯示在空單元格邊框和背景 2
table-layout 設置要使用的一個表的佈局算法 2

列表和計數器屬性

屬性 描述 CSS
counter-increment 遞增一個或多個計數器 2
counter-reset 創建或復位一個或多個計數器 2
list-style 設置在一個聲明中對列表中的所有屬性 1
list-style-image 指定圖像作為列表項標記 1
list-style-position 如果指定列表項標記應該出現內部或內容流之外 1
list-style-type 指定列表項標記的類型 1

動畫屬性

屬性 描述 CSS
@keyframes 指定動畫代碼 3
animation 簡寫屬性所有的動畫屬性(除動畫播放狀態和動畫填充模式) 3
animation-delay 指定的動畫的開始的延遲 3
animation-direction 指定動畫是否應在交替週期反轉玩 3
animation-duration 指定的動畫多少秒或毫秒需要完成一個週期 3
animation-fill-mode 指定元素樣式當動畫是不是在玩(when it is finished, or when it has a delay) 3
animation-iteration-count 指定的動畫應該播放的次數 3
animation-name 指定@keyframes動畫的名稱 3
animation-play-state 指定動畫是否正在運行或暫停 3
animation-timing-function 指定動畫的速度曲線 3

轉換屬性

屬性 描述 CSS
backface-visibility 定義時不要對著屏幕上的元素是否應該可見 3
perspective 指定在被認為怎樣3D元素的視角 3
perspective-origin 指定3D元素的底部位置 3
transform 適用的2D或3D變換到一個元素 3
transform-origin 允許你改變轉化元素位置 3
transform-style 指定如何嵌套元素呈現在3D空間 3

轉換屬性

屬性 描述 CSS
transition 簡寫屬性設置四個轉變特性 3
transition-property 指定CSS屬性的過渡效果是名 3
transition-duration 指定過渡效果多少秒或毫秒需要完成 3
transition-timing-function 指定的過渡效果的速度曲線 3
transition-delay 指定當過渡效果將開始 3

基本的用戶界面屬性

屬性 描述 CSS
box-sizing 告訴瀏覽器什麼上漿性能(width and height)應包括 3
content 使用與:before和:after偽元素,插入生成的內容 2
cursor 指定要顯示的光標的類型 2
ime-mode 控制文本字段輸入法編輯器的狀態 3
nav-down 指定在使用箭頭向下導航鍵,當瀏覽 3
nav-index 指定跳位順序為元素 3
nav-left 指定在使用箭頭左導航鍵,當瀏覽 3
nav-right 指定在使用箭頭,右導航鍵,當瀏覽 3
nav-up 指定在使用箭頭式導航鍵,當瀏覽 3
outline 設置在一個聲明中所有的輪廓屬性 2
outline-color 設置輪廓的顏色 2
outline-offset 偏移輪廓,並提請其境外邊緣 3
outline-style 設置輪廓的風格 2
outline-width 設置輪廓的寬度 2
resize 指定一個元素是否是由用戶調整大小 3
text-overflow 指定當文本溢出包含的元素會發生什麼 3

多列佈局屬性

屬性 描述 CSS
break-after 指定頁面級,column-,或生成的框後區斷行 3
break-before 指定頁面級,column-,或生成的禁區前區斷行 3
break-inside 指定頁面級,column-,或產生箱內區斷行 3
column-count 指定的元素應分為列數 3
column-fill 指定如何填充列 3
column-gap 指定列之間的間隙 3
column-rule 簡寫屬性設置所有列基於規則*屬性 3
column-rule-color 指定列之間的規則的顏色 3
column-rule-style 指定列之間的規則的風格 3
column-rule-width 指定列之間的規則的寬度 3
column-span 指定多少列的元素應該跨越跨越 3
column-width 指定列的寬度 3
columns 速記屬性設置列寬和列數 3
widows 當分頁的元件內部發生設置一個必須在頁面的頂部離開的最小行數 2

分頁媒體

屬性 描述 CSS
orphans 當分頁的元件內部發生設置一個必須在頁面底部留下的最小行數 2
page-break-after 在元素後設置分頁行為 2
page-break-before 一個元素之前設置分頁行為 2
page-break-inside 設置元素內部的分頁行為 2

頁面媒體生成內容

屬性 描述 CSS
marks 增加作物和/或交標記到文檔 3
quotes 設置引號為嵌入式報價類型 2

濾鏡效果屬性

屬性 描述 CSS
filter 定義效果(eg blurring or color shifting)之前將顯示元件的元件上 3

圖像值和替換內容

屬性 描述 CSS
image-orientation 指定正確的或順時針方向旋轉,用戶代理適用於圖像(此屬性可能會被棄用,其功能轉移到HTML) 3
image-rendering 給出了一個提示瀏覽器什麼圖像方面是最重要的保護時,對圖像進行縮放 3
image-resolution 指定/使用的元素上的所有光柵圖像的分辨率內在 3
object-fit 指定如何替換元素的內容應適合其使用的高度和寬度確定的盒子 3
object-position 指定替換元素的它箱內對齊 3

隱蔽性

屬性 描述 CSS
mask3
mask-type3

語音屬性

屬性 描述 CSS
mark 簡寫屬性設置標記之前和標記後的屬性 3
mark-after 允許命名標誌被附著到音頻流 3
mark-before 允許命名標誌被附著到音頻流 3
phonemes 指定一個語音發音用於通過相應的元素包含在文本 3
rest 簡寫屬性設置休息,前後休息-after屬性 3
rest-after 指定講一個元素的內容後,可以觀察到一個休息或韻律邊界 3
rest-before 指定講一個元素的內容之前,要觀察的休息或韻律邊界 3
voice-balance 指定左和右聲道之間的平衡 3
voice-duration 指定應該需要多長時間才能使所選元素的內容 3
voice-pitch 指定平均間距(a frequency)的發言聲音的 3
voice-pitch-range 指定平均間距的變化 3
voice-rate 控制語速 3
voice-stress 表示要應用強調的實力 3
voice-volume 由語音synthesises指波形輸出的幅度 3

字幕屬性

屬性 描述 CSS
marquee-direction 設置的移動內容的方向 3
marquee-play-count 設置多少次的內容移動 3
marquee-speed 設置內容滾動的速度有多快 3
marquee-style 設置移動內容的樣式 3