-
CSS2
鎖定
- 中文名
- 層疊樣式表2級
- 外文名
- Cascading Style Sheets Level 2
- 推出時間
- 1998年5月
CSS2產生背景
樣式單自從CSS1的版本之後，又在1998年5月發佈了CSS2版本，樣式單得到了更多的充實。
CSS2是一套全新的樣式表結構，是由W3C推行的，同以往的CSS1完全不一樣，CSS2推薦的是一套內容和表現效果分離的方式，HTML元素可以通過CSS2的樣式控制顯示效果，可完全不使用以往HTML中的table和td來定位表單的外觀和樣式，只需使用div和li此類HTML標籤來分割元素，之後即可通過CSS2樣式來定義表單界面的外觀
[2]
。
CSS2使用單位
顏色單位
rgb(R,G,B) #RRGGBB Color Name
時間單位
s ms
頻率單位
kHz Hz
CSS2標準屬性
屬性 | 取值 | 初值 | 適用於 （默認所有） | 繼承性 | 百分比 （默認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 | 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 | 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 |
CSS2性能評價
CSS2規範在很大程度上擴展了CSS1中所完成的工作。它包括數十種新的屬性（和偽元素），以及現有屬性的很多附加值。
CSS2合併和精煉了用來定位的屬性系列，讓設計者可以更多地控制頁面佈局，DHTML作者可以創建動態動作效果。它比傳統的排版元素，諸如短行、孤立行以及分頁，提供了更多的控制。這表示樣式表的發展已經考慮到了文檔的HTML顯示和打印兩個方面。
CSS2還引入了一些屬性，可以對錶格元素外觀提供附加的控制。作為W3C對提高網頁可訪性所做工作的一部分，新的樣式表規範包括了很多專門針對非可視化網頁顯示的屬性。這些新的屬性提供了對語音傳送和聲音的控制
[3]
。
遺憾的是其中的大多數樣式規則在當時的瀏覽器中沒有得到廣泛的支持
[1]
，在後來的CSS2.1中一部分被修改了，還有一部分被刪掉了
[4]
（像text-shadow屬性在CSS2中被引入，CSS2.1中被刪除，卻在CSS3中又再次被引入
[5]
）。
- 參考資料
-
- 1. 賈小珠等編著. 深入淺出XML[M]. 北京：人民郵電出版社, 2001:146
- 2. 徐曦編著. 網頁製作與網站建設完全學習手冊[M]. 北京：清華大學出版社, 2012:372
- 3. （美）Jennifer Niederst著；趙聲攀等譯. WEB設計技術手冊 第2版[M]. 北京：機械工業出版社, 2003:361
- 4. 關於CSS2.1規範 ．ayqy[引用日期2018-02-28]
- 5. 管媛輝等編著. HTML5+CSS3入門經典[M]. 北京：機械工業出版社, 2013:218
- 詞條統計
-
- 瀏覽次數：次
- 編輯次數：19次歷史版本
- 最近更新： wintetdxf