css1 css2 css3 區別

操作方法

（01

02）CSS1提供有關字體、顏色、位置和文本屬性的基本信息，該版本已經得到了目前解析HTML和XML的瀏覽器的廣泛支持。讓程序員開發時可以不考慮顯示和界面就可以製作表單和界面，顯示問題可由美工或是程序員後期再來編寫相應的 CSS2.0樣式來解決。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 | inheritmargin<margin-width>{1,4} | inherit收藏查看我的收藏51有用+117CSS2編輯CSS2.0提供給我們了一個機制，讓程序員開發時可以不考慮顯示和界面就可以製作表單和界面，顯示問題可由美工或是程序員後期再來編寫相應的 CSS2.0樣式來解決。不過由於CSS2.0目前尚未見過很好的編輯軟件，所以無法做到所見即所得，編寫起來不易。目錄1CSS2簡介2CSS2單位▪相對長度單位▪絕對長度單位▪顏色單位▪角度單位▪時間單位▪頻率單位3CSS2標準屬性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樣式來定義表單界面的外觀。2CSS2單位編輯相對長度單位em ex px絕對長度單位pt pc in cm mm顏色單位rgb(R,G,B) #RRGGBB Color Name角度單位deg grad rad時間單位s ms頻率單位kHz Hz3CSS2標準屬性編輯屬性取值(本列及後列鏈接源為W3C）初值適用於（默認所有）繼承性百分比（默認N/A）媒體azimuth<angle> | [[ left-side | far-left |__ left | center-left | __center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inheritcenteryesauralbackground[background-color || background-image |__| background-repeat || background-attachment || background-position] | inheritXXnoallowed on 'background-position'visualbackground-attachmentscroll | fixed | inheritscrollnovisualbackground-color<color> | transparent | inherittransparentnovisualbackground-image<uri> | none | inheritnonenovisualbackground-position[ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit0% 0%block-level and replaced elementsnorefer to the size of the box itselfvisualbackground-repeatrepeat | repeat-x | repeat-y | no-repeat | inheritrepeatnovisualborder[ border-width || border-style || <color> ] | inheritsee individual propertiesnovisualborder-collapsecollapse | separate | inheritcollapse'table' and 'inline-table' elementsyesvisualborder-color<color>{1,4} | transparent | inheritsee individual propertiesnovisualborder-spacing<length> <length>? | inherit0'table' and 'inline-table' elementsyesvisualborder-style<border-style>{1,4} | inheritsee individual propertiesnovisualborder-top border-right border-bottom border-left[ border-top-width || border-style || <color> ] | inheritsee individual propertiesnovisualborder-top-color border-right-color border-bottom-color border-left-color<color> | inheritthe value of the 'color' propertynovisualborder-top-style border-right-style border-bottom-style border-left-style<border-style> | inheritnonenovisualborder-top-width border-right-width border-bottom-width border-left-width<border-width> | inheritmediumnovisualborder-width<border-width>{1,4} | inheritsee individual propertiesnovisualbottom<length> | <percentage> | auto | inheritautopositioned elementsnorefer to height of containing blockvisualcaption-sidetop | bottom | left | right | inherittop'table-caption' elementsyesvisualclearnone | left | right | both | inheritnoneblock-level elementsnovisualclip<shape> | auto | inheritautoblock-level and replaced elementsnovisualcolor<color> | inheritdepends on user agentyesvisualcontent[ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inheritempty string:before and :after pseudo-elementsnoallcounter-increment[ <identifier> <integer>? ]+ | none | inheritnonenoallcounter-reset[ <identifier> <integer>? ]+ | none | inheritnonenoallcue[ cue-before || cue-after ] | inheritXXnoauralcue-after<uri> | none | inheritnonenoauralcue-before<uri> | none | inheritnonenoauralcursor[ [<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 ] ] | inheritautoyesvisual, interactivedirectionltr | rtl | inheritltrall elements, but see proseyesvisualdisplayinline | 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 | inheritinlinenoallelevation<angle> | below | level | above | higher | lower | inheritlevelyesauralempty-cellsshow | hide | inheritshow'table-cell' elementsyesvisualfloatleft | right | none | inheritnoneall but positioned elements and generated contentnovisualfont[ [ 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'visualfont-family[[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inheritdepends on user agentyesvisualfont-size<absolute-size> | <relative-size> | <length> | <percentage> | inheritmediumyes, the computed value is inheritedrefer to parent element's font sizevisualfont-size-adjust<number> | none | inheritnoneyesvisualfont-stretchnormal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inheritnormalyesvisualfont-stylenormal | italic | oblique | inheritnormalyesvisualfont-variantnormal | small-caps | inheritnormalyesvisualfont-weightnormal | bold | bolder | lighter | 100 |、 200 | 300、 | 400 |、 500、 | 600 | 700 、| 800 | 900 | inheritnormalyesvisualheight<length> | <percentage> | auto | inheritautoall elements but non-replaced inline elements, table columns, and column groupsnosee prosevisualleft<length> | <percentage> | auto | inheritautopositioned elementsnorefer to width of containing blockvisualletter-spacingnormal | <length> | inheritnormalyesvisualline-heightnormal | <number> | <length> | <percentage> | inheritnormalyesrefer to the font size of the element itselfvisuallist-style[ list-style-type || list-style-position || list-style-image ] | inheritXXelements with 'display: list-item'yesvisuallist-style-image<uri> | none | inheritnoneelements with 'display: list-item'yesvisuallist-style-positioninside | outside | inheritoutsideelements with 'display: list-item'yesvisuallist-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'yesvisualmargin<margin-width>{1,4} | inheritXXnorefer to width of containing blockvisualmargin-top margin-right margin-bottom__ margin-left<margin-width> | inherit0norefer to width of containing blockvisualmarker-offset<length> | auto | inheritautoelements with 'display: marker'novisualmarks[ crop || cross ] | none | inheritnonepage contextN/Avisual, pagedmax-height<length> | <percentage> | none | inheritmax-width<length> | <percentage> | none | inheritCSS3語言開發是朝着模塊化發展的。以前的規範作為一個模塊實在是太龐大而且比較複雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。左邊這個佈局複雜的三欄網頁來説，如果使用CSS3Grid佈局的話，我們只需這樣寫：body{columns:3;column-gap:0.5in;}img{float:pagetopright;width:3gr;}border-color: <color>border-top-color: <color>/*給上邊框上色*/border-right-color: <color>/*給右邊框上色*/border-bottom-color:<color>/*給下邊框上色*/border-left-color: <color>/*給左框上色*/