CSS為HTML標(biāo)記語(yǔ)言提供了一種樣式描述，定義了其中元素的顯示方式。由于CSS2的大量普及應(yīng)用，逐漸的從CSS2開(kāi)始大家就簡(jiǎn)稱為CSS。那么CSS3.0和CSS2.0有什么區(qū)別？本文狂人SEO為大家詳細(xì)介紹。

一、什么是CSS

CSS，英文全稱為“Cascading Style Sheets”，即“層疊樣式表”，是一種用于設(shè)置網(wǎng)頁(yè)樣式的標(biāo)記語(yǔ)言，它可以為網(wǎng)頁(yè)添加顏色、字體、背景、布局等外觀樣式。CSS 的設(shè)計(jì)是為了展示與內(nèi)容的分離，從而使網(wǎng)頁(yè)的結(jié)構(gòu)與呈現(xiàn)分離出來(lái)，使得網(wǎng)頁(yè)制作更加易于維護(hù)和升級(jí)。

在Web設(shè)計(jì)中，CSS一般應(yīng)用于HTML、XHTML以及XML等Markup語(yǔ)言。在網(wǎng)頁(yè)制作中，使用CSS可以實(shí)現(xiàn)以下功能：

1、網(wǎng)頁(yè)布局：利用CSS中的box模型（盒子模型）來(lái)進(jìn)行布局設(shè)置，可以實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)頁(yè)布局。
2、網(wǎng)頁(yè)樣式：CSS中定義的樣式包括文字樣式、背景樣式、列表樣式、表格樣式等，使得網(wǎng)頁(yè)更加美觀。
3、響應(yīng)式布局：CSS可以根據(jù)不同設(shè)備和屏幕尺寸，為網(wǎng)站設(shè)置不同的樣式，從而實(shí)現(xiàn)網(wǎng)頁(yè)響應(yīng)式布局。
4、動(dòng)態(tài)效果：CSS中支持多種動(dòng)態(tài)效果，如漸變、動(dòng)畫、過(guò)渡等，使得網(wǎng)頁(yè)更加生動(dòng)、藝術(shù)化。

二、CSS3.0和CSS2.0的區(qū)別

CSS2.0是一套全新的樣式表結(jié)構(gòu)，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一樣，CSS2.0推薦的是一套內(nèi)容和表現(xiàn)效果分離的方式，HTML元素可以通過(guò)CSS2.0的樣式控制顯示效果。
可完全不使用以往HTML中的table和td來(lái)定位表單的外觀和樣式，只需使用div和Li此類HTML標(biāo)簽來(lái)分割元素，之后即可通過(guò)CSS2.0樣式來(lái)定義表單界面的外觀。
CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展，以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來(lái)。
簡(jiǎn)單來(lái)說(shuō)CSS2有的屬性CSS3都有，但CSS3有的屬性CSS2不一定有。 CSS3是最新的版本，效果上CSS2是無(wú)法相比的，CSS3可以說(shuō)是CSS2的進(jìn)階，因?yàn)镃SS3是在CSS2的基礎(chǔ)上增加了一些新的屬性。
比如定義圓角、背景顏色漸變、背景圖片大小控制和定義多個(gè)背景圖片等很多，這個(gè)是CSS2上沒(méi)有的效果，現(xiàn)在新版本的瀏覽器基本都支持CSS3，比如IE9、FF4+、chrome11+，但是要用CSS3開(kāi)發(fā)網(wǎng)站的話，要考慮的是還在用低版本瀏覽器的用戶。

css3加強(qiáng)了css2的功能，增加了新的屬性和新的標(biāo)簽，并且刪除了一些冗余的標(biāo)簽，在布局方面減少了代碼量。以前比較復(fù)雜的布局現(xiàn)在一個(gè)屬性就搞定了（columns之類的屬性）。在效果方面加入了更多的效果(圓角之類的)，還有在盒子模型和列表模塊都進(jìn)行了改進(jìn)。不過(guò)CSS3兼容性不好，只有一些高級(jí)版本的瀏覽器支持。

三、CSS3.0新增的屬性

animation (and eight associated longhand properties)
background-clip
background-origin
background-size
border-radius (and four associated longhand properties)
border-image (and six associated longhand properties)
box-decoration-break
box-shadow
box-sizing
columns (and thirteen associated multi-column properties)
clear-after
flex (and eleven associated flexbox properties)
font-stretch
font-size-adjust
font-synthesis
font-kerning
font-variant-caps
hanging-punctuation
hyphens
icon
image-resolution
image-orientation
line-break
object-fit
object-position
opacity
outline-offset
overflow-wrap / word-wrap
backface-visibility
perspective
perspective-origin
pointer-events (for HTML)
resize
tab-size
text-align-last
text-decoration-line
text-decoration-skip
text-decoration-position
text-decoration-style
text-emphasis (and three associated properties)
text-justify
text-orientation
text-overflow
transform
transform-style
text-shadow
transition (and four associated longhand properties)
word-break
word-spacing
writing-mode

總的來(lái)說(shuō)，CSS3.0提供了更多的新特性和功能，可以更加精細(xì)和靈活地控制網(wǎng)頁(yè)樣式和布局，如圓角、陰影、偽類。但CSS3中90%以上CSS樣式單詞是CSS2的，只是在CSS上新增和重用小部分CSS單詞樣式。所以要學(xué)習(xí)CSS3必須的掌握CSS2常用樣式和語(yǔ)法、靈活應(yīng)用布局技巧，才能靈活使用CSS3樣式。

最新評(píng)論