雖然 CSS3 尚在開發中,某些功能已經可以在部分瀏覽器中使用了,尤其是 Safari。
先把已經發表的屬性整理一下,由於找不到CSS3完整的中文教學,所以不知道翻譯的對不對。
字體樣式 - Font
屬性 |
屬性描述 Description |
值 |
CSS |
color |
設定文字顏色 |
color |
1 |
font |
用簡短屬性設定文字樣式 |
font-style | font-variant | |
1 |
font-family |
設定文字字形 |
family-name | generic-family |
1 |
font-size |
設定文字大小 |
absolute-size | relative-size | |
1 |
font-size-adjust |
強迫設定文字大小 |
none | number |
2 |
font-stretch |
設定文字拉伸變形 |
condensed | expanded | extra-expanded | extra-condensed | narrower | normal | semi-condensed | semi-expanded | ultra-condensed | ultra-expanded | wider |
2 |
font-style |
設定文字風格 |
normal | italic | oblique |
1 |
font-variant |
設定是否轉為小寫 |
normal | small-caps |
1 |
font-weight |
設定文小粗細 |
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
1 |
字型下載 |
|
3 |
|
字型大小調整 |
number | none | inherit |
3 |
|
字體延展性 |
wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit |
3 |
文字樣式 - Text
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
direction |
設定文字方向 |
inherit | ltr | rtl |
2 |
letter-spacing |
設定字元間距 |
normal | length |
1 |
line-height |
設定行高 |
normal | length |
1 |
text-align |
設定文字的對齊方式 |
center | justify | left | right |
1 |
text-indent |
設定首行縮排 |
length |
1 |
unicode-bidi |
設定重排序 |
bidi-override | embed | normal |
2 |
vertical-align |
設定物件垂直對齊方式 |
auto | baseline | bottom | length | middle | sub | super | text-bottom | text-top | top |
1 |
text-decoration |
設定文字裝飾 |
none | blink | line-through | overline | underline |
1 |
text-shadow |
設定文字陰影 |
none | horizontal-offset | vertical-offset | blur-radius | color |
2 |
text-transform |
設定文字大小楷轉換 |
none | capitalize | lowercase | uppercase |
1 |
word-spacing |
設定文字間距 |
normal | length |
1 |
white-space |
設定文字空格處理方式 |
normal | nowrap | pre |
1 |
hanging-punctuation |
懸掛標點符號 |
none | first | last | allow-end | force-end |
3 |
punctuation-trim |
修整標點符號 |
none | start | end | allow-end | adjacent |
3 |
text-align-last |
對齊末端文字 |
|
3 |
text-emphasis |
標記重點文字 |
auto | inter-word | inter-ideograph | inter-cluster | distribute | kashida|trim |
3 |
text-justify |
對齊文字 |
auto | inter-word | inter-ideograph | inter-cluster | distribute | kashida|trim |
3 |
text-outline |
文字大綱 |
thickness blur color |
3 |
text-overflow |
文字溢出時的顯示方式 |
clip | ellipsis | string |
3 |
text-shadow |
文字陰影 |
h-shadow v-shadow blur color |
3 |
text-wrap |
文字斷行 |
normal | none | unrestricted | suppress |
3 |
word-break |
斷行規則非CJK腳本 |
normal | break-all | hyphenate |
3 |
word-wrap |
自動斷行 |
normal | break-word |
3 |
背景樣式 - Background
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
background |
用簡短屬性設定所有背景樣式 |
background-attachment | |
1 |
background-attachment |
設定背景是否跟著捲軸移動 |
scroll | fixed |
1 |
background-color |
設定物件的背景顏色 |
color | transparent |
1 |
background-image |
設定物件的背景圖片 |
none | url("URL") |
1 |
background-position |
設定背景圖片的開始位置 |
bottom
center | bottom left | bottom right | center center | center left | center
right | top center | top left | top right | |
1 |
background-repeat |
設定背景圖片是否重覆顯示 |
no-repeat | repeat | repeat-x | repeat-yt |
1 |
background-clip |
指定繪圖區的背景圖片 |
padding-box | border-box | content-box |
3 |
background-origin |
指定定位區的背景圖片 |
padding-box |border-box | |
3 |
background-size |
指定背景圖片的大小 |
length | percentage | cover | contain |
3 |
列表樣式 - List
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
list-style |
用簡短屬性設定列表樣式 |
list-style-image | |
1 |
list-style-image |
設定項目圖片 |
none | url(URL) |
1 |
list-style-position |
設定項目位置 |
inside | outside |
1 |
list-style-type |
設定項目樣式 |
disc | circle | square | decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none |
1 |
marker-offset |
設定項目間距 |
auto | length |
2 |
框線樣式 - Border
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
border |
用簡短屬性設定四條邊框樣式 |
border-color | |
1 |
border-bottom |
用簡短屬性設定下邊框樣式 |
border-bottom-width | |
1 |
border-bottom-color |
設定下邊框框線顏色 |
color | transparent |
2 |
border-bottom-style |
設定下邊框框線顯示方式 |
dotted | dashed | double | groove | hidden | inset | none | outset | ridge | solid | window-inset |
2 |
border-bottom-width |
設定下邊框框線粗度 |
medium | thick | thin | length |
1 |
border-color |
設定各邊框框線顏色 |
color | transparent |
1 |
border-left |
用簡短屬性設定左邊框樣式 |
border-bottom-width | |
1 |
border-left-color |
設定左邊框框線顏色 |
color | transparent |
2 |
border-left-style |
設定左邊框框線顯示方式 |
dotted | dashed | double | groove | hidden | inset | none | outset | ridge | solid | window-inset |
2 |
border-left-width |
設定左邊框框線粗度 |
medium | thick | thin | length |
1 |
border-right |
用簡短屬性設定右邊框樣式 |
border-bottom-width | |
1 |
border-right-color |
設定右邊框框線顏色 |
color | transparent |
2 |
border-right-style |
設定右邊框框線顯示方式 |
dotted | dashed | double | groove | hidden | inset | none | outset | ridge | solid | window-inset |
2 |
border-right-width |
設定右邊框框線粗度 |
medium | thick | thin | length |
1 |
border-style |
設定各邊框框線顯示方式 |
dotted | dashed | double | groove | hidden | inset | none | outset | ridge | solid | window-inset |
1 |
border-top |
用簡短屬性設定上邊框樣式 |
border-bottom-width | |
1 |
border-top-color |
設定上邊框框線顏色 |
color | transparent |
2 |
border-top-style |
設定上邊框框線顯示方式 |
dotted | dashed | double | groove | hidden | inset | none | outset | ridge | solid | window-inset |
2 |
border-top-width |
設定上邊框框線粗度 |
medium | thick | thin | length |
1 |
border-width |
設定各邊框框線粗度 |
medium | thick | thin | length |
1 |
border-bottom-left-radius |
定義邊框的左下角形狀 |
lengths | % [lengths | %] |
3 |
border-bottom-right-radius |
定義邊框的右下角形狀 |
lengths | % [lengths | %] |
3 |
border-image |
設置邊框圖片*屬性 |
source slice width outset repeat |
3 |
border-image-outset |
邊框圖片外邊距 |
length | number |
3 |
border-image-repeat |
設置所有邊框圖像 *是否重覆 |
stretch | repeat | round |
3 |
border-image-slice |
邊框圖片分割 |
number | % | fill |
3 |
border-image-source |
邊框圖片來源 |
|
3 |
border-image-width |
邊框圖片寬度 |
number | % | auto |
3 |
border-radius |
邊框圓角 |
1-4 lengths | % / 1-4 lengths | % |
3 |
border-top-left-radius |
左上邊框圓角 |
|
3 |
border-top-right-radius |
右上邊框圓角 |
|
3 |
border-bottom-left-radius |
左下邊框圓角 |
|
3 |
border-bottom-right-radius |
右下邊框圓角 |
|
3 |
box-decoration-break |
|
|
|
box-shadow |
盒狀(方塊)陰影 |
h-shadow v-shadow blur spread color inset |
3 |
尺寸樣式 - Dimension
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
height |
設定物件高度 |
auto | length |
1 |
max-height |
設定物件最大高度值 |
none | length |
2 |
max-width |
設定物件最大闊度值 |
none | length |
2 |
min-height |
設定物件最小高度值 |
length |
2 |
min-width |
設定物件最小闊度值 |
length |
2 |
width |
設定物件闊度 |
auto | length |
1 |
定位樣式 - Positioning
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
bottom |
設定物件與框架底邊的距離 |
auto | length |
2 |
left |
設定物件與框架左邊的距離 |
auto | length |
2 |
position |
設定物件顯示方式 |
absolute
| fixed | |
2 |
right |
設定物件與框架右邊的距離 |
auto | length |
2 |
top |
設定物件與框架上邊的距離 |
auto | length |
2 |
z-index |
設定覆蓋圖層優先顯示序 |
auto | number |
2 |
邊界樣式 - Margin
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
margin |
用簡短屬性設定邊界樣式 |
margin-top | |
1 |
margin-bottom |
設定下邊界樣式 |
auto | length |
1 |
margin-left |
設定左邊界樣式 |
auto | length |
1 |
margin-right |
設定右邊界樣式 |
auto | length |
1 |
margin-top |
設定上邊界樣式 |
auto | length |
1 |
留白樣式 - Padding
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
padding |
用簡短屬性設定留白樣式 |
padding-top | |
1 |
padding-bottom |
設定下留白樣式 |
length |
1 |
padding-left |
設定左留白樣式 |
length |
1 |
padding-right |
設定右留白樣式 |
length |
1 |
padding-top |
設定上留白樣式 |
length |
1 |
佈局樣式 - Layout
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
clear |
清除抵銷 float 屬性的作用。 |
both | left | none | right |
1 |
clip |
設定物件可視欄位 |
auto
| |
2 |
display |
設定物件顯示方式 |
block | inline | inline-block | inline-table | list-item | none | ruby | ruby-base | ruby-base-container | run-in | ruby-text | ruby-text-container | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group |
1 |
float |
設定物件浮動方向 |
left | none | right |
1 |
overflow |
設定內容超出界限時處理手法 |
auto | hidden | scroll | visible |
2 |
visibility |
設定物件是否可見 |
collapse | hidden | inherit | visible |
2 |
表格樣式 - Table
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
border-collapse |
設定表格框線間距離 |
collapse | separate |
2 |
border-spacing |
設定表格框線間距離值 |
length |
2 |
caption-side |
設定表格標題位置 |
bottom | left | right | top |
2 |
empty-cells |
設定空儲存格是否顯示 |
hide | show |
2 |
speak-header |
設定表格頭是否每次於儲存格後發音 |
once | always |
2 |
table-layout |
設定是否鎖定儲存格大小 |
auto | fixed |
2 |
輪廓樣式 - Outline
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
outline |
用簡短屬性設定輪廓樣式 |
outline-color | outline-style | |
2 |
outline-color |
設定物件輪廓顏色 |
color | invert |
2 |
outline-style |
設定物件輪廓樣式 |
dotted | dashed | double | groove | hidden | inset | none | outset | ridge | solid |
2 |
outline-width |
設定物件輪廓粗細 |
medium | thick | thin | length |
2 |
內容樣式 - Generated Content
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
content |
設定文字內容 |
string | counter(name, list-style-type) |
2 |
counter-increment |
設定計數器增長值 |
none | identifier number |
2 |
counter-reset |
設定計數器重設 |
none | identifier number |
2 |
quotes |
定義引號 |
none | string |
2 |
列印樣式 - Printing
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
marks |
設定頁容器外邊的標誌 |
crop | cross | none |
2 |
orphans |
設定每頁容器最少的行數 |
number |
2 |
page |
設定頁容器的頁面類型 |
auto | pagetype |
2 |
page-break-after |
設定對象後出現的頁分割符 |
auto | always | avoid | left | right |
2 |
page-break-before |
設定對象前出現的頁分割符 |
auto | always | avoid | left | right |
2 |
page-break-inside |
設定對象中出現的頁分割符 |
auto | avoid |
2 |
size |
設定頁面規格 |
auto | landscape | portrait | length |
2 |
widows |
設定每頁頂部的最少行數 |
number |
2 |
聲音樣式 - Aural
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
azimuth |
設定聲音水平來源 |
angle | center | center-left | center-right | far-left | far-right | left | left-side | leftwards | right | right-side | rightwards |
2 |
cue |
用簡短屬性設定對象前後播放的聲音 |
cue-before | cue-after |
2 |
cue-after |
設定對象後播放的聲音 |
none | url(url) |
2 |
cue-before |
設定對象前播放的聲音 |
none | url(url) |
2 |
elevation |
設定聲音垂直來源 |
angle | above | below | higher | level | lower |
2 |
pause |
用簡短屬性設定對象前後發聲的暫停 |
pause-before | pause-after |
2 |
pause-after |
設定對象後發聲的暫停 |
time |
2 |
pause-before |
設定對象前發聲的暫停 |
time |
2 |
pitch |
設定聲音音高 |
frequency | x-low | low | medium | high | x-high |
2 |
pitch-range |
設定聲音變化度 |
number |
2 |
play-during |
設定附加聲音 |
auto | mix | none | repeat | url(URL) |
2 |
richness |
設定聲音豐厚度 |
number |
2 |
speak |
設定聲音是否給出 |
normal | none | spell-out |
2 |
speak-numeral |
設定數字發音法 |
continuous | digits |
2 |
speak-punctuation |
設定標點符號發音法 |
none | code |
2 |
speech-rate |
設定發音速度 |
number | x-slow | slow | medium | fast | x-fast | faster | slower |
2 |
stress |
設定聲音變化值 |
number |
2 |
voice-family |
設定聲音類型 |
name | child | female | male |
2 |
volume |
設定聲音音量 |
number | silent | x-soft | soft | medium | loud | x-loud |
2 |
其他樣式 - Classification
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
cursor |
設定鼠標圖樣 |
all-scroll | auto | col-resize | crosshair | default | hand | help | move | no-drop | not-allowed | pointer | progress | row-resize | text | url(URL) | vertical-text | wait | *-resize |
2 |
顏色樣式 - Color
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
color-profile |
顏色配置文件 |
|
3 |
opacity |
不透明度 |
value | inherit |
3 |
rendering-intent |
顏色配置規則 |
|
3 |
2D /3D變形樣式 – 2D/3D Trasform
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
transform |
變形 |
none | transform-functions |
3 |
transform-origin |
視向變形支點基準 |
x-axis y-axis z-axis |
3 |
transform-style |
變形類型 |
flat | preserve-3d |
3 |
perspective |
透視角度 |
number | none |
3 |
perspective-origin |
透視基準位置 |
x-axis y-axis |
3 |
backface-visibility |
背面能見度 |
visible | hidden |
3 |
漸變樣式 - Transition
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
transition |
漸變屬性設置 |
property duration timing-function delay |
3 |
transition-property |
漸變效果 |
none | all | property |
3 |
transition-duration |
漸變時程 |
time |
3 |
transition-timing-function |
漸變速度 |
linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) |
3 |
transition-delay |
漸變起始值 |
time |
3 |
動畫樣式 - Animation
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
@keyframes |
指定動畫 |
@keyframes { animationname keyframes-selector {css-styles;} } |
3 |
animation |
動畫屬性設置 |
name duration timing-function delay iteration-count direction |
3 |
animation-name |
動畫名稱 |
keyframename | none |
3 |
animation-duration |
動畫時程 |
time |
3 |
animation-timing-function |
動畫執行速度 |
value |
3 |
animation-delay |
動畫起始值 |
time |
3 |
animation-iteration-count |
播放次數 |
value |
3 |
animation-direction |
動畫方向重覆週期 |
value |
3 |
animation-play-state |
播放狀態 |
paused | running |
3 |
盒子樣式 - Box
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
overflow-x |
平行向溢出設置 |
visible | hidden | scroll | auto | no-display | no-content |
3 |
overflow-y |
垂直向溢出設置 |
visible | hidden | scroll | auto | no-display | no-content |
3 |
overflow-style |
溢出樣式 |
auto | scrollbar | panner | move | marquee |
3 |
rotation |
傾斜角度 |
angle |
3 |
rotation-point |
傾斜基準點 |
value |
3 |
彈性盒子樣式Fiexble Box
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
盒子對齊位置 |
start | end | center | baseline | stretch |
3 |
|
盒子指定方向 |
normal | reverse | inherit |
3 |
|
盒子中子元素相對大小倍數 |
value |
3 |
|
|
integer |
3 |
|
|
single | multiple |
3 |
|
|
integer |
3 |
|
|
horizontal | vertical | inline-axis | block-axis | inherit |
3 |
|
|
start | end | center | justify |
3 |
超連結樣式Hyoerlink
屬性 Attribute |
屬性描述 Description |
值 Values |
CSS |
目標屬性設置 |
target-name target-new target-position |
3 |
|
目標位置名稱 |
current | root | parent | new | modal | name |
3 |
|
開啟方式 |
window | tab | none |
3 |
|
指定連結位置 |
above | behind | front | back |
3 |
參考來源:W3SHCOOL