close

雖然 CSS3 尚在開發中,某些功能已經可以在部分瀏覽器中使用了,尤其是 Safari。
先把已經發表的屬性整理一下,由於找不到CSS3完整的中文教學,所以不知道翻譯的對不對。

字體樣式 - Font

屬性
Attribute

屬性描述 Description


Values

CSS

color

設定文字顏色

color

1

font

用簡短屬性設定文字樣式

font-style | font-variant |
font-weight | font-size/line-height | font-family | caption | icon | menu | message-box | small-caption | status-bar

1

font-family

設定文字字形

family-name | generic-family

1

font-size

設定文字大小

absolute-size | relative-size | 
length

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

@font-face

字型下載

 

3

font-size-adjust

字型大小調整

number | none | inherit

3

font-stretch

字體延展性

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 | 
background-color | 
background-image |
background-position |
 background-repeat

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 | 
length length

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 |
content-box

3

background-size

指定背景圖片的大小

length | percentage | cover | contain

3

列表樣式 - List

屬性 Attribute

屬性描述 Description

Values

CSS

list-style

用簡短屬性設定列表樣式

list-style-image | 
list-style-position | list-style-type

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 |
border-style | 
border-width

1

border-bottom

用簡短屬性設定下邊框樣式

border-bottom-width | 
border-color | 
border-style

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 | 
border-style | 
border-color

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 | 
border-style | 
border-color

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 | 
border-style | 
border-color

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 |
relative | static

2

right

設定物件與框架右邊的距離

auto | length

2

top

設定物件與框架上邊的距離

auto | length

2

z-index

設定覆蓋圖層優先顯示序

auto | number

2

邊界樣式 - Margin

屬性 Attribute

屬性描述 Description

Values

CSS

margin

用簡短屬性設定邊界樣式

margin-top | 
margin-right | 
margin-bottom | 
margin-left

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 | 
padding-right | 
padding-bottom | 
padding-left

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 |
rect(length length length length)

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 | 
outline-width

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

box-align

盒子對齊位置

start | end | center | baseline | stretch

3

box-direction

盒子指定方向

normal | reverse | inherit

3

box-flex

盒子中子元素相對大小倍數

value

3

box-flex-group

 

integer

3

box-lines

 

single | multiple

3

box-ordinal-group

 

integer

3

box-orient

 

horizontal | vertical | inline-axis | block-axis | inherit

3

box-pack

 

start | end | center | justify

3

超連結樣式Hyoerlink

屬性 Attribute

屬性描述 Description

Values

CSS

target

目標屬性設置

target-name target-new target-position

3

target-name

目標位置名稱

current | root | parent | new | modal | name

3

target-new

開啟方式

window | tab | none

3

target-position

指定連結位置

above | behind | front | back

3

 

 參考來源:W3SHCOOL

arrow
arrow
    全站熱搜

    alsnow 發表在 痞客邦 留言(0) 人氣()