CSS2简介

CSS2单位(相对长度单位 绝对长度单位 颜色单位 角度单位 时间单位 频率单位)

CSS2标准属性

CSS2简介

样式单自从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目前尚未见过很好的编辑软件，所以无法做到所见即所得，编写起来不易。

CSS2单位

相对长度单位

em ex px

绝对长度单位

pt pc in cm mm

颜色单位

rgb(R,G,B) #RRGGBB Color Name

角度单位

deg grad rad

时间单位

s ms

频率单位

kHz Hz

CSS2标准属性

属性 　取值
(本列及后列链接源为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