了解對CSS3的主要更改
CSS2和CSS3最大的不同之處在於CSS3被分成不同的部分,稱為模塊。 這些模塊中的每一個都在推薦過程的各個階段通過W3C。 這個過程使不同的製造商能夠在瀏覽器中接受並實現各種CSS3。
如果您將此過程與CSS2發生的情況進行比較,那麼所有內容都作為單個文檔提交,其中包含所有層疊樣式表信息,您將開始看到將建議分成更小,單獨的部分的優勢。 由於每個模塊都是單獨運行的,因此我們對CSS3模塊的瀏覽器支持範圍更廣。
就像任何新的和不斷變化的規範一樣,一定要盡可能在盡可能多的瀏覽器和操作系統中徹底測試CSS3頁面。 請記住,目標不是創建在每個瀏覽器中完全一樣的網頁,而是要確保您使用的任何樣式(包括CSS3樣式)在支持它們的瀏覽器中看起來都很棒,而且它們適合舊式瀏覽器不要。
新的CSS3選擇器
CSS3提供了一系列新的方法,您可以使用新的CSS選擇器來編寫CSS規則,以及一個新的組合器和一些新的偽元素。
三個新的屬性選擇器:
- 屬性開始匹配元素[foo ^ =“bar”]該元素有一個名為foo的屬性,以“bar”開頭,例如
- 屬性結尾完全匹配元素[foo $ =“bar”]元素有一個名為foo的屬性,以“bar”結尾,例如
- 屬性包含匹配元素[foo * =“bar”]該元素具有名為foo的屬性,其中包含字符串“bar”,例如
16個新的偽類:
- :根
- 文檔的根元素。 在HTML中,這總是。
- :第n個孩子(N)
- 使用它來匹配確切的子元素或使用變量來獲得交替匹配。
- :第n-最後一子(N)
- 匹配從最後一個開始計算的準確子元素。
- :第n-的型(n)
- 在文檔樹中匹配具有相同名稱的同級元素。
- :第n-最後的型(n)
- 將兄弟元素與底部的相同名稱進行匹配。
- :最後一個孩子
- 匹配父級的最後一個子元素。
- :第一型的
- 匹配該類型的第一個兄弟元素。
- :式中最後
- 匹配該類型的最後一個兄弟元素。
- :唯一的孩子
- 匹配它父項的唯一子元素。
- :只有-型
- 匹配它的唯一類型的元素。
- :空
- 匹配沒有子項的元素(包括文本節點)。
- :目標
- 匹配作為引用URI目標的元素。
- :啟用
- 匹配啟用時的元素。
- :禁用
- 禁用時匹配元素。
- :檢查
- 選中時匹配元素(單選按鈕或複選框)。
- :沒有(S)
- 當元素與簡單選擇符不匹配時匹配。
一個新的組合器:
- elementA〜elementB
- 元素B在元素A之後的某處跟隨匹配,不一定立即匹配。
新的屬性
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中不存在,其中包括:
- CSS模板佈局模塊和CSS3網格定位模塊 :使用CSS創建網格。
- CSS3文本模塊 :輪廓文本,甚至用CSS創建陰影。
- CSS3顏色模塊 :現在不透明。
- 對框模型的更改 :包括一個類似IE標記的選取框屬性。
- CSS3用戶界面模塊 :為您提供新的游標,對操作的響應,必填字段以及調整元素大小 。
- 媒體查詢 :在定義如何使用樣式表時,媒體查詢可以讓您更加靈活。 例如,您可以定義僅適用於視口大於20em的手持設備的樣式表。
- CSS3 Ruby模塊 :為使用文本ruby註釋文檔的語言提供支持。
- CSS3分頁式媒體模塊 :為分頁媒體(紙張,透明膠片等)提供更多支持。
- 生成的內容 :L運行頁眉和頁腳,腳註以及以編程方式生成的其他內容,尤其是分頁媒體。
- CSS3語音模塊 :改變聽覺CSS。