CSS2

CSS2

CSS2是CSS(層疊樣式表)的第二級,W3C組織於1998年推出的技術規範,提供了比CSS1更強的XML和HTML文檔的格式化功能。例如,元素的擴展定位與可視格式化、頁面格式與列印支持和聲音樣式單等。

產生背景


樣式單自從CSS1的版本之後,又在1998年5月發布了CSS2版本,樣式單得到了更多的充實。
CSS2是一套全新的樣式表結構,是由W3C推行的,同以往的CSS1完全不一樣,CSS2推薦的是一套內容和表現效果分離的方式,HTML元素可以通過CSS2的樣式控制顯示效果,可完全不使用以往HTML中的table和td來定位表單的外觀和樣式,只需使用div和li此類HTML標籤來分割元素,之後即可通過CSS2樣式來定義表單界面的外觀。

使用單位


顏色單位
rgb(R,G,B) #RRGGBB Color Name
時間單位
s ms
頻率單位
kHz Hz

標準屬性


屬性取值初值適用於(默認所有)繼承性百分比(默認N/A)媒體
azimuth | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inheritcenteryesaural
background[background-color || background-image || background-repeat || background-attachment || background-position] | inheritXXnoallowed on 'background-position'visual
background-attachmentscroll | fixed | inheritscrollnovisual
background-color | transparent | inherittransparentnovisual
background-image | none | inheritnonenovisual
background-position[ [<percentage> | ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit0% 0%block-level and replaced elementsnorefer to the size of the box itselfvisual
background-repeatrepeat | repeat-x | repeat-y | no-repeat | inheritrepeatnovisual
border[ border-width || border-style || ] | inheritsee individual propertiesnovisual
border-collapsecollapse | separate | inheritcollapse'table' and 'inline-table' elementsyesvisual
border-color{1,4} | transparent | inheritsee individual propertiesnovisual
border-spacing ? | inherit'table' and 'inline-table' elementsyesvisual
border-style{1,4} | inheritsee individual propertiesnovisual
border-top border-right border-bottom border-left[ border-top-width || border-style || ] | inheritsee individual propertiesnovisual
border-top-color border-right-color border-bottom-color border-left-color | inheritthe value of the 'color' propertynovisual
border-top-style border-right-style border-bottom-style border-left-style | inheritnonenovisual
border-top-width border-right-width border-bottom-width border-left-width | inheritmediumnovisual
border-width{1,4} | inheritsee individual propertiesnovisual
bottom | | auto | inheritautopositioned elementsnorefer to height of containing blockvisual
caption-sidetop | bottom | left | right | inherittop'table-caption' elementsyesvisual
clearnone | left | right | both | inheritnoneblock-level elementsnovisual
clip | auto | inheritautoblock-level and replaced elementsnovisual
color | inheritdepends on user agentyesvisual
content[ | | | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inheritempty string:before and :after pseudo-elementsnoall
counter-increment[ ? ]+ | none | inheritnonenoall
counter-reset[ ? ]+ | none | inheritnonenoall
cue[ cue-before || cue-after ] | inheritXXnoaural
cue-after | none | inheritnonenoaural
cue-before | none | inheritnonenoaural
cursor[ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inheritautoyesvisual, interactive
directionltr | rtl | inheritltrall elements, but see proseyesvisual
displayinline | 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 | inheritinlinenoall
elevation | below | level | above | higher | lower | inheritlevelyesaural
empty-cellsshow | hide | inheritshow'table-cell' elementsyesvisual
floatleft | right | none | inheritnoneall but positioned elements and generated contentnovisual
font[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inheritsee individual propertiesyesallowed on 'font-size' and 'line-height'visual
font-family[[ | ],]* [ | ] | inheritdepends on user agentyesvisual
font-size | | | | inheritmediumyes, the computed value is inheritedrefer to parent element's font sizevisual
font-size-adjust | none | inheritnoneyesvisual
font-stretchnormal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inheritnormalyesvisual
font-stylenormal | italic | oblique | inheritnormalyesvisual
font-variantnormal | small-caps | inheritnormalyesvisual
font-weightnormal | bold | bolder | lighter | 100 |、 200 | 300、 | 400 |、 500、 | 600 | 700 、| 800 | 900 | inheritnormalyesvisual
height | | auto | inheritautoall elements but non-replaced inline elements, table columns, and column groupsnosee prosevisual
left | | auto | inheritautopositioned elementsnorefer to width of containing blockvisual
letter-spacingnormal | | inheritnormalyesvisual
line-heightnormal | | | | inheritnormalyesrefer to the font size of the element itselfvisual
list-style[ list-style-type || list-style-position || list-style-image ] | inheritXXelements with 'display: list-item'yesvisual
list-style-image | none | inheritnoneelements with 'display: list-item'yesvisual
list-style-positioninside | outside | inheritoutsideelements with 'display: list-item'yesvisual
list-style-typedisc | 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 | inheritdiscelements with 'display: list-item'yesvisual
margin{1,4} | inheritXXnorefer to width of containing blockvisual
margin-top margin-right margin-bottom margin-left | inheritnorefer to width of containing blockvisual
marker-offset | auto | inheritautoelements with 'display: marker'novisual
marks[ crop || cross ] | none | inheritnonepage contextN/Avisual, paged
max-height | | none | inheritnoneall elements except non-replaced inline elements and table elementsnorefer to height of containing blockvisual
max-width | | none | inheritnoneall elements except non-replaced inline elements and table elementsnorefer to width of containing blockvisual
min-height | | inheritall elements except non-replaced inline elements and table elementsnorefer to height of containing blockvisual
min-width | | inheritUA dependentall elements except non-replaced inline elements and table elementsnorefer to width of containing blockvisual
orphans | inherit2block-level elementsyesvisual, paged
outline[ outline-color || outline-style || outline-width ] | inheritsee individual propertiesnovisual, interactive
outline-color | invert | inheritinvertnovisual, interactive
outline-style | inheritnonenovisual, interactive
outline-width | inheritmediumnovisual, interactive
overflowvisible | hidden | scroll | auto | inheritvisibleblock-level and replaced elementsnovisual
padding{1,4} | inheritXXnorefer to width of containing blockvisual
padding-top padding-right padding-bottom padding-left | inheritnorefer to width of containing blockvisual
page | autoautoblock-level elementsyesvisual, paged
page-break-afterauto | always | avoid | left | right | inheritautoblock-level elementsnovisual, paged
page-break-beforeauto | always | avoid | left | right | inheritautoblock-level elementsnovisual, paged
page-break-insideavoid | auto | inheritautoblock-level elementsyesvisual, paged
pause[ [depends on user agentnosee descriptions of 'pause-before' and 'pause-after'aural
pause-afterdepends on user agentnosee proseaural
pause-beforedepends on user agentnosee proseaural
pitch | x-low | low | medium | high | x-high | inheritmediumyesaural
pitch-range | inherit50yesaural
play-during mix? repeat? | auto | none | inheritautonoaural
positionstatic | relative | absolute | fixed | inheritstaticall elements, but not to generated contentnovisual
quotes[ ]+ | none | inheritdepends on user agentyesvisual
richness | inherit50yesaural
right | | auto | inheritautopositioned elementsnorefer to width of containing blockvisual
size{1,2} | auto | portrait | landscape | inheritautothe page contextN/Avisual, paged
speaknormal | none | spell-out | inheritnormalyesaural
speak-headeronce | always | inheritonceelements that have table header informationyesaural
speak-numeraldigits | continuous | inheritcontinuousyesaural
speak-punctuationcode | none | inheritnoneyesaural
speech-rate | x-slow | slow | medium | fast | x-fast | faster | slower | inheritmediumyesaural
stress | inherit50yesaural
table-layoutauto | fixed | inheritauto'table' and 'inline-table' elementsnovisual
text-alignleft | right | center | justify | | inheritdepends on user agent and writing directionblock-level elementsyesvisual
text-decorationnone | [ underline || overline || line-through || blink ] | inheritnoneno (see prose)visual
text-indent | | inheritblock-level elementsyesrefer to width of containing blockvisual
text-shadownone | [ || ? ,]* [ || ?] | inheritnoneno (see prose)visual
text-transformcapitalize | uppercase | lowercase | none | inheritnoneyesvisual
top | | auto | inheritautopositioned elementsnorefer to height of containing blockvisual
unicode-bidinormal | embed | bidi-override | inheritnormalall elements, but see prosenovisual
vertical-alignbaseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inheritbaselineinline-level and 'table-cell' elementsnorefer to the 'line-height' of the element itselfvisual
visibilityvisible | hidden | collapse | inheritinheritnovisual
voice-family[[ | ],]* [ | ] | inheritdepends on user agentyesaural
volume | | silent | x-soft | soft | medium | loud | x-loud | inheritmediumyesrefer to inherited valueaural
white-spacenormal | pre | nowrap | inheritnormalblock-level elementsyesvisual
widows | inherit2block-level elementsyesvisual, paged
width | | auto | inheritautoall elements but non-replaced inline elements, table rows, and row groupsnorefer to width of containing blockvisual
word-spacingnormal | | inheritnormalyesvisual
z-indexauto | | inheritautopositioned elementsnovisual

性能評價


CSS2規範在很大程度上擴展了CSS1中所完成的工作。它包括數十種新的屬性(和偽元素),以及現有屬性的很多附加值。
CSS2合併和精鍊了用來定位的屬性系列,讓設計者可以更多地控制頁面布局,DHTML作者可以創建動態動作效果。它比傳統的排版元素,諸如短行、孤立行以及分頁,提供了更多的控制。這表示樣式表的發展已經考慮到了文檔的HTML顯示和列印兩個方面。
CSS2還引入了一些屬性,可以對錶格元素外觀提供附加的控制。作為W3C對提高網頁可訪性所做工作的一部分,新的樣式表規範包括了很多專門針對非可視化網頁顯示的屬性。這些新的屬性提供了對語音傳送和聲音的控制。
遺憾的是其中的大多數樣式規則在當時的瀏覽器中沒有得到廣泛的支持,在後來的CSS2.1中一部分被修改了,還有一部分被刪掉了(像text-shadow屬性在CSS2中被引入,CSS2.1中被刪除,卻在CSS3中又再次被引入)。