Loading AI tools
用于调整文档样式的标记语言 来自维基百科,自由的百科全书
階層式樣式表(英語:Cascading Style Sheets,縮寫:CSS;又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表)是一種用來為結構化文件(如HTML文件或XML應用)添加樣式(字型、間距和顏色等)的電腦語言,由W3C定義和維護。CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中。
此條目需要補充更多來源。 (2013年1月22日) |
CSS不僅可以靜態地修飾網頁,還可以配合各種手稿語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支援幾乎所有的字型字號樣式,擁有對網頁對象和模型樣式編輯的能力。
CSS不能單獨使用,必須與HTML或XML一起協同工作,為HTML或XML起裝飾作用。本文主要介紹用於裝飾HTML網頁的CSS技術。其中HTML負責確定網頁中有哪些內容,CSS確定以何種外觀(大小、粗細、顏色、對齊和位置)展現這些元素。CSS可以用於設定頁面佈局、設定頁面元素樣式、設定適用於所有網頁的全域樣式。CSS可以零散地直接添加在要應用樣式的網頁元素上,也可以集中化內建於網頁、連結式引入網頁以及匯入式引入網頁。[1]
CSS最重要的目標是將檔案的內容與它的顯示分隔開來。在CSS出現前,幾乎所有的HTML檔案內都包含檔案顯示的資訊,比如字型的顏色、背景應該是怎樣的、如何排列、邊緣、連線等等都必須一一在HTML檔案內列出,有時重複列出。CSS使作者可以將這些資訊中的大部分隔離出來,簡化HTML檔案,這些資訊被放在一個輔助的,用CSS語言寫的檔案中。HTML檔案中只包含結構和內容的資訊,CSS檔案中只包含樣式的資訊。
比如HTML中h2
標誌這一個二級標題,它在級別上比一級標題h1
低,比三級標題h3
高。這些資訊都是結構上的資訊。
一般來說級別越高的標題其字型也越大,h1
的字型最大,因為一般來說字型越大它表示的內容就越重要,此外一般標題都使用粗體字,來突出它們的重要性。一般來說h2
使用粗體字,其字型比h3
大,比h1
小。這些資訊是顯示用的資訊。
在CSS出現前,假如作者要確定h2
標題的顏色、字形、大小或其他顯示特徵的話,他要使用HTML中的font
或其他樣式指令,光h2
不夠,因為h2
只是一個結構指令。假如一個標題要用斜體字、紅色的字元、白色的底色的話,作者要這樣寫:
<h2><font color="red" bgcolor="white"><i>使用CSS</i></font></h2>
這些顯示用的指令使得一個HTML變得非常複雜,要維護也比較困難。假如所有的二級標題都要這樣來顯示的話,所有的二級標題的指令都要這麼複雜。此外讀者無法改變這些規定,假如一個讀者更喜歡藍色的標題的話,他無法改變標題的顏色,因為檔案的作者特別規定了標題的顏色。
使用CSS的話h2
指令只規定文章的結構,其顯示由樣式表來規定,上面的例子可以變成這樣:
<h2>使用CSS</h2>
服從的樣式表可以規定h2
指令使用斜體字,紅色字和白色背景:
h2 { color: red; background: white; font-style: italic; }
這樣顯示與內容就分開了(由於CSS的優點,W3C現在正在考慮將HTML中的許多顯示用的指令廢棄掉)。HTML只表達文章的結構,CSS表達所有的顯示。CSS可以指示顏色、字形、排列、大小以及其他許多非視覺的表達方式,比如將一篇檔案的內容讀出來。
CSS樣式資訊可以包含在一個附件中或包含在HTML檔案內。讀者可以使用多個樣式表,在重複的情況下他可以選擇其中之一。不同的媒介可以使用不同的樣式表。比如一個檔案在熒光屏上的顯示可以與在印表機中列印出來的顯示不同。這樣作者可以為不同的媒體設計最佳的顯示方式。此外CSS的目標之一是讓讀者有更大的控制顯示的自由。假如一個讀者覺得斜體字的標題讀起來很困難,他可以使用自己的樣式表檔案,這個樣式表可以「層疊」使用,他可以只改變紅色斜體字這個樣式而保留所有其他的樣式。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<style type="text/css">
body{
background:#fff;
color:#777;
}
h1{
font-weight:bold;
font-style:italic;
font-family:sans-serif;
color:green;
}
</style>
</head>
<body>
<h1>這個句子用綠色、粗體和斜體字顯示</h1>
<p>普通字。</p>
<h1 style="color:red; background:green;">
這個句子用大的、紅色斜體字在綠色背景上顯示,通用的h1樣式在這裡被取代了。
</h1>
<h1 style="color: green;"><strong><em>這個句子用綠色、粗體和斜體字顯示</em></strong></h1>
</body>
</html>
CSS由多組「規則」組成。每個規則由「選擇器」(selector)、「屬性」(property)和「值」(value)組成:
,
隔開。屬性和值之間用半形冒號:
隔開,屬性和值合稱為「特性」。多個特性間用;
隔開,最後用大括號{ }
括起來。
要針對沒有標籤定義範圍進行樣式設置時,可利用<div>
與<span>
標籤
CSS裏現在共有5種基本選擇器(Basic Selectors)[2]和2種偽選擇器。不同選擇器的優先級別和運作效能往往存在差異。[3]
elementname
.elementname
#elementname
* ns|* *|*
[attribute]
屬性選擇器允許用戶自訂屬性名稱,而不僅僅限於id,class屬性。屬性選擇器共有7種[4][5]。
代碼 | 說明 |
---|---|
[attribute]
|
元素有attribute 的屬性。
|
[attribute="value"]
|
屬性attribute 裏是value
|
[attribute~="value"]
|
屬性attribute 裏使用空白分開的字串裏其中一個是value
|
[attribute|="value"]
|
屬性attribute 裏是value 或者以value- 開頭的字串
|
[attribute^="value"]
|
屬性attribute 裏最前的是value
|
[attribute$="value"]
|
屬性attribute 裏最後的是value
|
[attribute*="value"]
|
屬性attribute 裏有value 出現過至少一次
|
CSS里現在共有4種組合選擇符(Combinators):[2]
符號 | 說明 |
---|---|
A > B |
子代選擇器,選擇A下一層的元素B |
A ~ B |
兄弟選擇器,選擇與A同層的元素B |
A + B |
相鄰兄弟選擇器,選擇與A相鄰的元素B(不能被任何元素相隔) |
A B |
後代選擇器,包含選擇符 |
例子:
p{
font-size: 110%;
font-family: garamond, sans-serif;
}
h2{
color: red;
background: white;
}
.highlight{
color: red;
background: yellow;
font-weight: bold;
}
在這個例子中有三個選擇器:p
、h2
和.highlight
,color: red
是一個定義,其中color
是屬性,red
是color
的值。
在這裏HTML中的結構P
(段落)和H2
(2級標題)獲得了不同的樣式。每個段落的字體的大小比包含這個段落的結構的字體的大小要大10%,其字形是Garamond
,假如Garamond
沒有的話那麼使用一般的sans-serif
字形。2級標題的字用紅色,底面是白色的。這個例子中的第三個規則規定了一個class
的樣式。通過class
屬性每個HTML結構都可以被指定為這個class
,例如:
<P class="highlight">這個段落將被顯示為黃底紅字粗體。</P>
顯示為
這個段落將被顯示為黃底紅字粗體。
除使用<style>
之外,也可於HTML內直接使用style="/*CSS在這裡*/"
︰
<p style="color:red; background:yellow; font-weight:bold;">
這個段落同樣會被顯示為黃底紅字粗體。
</p>
CSS中還提供了偽元素選擇器和虛擬類別選擇器,但用途單一一些,常與其它選擇器組合在一起使用。偽元素的元素主要用於選取與另一個選擇器選中對象臨近的元素。虛擬類別選擇器用於選中處於特定狀態或具有特定性質的元素。
CSS可以有多種引入方式,一個網頁可以引入多個CSS檔案,同一種CSS規則可以被反覆多次添加。這使得CSS的使用方式非常靈活,但也會頻繁地出現規則衝突。同時對一個網頁元素設定無法並存的2種樣式時,就會引起衝突。CSS的特色之一就是其解決規則衝突的方案。CSS的規則衝突可以分為不同來源之間的規則衝突和同一來源內部的規則衝突。CSS分層次、立體化的比較不同規則的優先級的方式,就是所謂層疊性(cascading)的體現。
首先說來源的多樣性,CSS資訊可以來自:
!important
提升自訂規則的顯示優先權。(網頁作者也可以使用!important
給規則提升權限,但是優先級別比不過由用戶寫的!important
聲明,!important
對於網頁作者的意義僅在於網頁開發階段的規則衝突測試)其次還需知道規則特殊性(specificity)的概念。某個規則的特殊性也常被稱為該規則的具體程度。規則特殊性的高低次序如下(依次遞減):
特殊性優先原則是最重要的優先級比較規則。當引起衝突的2種規則的特殊性存在差異時(例如一個是通過ID選擇器指定樣式,另一個是通過class選擇器指定樣式),引擎將優先採用特殊性更高的樣式。規則的特殊性的比較是最優先的。如果能直接判斷出特殊性的差異,就無需考慮其它規則了。
不同來源的規則之間的優先原則是第二重要的。當規則來源相同時(同為外部樣式或同為內部樣式),下一步就需要比較不同類型來源的優先級別。總地來說,記住「行內樣式優先於內部樣式,內部樣式又優先於外部樣式」即可應對多數常見的情形。像網頁瀏覽者自訂樣式表的優先級別如何,只有瀏覽器的設計者才需要考慮,與網頁設計者的關係不大。
如果考慮有可能出現的更複雜的來源衝突,內容就比較多了。但一般在寫樣式時,應儘可能避免這些複雜情形的出現。具體來說,一般情形下的採納樣式效果的優先級順序為:[6]
<link>
標籤直接引入的外部樣式表@import
陳述式間接引入的外部樣式表CSS中還有用!important
修飾的重要性聲明。如果計入重要性聲明,那麼在以上規則的最前面還需要加上2條規則:
設計重要性聲明是為部分特殊用戶和所有開發者提供方便。一方面,用戶可以通過設置自己的色彩方案,並對其使用重要性聲明來提升瀏覽體驗。另一方面,網頁的設計者難免會遇到因規則衝突而導致特定樣式規則失效的情形,設計者可以通過給不知何故不起作用的規則增加重要性聲明,看看是否有樣式變化來確定是否是不小心導致了規則衝突而引起特定規則被覆蓋失效。
有時還會遇到選擇器優先級無法直接判斷,而且規則的來源也相同的情形。如果網頁設計者很少使用層次比較複雜的選擇器(比如多級的後代選擇器),那麼必須比較權重的情況一般不會遇到(一般要麼是可以直接根據前面的規則判斷出優先性結果,或者是起衝突的2條規則的權重完全一樣,只能繼續去看後一條比較出現次序的機制)。此時,CSS還有一套分數加權(或者說是分數累積)的機制用於解決此類規則衝突。先列出基本的分值:
組合使用多個基本選擇器時,不同選擇器的得分會累加到一起。最終得分高的選擇器,其指定的樣式會勝出。
舉例:
.type1 #id3{color: green; font-size: 20px;}
div p #id3{color: blue; background-color: grey;}
假設這2行代碼都能夠選中同一個ID為「id3」的元素,且都是出自同一來源的樣式表。可以看到,二者使用的優先級最高的選擇器都是ID選擇器,起衝突的樣式設置是字型顏色。一個給此元素設置字型顏色為綠色,另一個給此元素設置字型顏色為藍色。按照評分規則,因為前一種代碼使用了1個類選擇器和1個id選擇器,所以得分為10+100=110分;後一種代碼使用了2個標籤選擇器和1個id選擇器,所以得分為1+1+100=102分。因為110分>102分,所以前一種規則勝出,目標元素的最終文字顏色應該是綠色。
當權重比較仍然不能分出優先級勝負時,最後就是把守關底的「靠後優先」的原則了,也就是後定義的樣式優先級較高。如果起衝突的規則來源相同,而且得分也相同,那麼最後的衝突解決法則就是看CSS代碼出現的先後順序。後出現的規則會覆蓋掉與之優先級相當的先出現的規則。也可稱作「後發制人」、「後來者居上」或「後浪推前浪」原則,隨便你怎麼稱呼。這種原則的適用情形很常見,所以此規則也很重要。
![]() | 此章節需要擴充。 (2018年4月21日) |
![]() | 此章節需要擴充。 (2018年4月21日) |
![]() | 此章節需要擴充。 (2018年4月21日) |
包含塊是CSS定位屬性所依託的理論模型。
層疊上下文規則決定了當有網頁元素位置發生部分重合時,重合部分的上下疊放次序。層疊上下文規則詳細規定了當浮動、定位以及z軸數值同時出現時,元素疊放次序的總規則。
格式化上下文有特殊的佈局性質,巧妙建立格式化上下文可以解決方便地達到幾種特殊目的:[7]
CSS檔內也可以包含註釋,註釋放在/*
和*/
之間。一般的瀏覽器也辨識以雙斜槓(//
)開頭的這種註釋,但是這是不規範的做法。
HTML規範雖然規定了網頁中的標題、段落應該使用的標籤,但是沒有涉及這些內容應該以何種樣式(比如大小、位置、間距、縮排等屬性)呈現在瀏覽器中。從1990年代初HTML被發明開始,樣式表就以各種形式出現了。不同的瀏覽器結合了它們各自的樣式語言,讀者(也就是瀏覽網頁的用戶)可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的,最初的HTML版本只含有很少的顯示屬性,讀者來決定網頁應該怎樣被顯示。
1993年,Robert Raisch提出了一種名為「RRP」的樣式規則建議。但這個RRP只允許網頁使用1個樣式表,不像現在的CSS能支援同時載入多個。不久後出現的Mosaic瀏覽器就採用增加新種類的HTML標籤實現樣式的表達,以滿足設計師的要求,這也與現在的CSS設計原則不符。隨着HTML內建的樣式功能的增加,外來定義樣式的語言逐漸減弱了。1993年發佈的這個Mosaic瀏覽器是第一款用戶介面,並支援書籤、圖示按鈕和圖片顯示。[8]之前的瀏覽器都是純文字瀏覽器。即使在今天,只使用作業系統命令列內建的Telnet命令,也可以檢視網頁的原始碼。[9]
後來,台灣人魏培源開發的ViolaWWW瀏覽器使用了一種規則具有層次巢狀性的樣式表,並第1個支援通過<link>
標籤參照外部樣式表。FOSI最早支援以相對尺寸值來表示字型大小。函數式風格的DSSSL語言支援在樣式表中進行定義變數、繼承變數、定義函數等功能,但是語法複雜。1994年,萬維網之父添·柏納斯-李在歐美眾多高能物理研究者和技術人員的支援下,於美國麻省理工學院創立了萬維網聯盟(W3C),其職責是提供網絡標準化建議。[10]1994年,Håkon W Lie提出層疊HTML樣式表(Cascading HTML Style Sheets,CHSS)。CHSS既支援用戶自訂樣式表,也支援網頁作者樣式表,而且可以滿足不同規則以百分比的方式組合使用。它的權重規則計算方式不夠直觀,當不同規則混合時會得到什麼實際效果並不容易從代碼中看出。1996年,出現了與CSS語法很像的表現指明語言(Presentation Specification Language,簡稱"PSL 96")。PSL 96除表達樣式外,也支援條件判斷等功能,還可根據對瀏覽器資訊的判斷來使用不同的樣式,但未獲得青睞。
1994年,哈肯·維姆·萊提出了CSS的最初建議[11]。伯特·波斯當時正在設計一個叫做Argo的瀏覽器,他們決定一起合作設計CSS。當時已經有過一些樣式表語言的建議了,但CSS是第一個含有「層疊」的主意的。在CSS中,一個檔案的樣式可以從其他的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式,在其他地方則繼承,或「層疊」作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計,混合各人的愛好。哈肯·萊於1994年在芝加哥的一次會議上第一次展示了CSS的建議,1995年他與波斯一起再次展示這個建議。當時W3C剛剛建立,W3C對CSS的發展很感興趣,它為此組織了一次討論會。哈肯、波斯和其他一些人(比如微軟的托馬斯·里爾登)是這個專案的主要技術負責人。1996年底,CSS已經完成。1996年12月[來源請求],哈肯·萊與伯特·波斯發佈了CSS規範的第1個版本。這也成了哈肯·萊的博士論文的一部分。當時已有的主流瀏覽器的內核架構完全不適合解析CSS的語法,加上早年設計師濫用HTML標籤來表達樣式(這導致「標籤湯」(tagsoup)這一罵名的出現)、且漠不關心代碼校驗[12],所以CSS等到幾年之後才流行起來。1998年,瀏覽器市場份額被微軟公司的Internet Explorer 4和網景公司的Netscape Navigator 4兩大瀏覽器巨頭所佔據。[10]CSS出現後,微軟的IE瀏覽器走在了逐步實現CSS第1版標準的前列。但是因為不重視問題修補,導致遺留Bug很多,這也使得IE瀏覽器長期為人們詬病。網景則把重心放在了網頁尾本語言的開發上,但很快被微軟模仿。網景在90年代末和微軟展開的瀏覽器大戰中最終一敗塗地,走向破產邊緣,但網景也成功推出了日後廣泛流行於網頁設計中的JavaScript語言。瀏覽器大戰使得網頁設計人員深受其害,因為不同瀏覽器支援的語法規則不太一樣,網頁設計人員不得不為IE瀏覽器和網景瀏覽器的瀏覽器分別設計一套網頁。[10]新成立的民間設計人員團體「網頁標準計劃」(WaSP)發動水軍將W3C的建議宣揚為標準,並批評還未加盟W3C標準的業界廠商。[10]
1997年初,W3C組織了專門管CSS的工作群組,其負責人是克里斯·里雷。這個工作群組開始討論第1版中沒有涉及到的問題,其結果是1998年5月出版的第2版規則。網頁標準計劃的7位成員成立了「CSS武士團」(CSS Samurai),指出Opera瀏覽器和IE瀏覽器在支援CSS方面存在的諸多問題。Opera公司着手解決了問題,但微軟並未解決。網頁標準計劃也積極勸說網景公司和Macromedia公司分別改進其產品對CSS標準的支援。2003年,Dave Shea推出了一個名為「CSS禪意花園」("CSS Zen Garden")的站點,向人們展示出僅通過應用不同頁面樣式規則,就可以實現對網頁藝術風格的煥然一新。這個網站在網頁設計相關人群中產生了不小影響。[10]
從2006年到2009年,「DIV+CSS」佈局逐步取代缺乏靈活性的傳統表格佈局,無表格網頁設計成為網頁內容佈局的主流方案。此時也出現了一些為了跟風而濫用DIV佈局的情況,比如將<h1>
和<h2>
等本身已有語意的標籤也改用<div>
標籤替代。[13]
CSS3引入的簡單動畫功能使得CSS也開始涉足以往只應由JavaScript負責的效果互動工作。到2017年為止,第3版規則還未完備。
於1994年,哈肯·維姆·萊和伯特·波斯合作設計CSS。他們在1994年首次在芝加哥的一次會議上第一次展示了CSS的建議。
1998年[12]5月W3C發表了CSS2[15],其中包括新的內容如:
CSS2.1修改了CSS2中的一些錯誤,刪除了其中基本不被支援的內容和增加了一些已有的瀏覽器的擴充內容。[16]
CSS3標準已部分公佈,但仍未全部制訂完畢,還會有其它新內容繼續加入。W3C網站上有專頁展示CSS3發展的進展[17]。
CSS3分成了不同類別,稱為「modules」。而每一個「modules」都有於CSS2中額外增加的功能,以及向下相容。CSS3早於1999年已經開始制訂。[18]直到2011年6月7日,CSS 3 Color Module終於發佈為W3C Recommendation。[19]
CSS3裏增加了不少功能,如:「border-radius」、「text-shadow」、「transform」以及「transition」。CSS3亦支援動畫(animation)及立體(preserved-3d)。
部分屬性(例如旋轉類屬性(如:transform),動畫類屬性,立體類屬性),由於現時不同瀏覽器支援程度不同,需要加上不同的瀏覽器前綴來區分。
W3C於2011年9月29日開始了設計CSS4[20][21]。直至現時只有極少數的功能被部分網頁瀏覽器支援,如使用在HTML而非SVG上的pointer-events[22]。
CSS4增加了一些更方便的選擇器,並簡化了一些現有選擇器的用法。
瀏覽器內核主要負責解析網頁內容樣式以及進行指令碼處理(現在分別由瀏覽器內部的頁面彩現引擎和JavaScript引擎分工)。其中頁面彩現就是正確辨識出CSS代碼並在窗口中顯示出對應的內容樣式。開發一個可支援CSS語法解析的瀏覽器並非易事,CSS規則繁雜,尤其是需要考慮不同的CSS規則之間會存在相互影響的問題。自從Mozilla基金會將Gecko排版引擎單獨發佈後,現在有眾多瀏覽器廠商採用由第三方發佈的頁面彩現引擎,獨立開發新頁面彩現引擎的機構很少。
首先是標準實現程度的問題。儘管CSS1標準在1996年就制訂完成了,但一直到3年後還沒有一個瀏覽器實現了其中的全部語法規則。上市的各個瀏覽器都只是實現了對一部分規則的支援。2000年3月,由微軟在麥金塔電腦平台上發佈的5.0版Internet Explorer (IE)是第1個全部實現CSS1的瀏覽器。此後許多其他瀏覽器也實現了CSS1和CSS2的一部分。但到2004年為止還沒有一個瀏覽器實現了全部CSS2規則。尤其aural和paged等特性是被支援得最差的。
其次,支援某種特性,不代表用起來就沒有問題。舊IE版本就以Bug多而聞名。其中聲名狼藉的IE 6存在元素堆疊Bug、幽靈字元,方塊神秘消失等稀奇古怪的設計缺陷。[23]微軟自從在第1輪瀏覽器大戰中勝出後,就依仗獨霸市場的優勢,輕視修補IE Bug的呼聲,導致其市場份額後來又逐漸被其它瀏覽器蠶食,產生第2輪瀏覽器大戰。
另外還有代碼跨瀏覽器相容性的問題。「能夠在任何瀏覽器中顯示」並不意味着「在任何一個瀏覽器中顯示的效果相同」。[12]即使是徹底實現了CSS1的瀏覽器也遇到了許多困難。許多CSS的實現機制互相矛盾、有錯或有其它稀奇古怪的地方。為了使他們的頁面在任意系統上的任意瀏覽器中的顯示效果一致,網頁作者往往要被迫寫出繁瑣的代碼或使用各種奇技淫巧。一個最著名的錯誤涉及到顯示方形的寬度,在IE瀏覽器中方形的寬度的顯示有錯誤,其結果是方形的寬度在許多瀏覽器中被正確地顯示,但在IE上方形的寬度太窄。雖然這個錯誤有解決的辦法,但它限制了其他一些功能(IE 8.0已經改善方形寬度顯示問題)。舊版IE還有與其它瀏覽器計算方式不一樣的方盒模型。
網頁的讀者和作者都可以使用CSS來決定檔案的顏色、字型、排版等顯示特性。CSS最主要的目的是將檔案的內容與顯示分隔開來。這有許多好處:
另外,在HTML中:
CSS還可以控制其他參數,例如聲音(假如瀏覽器有閱讀功能的話)或給視障者用的感受裝置。
CSS明顯的缺點包括:
width
,height
,和float
[24]。許多CSS編寫人員為了儘可能在常用的各個瀏覽器中達到一致的版面編排,要寫很多針對各個瀏覽器的不同的CSS代碼。當版面編排很複雜時,要在各個瀏覽器裏取得相同效果是不可能的。margin-left: 10% - 3em + 4px;
)。計算功能在很多情況下都是非常有用的,例如:總欄位中計算欄位的尺寸限制。無論如何,CSS WG[27]發表了CSS局限性的草案。IE 5至IE 7提供expression()
函數(即所謂的CSS表達式)來執行計算功能,例如left: expression(document.body.offsetWidth - 110 + "px");
。為了與CSS標準看齊,並且該函數效能差,微軟從IE 8開始停止支援此函數。calc()
表達式以執行計算功能[28][29]。p {
margin: calc (1rem - 2px) calc (1rem - 1px)
}
position
、display
與float
定義了不同的組態方式,而且不能有效的交替使用。一個display: table-cell
元素不能指定float
或是position: relative
,因為指定float: left
的元素不應該受到display
效果的影響。再者,沒有考慮到新建立屬性所造成的影響,例如在表格中你應該使用border-spacing
而不是margin-*
來指定表格元素。這是因為依照CSS準則,表格內部元素是沒有邊界(margin)的。使用CSS縮寫可以減少CSS檔案的大小,並使其更為易讀[30]。例如:顏色縮寫(縮寫16進制的色彩值)、盒尺寸縮寫、邊框縮寫、背景縮寫和文字縮寫。
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.