雖然，它已經(jīng)有一段時(shí)間正式發(fā)布了。如果你還沒(méi)有閱讀關(guān)于HTML5的文章，長(zhǎng)沙網(wǎng)站建設(shè)強(qiáng)烈建議你這樣做，因?yàn)镃SS3可以更好地使用萬(wàn)維網(wǎng)聯(lián)盟的最新標(biāo)記語(yǔ)言。

CSS2早在1998年出現(xiàn)，從那時(shí)起互聯(lián)網(wǎng)上發(fā)生了很多事情。它的唯一修訂是在2011年制作的，CSS2.1，但業(yè)內(nèi)專(zhuān)家表示，CSS3應(yīng)該發(fā)布只是時(shí)間問(wèn)題，因?yàn)樗鼛?lái)的功能是完全必要的，并且在過(guò)去幾年中被遺漏了。

您的Designer Toolbox 

Unlimited下載：500,000多個(gè)Web模板，圖標(biāo)集，主題和設(shè)計(jì)資產(chǎn)

現(xiàn)在下載

許多人對(duì)CSS3不了解的是，它的開(kāi)發(fā)僅在提交其先前版本一年后開(kāi)始。所以W3C自1999年以來(lái)一直在研究這個(gè)改進(jìn)的版本，已經(jīng)有超過(guò)12年的時(shí)間，直到第一個(gè)CSS3穩(wěn)定版本發(fā)布。

雖然聽(tīng)起來(lái)CSS2和CSS3之間存在很大差異（這是非常正確的），但所有現(xiàn)代瀏覽器都很快采用了W3C系列的新增功能。所有主流瀏覽器都支持當(dāng)前可用的大多數(shù)CSS3功能。

您可能也喜歡：HTML5簡(jiǎn)介。

與HTML5一樣，聯(lián)盟仍然認(rèn)為CSS3處于持續(xù)開(kāi)發(fā)狀態(tài)，并且它不太可能獲得最終版本，原因與HTML5可能不同。隨著網(wǎng)絡(luò)需求和整個(gè)行業(yè)的變化如此之快，編碼需要以同樣的速度向前發(fā)展。

CSS3中的CSS3與CSS2的主要區(qū)別

也許CSS2和CSS3之間的最大區(qū)別在于模塊的分離。雖然在之前的版本中，所有內(nèi)容都是定義不同功能的大型單一規(guī)范，但CSS3分為幾個(gè)文檔，稱(chēng)為模塊。

每個(gè)模塊都具有新功能，而不會(huì)損害先前穩(wěn)定版本的兼容性。當(dāng)我們談?wù)撃K時(shí)，我們可以命名超過(guò)五十個(gè)。但是，其中四個(gè)已作為正式建議發(fā)布。該四大包含以下內(nèi)容：

媒體查詢(xún)（2012年發(fā)布）

命名空間（2011年發(fā)布）

選擇者等級(jí)3（2011年出版）

顏色（2011年出版）

該媒體查詢(xún)很可能是最重要的除了CSS。它的作用很簡(jiǎn)單：它允許將某些條件應(yīng)用于不同的樣式表，使網(wǎng)站流暢并適合各種屏幕尺寸。媒體查詢(xún)?cè)试S開(kāi)發(fā)人員定制到不同的分辨率，而無(wú)需更改或刪除內(nèi)容。

媒體查詢(xún)

使用媒體查詢(xún)構(gòu)建的響應(yīng)網(wǎng)格示例

媒體查詢(xún)非常容易，一旦你完成了設(shè)置就可以使用它們。讓我們看一下代碼行。

@media screen和（max-width：600px）{屏幕和（最大- 寬度：600px ）{   

    背景：#FFF;：#FFF; 

}}

通過(guò)在上面的媒體查詢(xún)中開(kāi)始設(shè)置樣式，您將僅為最大寬度為600像素的屏幕設(shè)置樣式。在上面的示例中，所有最大寬度為600像素的屏幕將顯示白色背景。

但是，max-width不是可以應(yīng)用于樣式表的唯一條件。您也可以使用max-device-width（這是屏幕分辨率，不同于最大寬度，即查看區(qū)域），您可以使用min而不是max，但您也可以組合兩個(gè)條件，例如下面的示例，這僅適用于觀看區(qū)域在600到900像素之間的屏幕。

@media screen和（min-width：600px）和（max-width：900px）{屏幕和（最小- 寬度：600px ）和（最大- 寬度：900px ）{      

    背景：#FFF;：#FFF; 

}}

CSS3為便攜式設(shè)備提供了一些預(yù)定義的樣式表，例如iPhone或iPad，您可以在下面看到：

<link href =“iphone4.css”rel =“stylesheet”media =“only screen and（-webkit-min-device-pixel-ratio：2）”type =“text / css”/>

<link href = “iphone4.css” rel = “stylesheet” media = “only screen and（-webkit-min-device-pixel-ratio：2）” type = “text / css” />     

和

<link href =“portrait.css”rel =“stylesheet”media =“all and（orientation：portrait）”/>

<link href = “portrait.css” rel = “stylesheet” media = “all and（orientation：portrait）” />    

<link href =“l(fā)andscape.css”rel =“stylesheet”media =“all and（orientation：landscape）”/>

<link href = “l(fā)andscape.css” rel = “stylesheet” media = “all and（orientation：landscape）” />    

如您所見(jiàn)，當(dāng)開(kāi)發(fā)人員需要使流體網(wǎng)格在不同屏幕尺寸的不同設(shè)備上工作時(shí)，媒體查詢(xún)可以非常方便。

CSS3的其他一些重要的設(shè)計(jì)考慮因素是，例如，邊框，現(xiàn)在可以在沒(méi)有黑客的情況下進(jìn)行圓整。CSS3實(shí)際上引入了更圓的邊框，這對(duì)設(shè)計(jì)人員和開(kāi)發(fā)人員來(lái)說(shuō)是一個(gè)巨大的幫助。

但是，許多這些功能在舊版本的Internet Explorer中不起作用，但這對(duì)我們來(lái)說(shuō)并不新鮮，我們之前已經(jīng)聽(tīng)過(guò)。您需要在樣式表中添加的唯一代碼（在特定類(lèi)中）類(lèi)似于：

-moz-border-radius：5px;moz - border - radius ：5px ; 

-webkit-border-radius：5px;- webkit - border - radius ：5px ; 

邊框：2px solid＃897048;：2px solid ＃897048; 

如您所見(jiàn)，它比以前容易得多。

漸變也可以在CSS3中使用，這是我們想要看一段時(shí)間的另一個(gè)很酷的補(bǔ)充，以及框/文本陰影和邊框圖像。

為了在沒(méi)有任何黑客的情況下向內(nèi)容添加文本陰影，CSS3只需要類(lèi)似于以下代碼行的內(nèi)容：

text-shadow：2px 2px 2px #ddccb5;

- shadow ：2px 2px 2px ＃ddccb5;    

創(chuàng)建內(nèi)容列比使用CSS3更容易，因?yàn)楝F(xiàn)在您可以隨時(shí)使用四行代碼。這些是：

列數(shù)

列寬

柱隙

列治

另一個(gè)節(jié)省時(shí)間的選擇是直接從CSS插入多個(gè)背景，而不是像以前那樣使用各種黑客。代碼很容易編寫(xiě)和記憶，我相信你會(huì)在某個(gè)時(shí)間點(diǎn)使用它。

.multiplebackgrounds {multiplebackgrounds {

身高：100px;：100px ; 

寬度：200px;：200px ; 

填充：20px;：20px ; 

background：url（top.gif）右上角不重復(fù)，：URL （頂部。GIF ）右上角沒(méi)有- 重復(fù)，

url（bottom.gif）左上方重復(fù)y，（底部。GIF ），左上重復(fù)- ? ，

url（middle.gif）bottom repeat-z;（中間。GIF ）底部重復(fù)- ? ;

}}

供應(yīng)商前綴

當(dāng)CSS3新發(fā)布時(shí)，供應(yīng)商前綴一直被使用，因?yàn)樗鼈儙椭鸀g覽器解釋代碼。有時(shí)你仍然需要在今天使用它們，以防你正在測(cè)試的瀏覽器沒(méi)有讀取代碼。以下是主要瀏覽器的所有供應(yīng)商前綴的簡(jiǎn)短列表：

-moz- ：Firefox

-webkit- ：Webkit瀏覽器，如Safari和Chrome

-o- ：歌劇

-ms- ： IE瀏覽器

請(qǐng)注意，根據(jù)幾周前的官方新聞稿，Opera也將很快在WebKit上構(gòu)建他們的新桌面和移動(dòng)瀏覽器，而不是他們當(dāng)前的Presto渲染引擎。這意味著-o-供應(yīng)商前綴將在某個(gè)時(shí)間點(diǎn)消失，只剩下三個(gè)主要前綴。