CSS2和CSS3的區別

了解對CSS3的主要更改

CSS2和CSS3最大的不同之處在於CSS3被分成不同的部分,稱為模塊。 這些模塊中的每一個都在推薦過程的各個階段通過W3C。 這個過程使不同的製造商能夠在瀏覽器中接受並實現各種CSS3。

如果您將此過程與CSS2發生的情況進行比較,那麼所有內容都作為單個文檔提交,其中包含所有層疊樣式表信息,您將開始看到將建議分成更小,單獨的部分的優勢。 由於每個模塊都是單獨運行的,因此我們對CSS3模塊的瀏覽器支持範圍更廣。

就像任何新的和不斷變化的規範一樣,一定要盡可能在盡可能多的瀏覽器和操作系統中徹底測試CSS3頁面。 請記住,目標不是創建在每個瀏覽器中完全一樣的網頁,而是要確保您使用的任何樣式(包括CSS3樣式)在支持它們的瀏覽器中看起來都很棒,而且它們適合舊式瀏覽器不要。

新的CSS3選擇器

CSS3提供了一系列新的方法,您可以使用新的CSS選擇器來編寫CSS規則,以及一個新的組合器和一些新的偽元素。

三個新的屬性選擇器:

16個新的偽類:

一個新的組合器:

新的屬性

CSS3還引入了一些新的CSS屬性。 這些屬性中的很多都是為了創建視覺樣式,這些樣式可能會更多地與Photoshop等圖形程序相關聯。 自引入CSS3以來,其中一些像border-radius或box-shadow一樣。 其他人,比如flexbox甚至CSS Grid都是更新的樣式,這些樣式仍然被認為是CSS3的補充。

在CSS3中,框模型沒有改變。 但是有一些新的樣式屬性可以幫助您設計箱子的背景和邊框。

多個背景I法師

使用背景圖像,背景位置和背景重複樣式,您可以指定多個背景圖像在框中彼此重疊。 第一個圖像是最接近用戶的圖層,後面繪製了下圖。 如果存在背景色,則將其繪製在所有圖像層下。

新的背景樣式屬性

CSS3中還有一些新的背景屬性。

對現有背景樣式屬性的更改

現有的背景樣式屬性也有一些變化:

CSS3邊框屬性

在CSS3中,邊框可以是我們習慣的樣式(實體,雙層,虛線等),也可以是圖像。 另外,CSS3還可以創建圓角。 邊框圖像很有趣,因為您可以創建所有四個邊框的圖像,然後告訴CSS如何將該圖像應用到邊框。

新的邊框樣式屬性

CSS3中有一些新的邊框屬性:

與邊框和背景相關的其他CSS3屬性

當在分頁符處打開一個框時,換行分隔符(對於內聯元素),box-decoration-break屬性定義瞭如何使用邊框和填充來包裝新框。 使用此屬性可將背景分成多個破損的框。

還有一個box-shadow屬性,可以用來為box元素添加陰影。

使用CSS3,您現在可以輕鬆地設置具有多個列的網頁,而無需表格或複雜的div標籤結構。 您只需告訴瀏覽器body元素應該有多少列以及它們應該有多寬。 另外,您可以添加邊框(規則),跨越列高度的背景顏色,並且文本將自動流過所有列。

CSS3列 - 定義列的數量和寬度

有三個新屬性允許您定義列的數量和寬度:

CSS3欄目差距和規則

間隔和規則放置在同一多欄場景中的列之間。 差距會推開列,但規則不佔用任何空間。 如果列規則比間隙寬,則它將與相鄰列重疊。 列規則和差距有五個新屬性:

CSS3列中斷,跨越列和填充列

分欄符使用相同的CSS2選項來定義分頁內容中的分隔符,但有三個新屬性:分隔符,分隔符和分隔符。

與表格一樣,您可以將元素設置為使用column-span屬性跨越列。 這使您可以創建跨多列的標題,更像報紙。

填充列決定每列中將包含多少內容。 平衡列嘗試在每列中放入相同數量的內容,而自動只傳遞內容直到列滿,然後轉到下一個列。

CSS3中包含更多的功能,不包含在CSS2中

CSS3中有很多附加功能在CSS2中不存在,其中包括: