1CSS2簡介

樣式單自從CSS1的版本之後,又在1998年5月發布了CSS2版本,樣式單得到了更多的充實。
CSS2.0是一套全新的樣式表結構,是由W3C推行的,同以往的CSS1.0或CSS1.2完全不一樣,CSS2.0推薦的是一套內容和表現效果分離的方式,HTML元素可以通過CSS2.0的樣式控制顯示效果,可完全不使用以往HTML中的table和td來定位表單的外觀和樣式,只需使用div和 Li此類HTML標籤來分割元素,之後即可通過CSS2.0樣式來定義表單界面的外觀。
CSS2.0提供給我們了一個機制,讓程序員開發時可以不考慮顯示和界面就可以製作表單和界面,顯示問題可由美工或是程序員後期再來編寫相應的 CSS2.0樣式來解決。不過由於CSS2.0目前尚未見過很好的編輯軟體,所以無法做到所見即所得,編寫起來不易。

2CSS2單位

絕對長度單位
pt pc in cm mm
角度單位
deg grad rad
頻率單位
kHz Hz

3CSS2標準屬性

屬性
取值
(本列及后列鏈接源為W3C)
初值
適用於
(默認所有)
繼承性
百分比
(默認N/A)
媒體
azimuth
<angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit
center

yes

aural
background
[background-color || background-image || background-repeat || background-attachment || background-position] | inherit
XX

no
allowed on 'background-position'
visual
background-attachment
scroll | fixed | inherit
scroll

no

visual
background-color
<color> | transparent | inherit
transparent

no

visual
background-image
<uri> | none | inherit
none

no

visual
background-position
[ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
0% 0%
block-level and replaced elements
no
refer to the size of the box itself
visual
background-repeat
repeat | repeat-x | repeat-y | no-repeat | inherit
repeat

no

visual
border
[ border-width || border-style || <color> ] | inherit
see individual properties

no

visual
border-collapse
collapse | separate | inherit
collapse
'table' and 'inline-table' elements
yes

visual
border-color
<color>{1,4} | transparent | inherit
see individual properties

no

visual
border-spacing
<length> <length>? | inherit
0
'table' and 'inline-table' elements
yes

visual
border-style
<border-style>{1,4} | inherit
see individual properties

no

visual
border-top border-right border-bottom border-left
[ border-top-width || border-style || <color> ] | inherit
see individual properties

no

visual
border-top-color border-right-color border-bottom-color border-left-color
<color> | inherit
the value of the 'color' property

no

visual
border-top-style border-right-style border-bottom-style border-left-style
<border-style> | inherit
none

no

visual
border-top-width border-right-width border-bottom-width border-left-width
<border-width> | inherit
medium

no

visual
border-width
<border-width>{1,4} | inherit
see individual properties

no

visual
bottom
<length> | <percentage> | auto | inherit
auto
positioned elements
no
refer to height of containing block
visual
caption-side
top | bottom | left | right | inherit
top
'table-caption' elements
yes

visual
clear
none | left | right | both | inherit
none
block-level elements
no

visual
clip
<shape> | auto | inherit
auto
block-level and replaced elements
no

visual
color
<color> | inherit
depends on user agent

yes

visual
content
[ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
empty string
:before and :after pseudo-elements
no

all
counter-increment
[ <identifier> <integer>? ]+ | none | inherit
none

no

all
counter-reset
[ <identifier> <integer>? ]+ | none | inherit
none

no

all
cue
[ cue-before || cue-after ] | inherit
XX

no

aural
cue-after
<uri> | none | inherit
none

no

aural
cue-before
<uri> | none | inherit
none

no

aural
cursor
[ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
auto

yes

visual, interactive
direction
ltr | rtl | inherit
ltr
all elements, but see prose
yes

visual
display
inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
inline

no

all
elevation
<angle> | below | level | above | higher | lower | inherit
level

yes

aural
empty-cells
show | hide | inherit
show
'table-cell' elements
yes

visual
float
left | right | none | inherit
none
all but positioned elements and generated content
no

visual
font
[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
see individual properties

yes
allowed on 'font-size' and 'line-height'
visual
font-family
[[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit
depends on user agent

yes

visual
font-size
<absolute-size> | <relative-size> | <length> | <percentage> | inherit
medium

yes, the computed value is inherited
refer to parent element's font size
visual
font-size-adjust
<number> | none | inherit
none

yes

visual
font-stretch
normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
normal

yes

visual
font-style
normal | italic | oblique | inherit
normal

yes

visual
font-variant
normal | small-caps | inherit
normal

yes

visual
font-weight
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
normal

yes

visual
height
<length> | <percentage> | auto | inherit
auto
all elements but non-replaced inline elements, table columns, and column groups
no
see prose
visual
left
<length> | <percentage> | auto | inherit
auto
positioned elements
no
refer to width of containing block
visual
letter-spacing
normal | <length> | inherit
normal

yes

visual
line-height
normal | <number> | <length> | <percentage> | inherit
normal

yes
refer to the font size of the element itself
visual
list-style
[ list-style-type || list-style-position || list-style-image ] | inherit
XX
elements with 'display: list-item'
yes

visual
list-style-image
<uri> | none | inherit
none
elements with 'display: list-item'
yes

visual
list-style-position
inside | outside | inherit
outside
elements with 'display: list-item'
yes

visual
list-style-type
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit
disc
elements with 'display: list-item'
yes

visual
margin
<margin-width>{1,4} | inherit
XX

no
refer to width of containing block
visual
margin-top margin-right margin-bottom margin-left
<margin-width> | inherit
0

no
refer to width of containing block
visual
marker-offset
<length> | auto | inherit
auto
elements with 'display: marker'
no

visual
marks
[ crop || cross ] | none | inherit
none
page context
N/A

visual, paged
max-height
<length> | <percentage> | none | inherit
none
all elements except non-replaced inline elements and table elements
no
refer to height of containing block
visual
max-width
<length> | <percentage> | none | inherit
none
all elements except non-replaced inline elements and table elements
no
refer to width of containing block
visual
min-height
<length> | <percentage> | inherit
0
all elements except non-replaced inline elements and table elements
no
refer to height of containing block
visual
min-width
<length> | <percentage> | inherit
UA dependent
all elements except non-replaced inline elements and table elements
no
refer to width of containing block
visual
orphans
<integer> | inherit
2
block-level elements
yes

visual, paged
outline
[ outline-color || outline-style || outline-width ] | inherit
see individual properties

no

visual, interactive
outline-color
<color> | invert | inherit
invert

no

visual, interactive
outline-style
<border-style> | inherit
none

no

visual, interactive
outline-width
<border-width> | inherit
medium

no

visual, interactive
overflow
visible | hidden | scroll | auto | inherit
visible
block-level and replaced elements
no

visual
padding
<padding-width>{1,4} | inherit
XX

no
refer to width of containing block
visual
padding-top padding-right padding-bottom padding-left
<padding-width> | inherit
0

no
refer to width of containing block
visual
page
<identifier> | auto
auto
block-level elements
yes

visual, paged
page-break-after
auto | always | avoid | left | right | inherit
auto
block-level elements
no

visual, paged
page-break-before
auto | always | avoid | left | right | inherit
auto
block-level elements
no

visual, paged
page-break-inside
avoid | auto | inherit
auto
block-level elements
yes

visual, paged
pause
[ [<time> | <percentage>]{1,2} ] | inherit
depends on user agent

no
see descriptions of 'pause-before' and 'pause-after'
aural
pause-after
<time> | <percentage> | inherit
depends on user agent

no
see prose
aural
pause-before
<time> | <percentage> | inherit
depends on user agent

no
see prose
aural
pitch
<frequency> | x-low | low | medium | high | x-high | inherit
medium

yes

aural
pitch-range
<number> | inherit
50

yes

aural
play-during
<uri> mix? repeat? | auto | none | inherit
auto

no

aural
position
static | relative | absolute | fixed | inherit
static
all elements, but not to generated content
no

visual
quotes
[<string> <string>]+ | none | inherit
depends on user agent

yes

visual
richness
<number> | inherit
50

yes

aural
right
<length> | <percentage> | auto | inherit
auto
positioned elements
no
refer to width of containing block
visual
size
<length>{1,2} | auto | portrait | landscape | inherit
auto
the page context
N/A

visual, paged
speak
normal | none | spell-out | inherit
normal

yes

aural
speak-header
once | always | inherit
once
elements that have table header information
yes

aural
speak-numeral
digits | continuous | inherit
continuous

yes

aural
speak-punctuation
code | none | inherit
none

yes

aural
speech-rate
<number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit
medium

yes

aural
stress
<number> | inherit
50

yes

aural
table-layout
auto | fixed | inherit
auto
'table' and 'inline-table' elements
no

visual
text-align
left | right | center | justify | <string> | inherit
depends on user agent and writing direction
block-level elements
yes

visual
text-decoration
none | [ underline || overline || line-through || blink ] | inherit
none

no (see prose)

visual
text-indent
<length> | <percentage> | inherit
0
block-level elements
yes
refer to width of containing block
visual
text-shadow
none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit
none

no (see prose)

visual
text-transform
capitalize | uppercase | lowercase | none | inherit
none

yes

visual
top
<length> | <percentage> | auto | inherit
auto
positioned elements
no
refer to height of containing block
visual
unicode-bidi
normal | embed | bidi-override | inherit
normal
all elements, but see prose
no

visual
vertical-align
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
baseline
inline-level and 'table-cell' elements
no
refer to the 'line-height' of the element itself
visual
visibility
visible | hidden | collapse | inherit
inherit

no

visual
voice-family
[[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit
depends on user agent

yes

aural
volume
<number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit
medium

yes
refer to inherited value
aural
white-space
normal | pre | nowrap | inherit
normal
block-level elements
yes

visual
widows
<integer> | inherit
2
block-level elements
yes

visual, paged
width
<length> | <percentage> | auto | inherit
auto
all elements but non-replaced inline elements, table rows, and row groups
no
refer to width of containing block
visual
word-spacing
normal | <length> | inherit
normal

yes

visual
z-index
auto | <integer> | inherit
auto
positioned elements
no

visual
上一篇[table]    下一篇 [CSS1]

相關評論

同義詞:暫無同義詞