各種常用 CSS語法 速查表
-
章節目錄
-
語法慣例
語法 說明 X | Y只允許 X、Y 其中一個值。 X || Y表示能夠使用 X、Y 或 同時使用兩個值，不限順序。(X、Y、XY、YX)。 X && YX、Y都必須出現，不限順序。(XY、YX)。 [...]數組。 修飾子 說明 星號 (*)可以重複出現 0次以上。 加號 (+)可以重複出現 1次以上。 井字號 (#)可以重複出現 1次以上，並用逗號分隔。 問號 (?)選填數值。 驚嘆號 (!)必要值，至少出現 1次。 花括號 ({M, N})必須重複出現 M ~ N 次。 -
CSS與文件
階層式樣式表 (Cascading Style Sheet，CSS)。
-
元素
「元素」(Element) 是文件結構的基礎。
-
置換與非置換元素
-
置換元素
元素的內容(Content) 會被置換成某些文章內容外的東西的元素，- e.g.
<img>元素的內容會被文件外部的影像檔案取代。<img src="howdy.gif">
- e.g.
<input>也是置換元素，置換後的內容依據型別的不同可以是選擇鈕(radio button)、複選框(checkbox)或文件輸入框(text input box)。
- e.g.
-
非置換元素
表示使用者代理(user agent，通常是指瀏覽器)會直接以元素本身產生元素的內容，呈現在某個方框(box)當中。
-
-
元素顯示角色
-
區塊級元素
會產生一個(預設會)填滿父元素內容區塊且無法與其他元素並排的元素方框(element box)，
會在元素方框的前後產生「斷行」(break)，置換元素通常都不是區塊級元素。- e.g.
<p>、<div>
- e.g.
-
行內級元素
會在文字所在文字行產生元素方框，不會破壞該行的流向(flow)，
在HTML中，區塊級元素不能放置在行內級元素之內，CSS則沒有限制不同顯示角色間的關係。- e.g.
<p style="display: inline;"><em style="display: block;">an inline element</em></p>
- e.g.
-
-
-
連結CSS與HTML
-
link 標記
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all">
CSS透過link標記將樣式表(stylesheet)連結到文件，稱為「外部樣式表」。
link標記必須直接放在head元素內，瀏覽器會找尋並載入樣式表，使用其中定義的樣式呈現HTML文件。-
屬性 (attribute)
rel，表示「關係」(relation)，e.g. stylesheet。type屬性，表示使用link標記載入的資料類型，e.g. text/css。能夠讓瀏覽器知道樣式表是CSS樣式表，也決定了瀏覽器對載入的資料的處理方式。href屬性，是樣式表的URL。media屬性，是一個以上的媒體描述子 (media descriptor)，代表了特定的媒體類型以及該媒體的特性，媒體描述子之間以逗號區隔。e.g. 可以指定針對螢幕(screen)與投影機(projection)媒體使用的樣式表。<link rel="stylesheet" type="text/css" href="visual-sheet.css" media="screen, projection">
-
替代樣式表 (alternate stylesheet)
將rel屬性設為
alternate stylesheet，
如此一來，就只有在使用者選擇採用時，才會使用替代樣式表的樣式。
在瀏覽器具有替代樣式表功能時，使用link元素的title屬性值，產生替代樣式表的列表。<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default">
<link rel="alternate stylesheet" type="text/css" href="bigtext.css" title="Big Text">
<link rel="alternate stylesheet" type="text/css" href="zany.css" title="Crazy colors!">使用者可以選擇自己想用的樣式，瀏覽器就會從原先標記為「Default」的樣式表，
切換到使用者選擇的樣式表(實際上是CSS復興早期採用的做法)。在2016年末期，Firefox等大多數以Gecko為基礎的瀏覽器及Opera都提供了替代樣式表的功能，Webkit家族則完全不支援替代樣式表。
也可以將幾個替代樣式表設為
相同的title值，多個替代樣式表視為一組，
讓使用者針對螢幕與列印選擇不同的呈現方式。<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" media="screen">
<link rel="stylesheet" type="text/css" href="print-sheet1.css" title="Default" media="print">
<link rel="alternate stylesheet" type="text/css" href="bigtext.css" title="Big Text" media="screen">
<link rel="alternate stylesheet" type="text/css" href="print-bigtext.css" title="Big Text" media="print">如果使用者從替代樣式表選單中選取「Big Text」，
那麼在螢幕(screen)媒體會使用bigtext.css，
print-bigtext.css則會用於印刷(print)媒體，
sheet1.css與print-sheet1.css則不會用在任何媒體。如果rel值是
stylesheet的link元素指定了title屬性，
就會將該樣式表指定為「優先樣式表」(preferred stylesheet)，
表示該樣式表比替代樣式表有更高的優先權。
如果同時指定多個優先樣式表，只會採用其中一個樣式表，忽略其他的樣式表。
這種情況沒有辦法判斷會採用哪一種樣式表。<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default Layout">
<link rel="stylesheet" type="text/css" href="sheet2.css" title="Default Text Sizes">
<link rel="stylesheet" type="text/css" href="sheet3.css" title="Default Colors">沒有指定title屬性的樣式表則稱為「永續樣式表」(persistent stylesheet)，
必定會在顯示文件時使用。
-
-
style 元素
type屬性是
"text/css"。
用<style type="text/css">開頭，</style>標記結尾，style元素也可以搭配media屬性。
稱為『內嵌樣式表』，直接內嵌在文件當中。 -
@import 指令
與
link類似的@import指令：@import url(sheet2.css);
@import和link同樣用來指示瀏覽器載入外部樣式表，
主要差異在於語法與命令出現的位置。
@import出現在 style 內，必須放在其他CSS規則之前。<style type="text/css">
@import url(styles.css); /* @import 最先出現 */
h1 {color: gray;}
</style>每個
@import指令指向的樣式表都會被載入使用，
使用@import時無法標示是否為替代樣式表。@import url(sheet2.css);
@import url(blueworld.css);
@import url(zany.css);與
link一樣是能夠透過媒體描述子限定樣式表適用的媒體類型：@import url(sheet2.css) all;
@import url(blueworld.css) screen;
@import url(zany.css) projection, print;可以如以下的方式，在樣式表中包含其他的外部樣式表：
@import url(http://example.org/library/layout.css);
@import url(basic-text.css);
@import url(printer.css) print;
body {color: red;}
h1 {color: blue;}CSS要求
@import指令必須要出現在樣式表的其他規則之前，
會忽略所有出現在樣式規則 (例如body {color: red;}) 之後的@import指令。舊版的
Internet Explorer for Windows不會忽略任何@import指令，
會載入出現在其他規則之後的@import指令。 -
HTTP 連結
建立 CSS 與文件的連結還有其他幾種較不為人知的方式：透過 HTTP 標頭 (HTTP header) 也可以連結兩者。
在 Apache 伺服器上可以在
.htaccess檔案中加入 CSS 檔案的連結，達成這樣的效果，
例如：Header add Link "</ui/testing.css>;rel=stylesheet;type=text/css"
這會讓支援這個功能的瀏覽器將參考到的樣式表連結到經由
.htaccess控管而提供的文件，
瀏覽器會將樣式表視同連結樣式表，另一種也許更有效率的作法是在伺服器的httpd.conf檔案中加入：<Directory /path/to/ /public/html/directory>
Header add Link "</ui/testing.css>;rel=stylesheet;type=text/css"
</Directory>唯一的差別是宣告連結關係的位置。
-
行內樣式
<p style="color: gray; background: yellow;">The most wonderful of all breakfast foods ...</p>
除了那些出現在
body外部的標記 (如head或title等) 之外，
幾乎所有的HTML標記都能夠使用 style屬性。style屬性裡不能使用
@import指令，只有能夠出現在樣式規則大括號中的部分，才能夠作為 style 的屬性值。一般不建議使用
inline style，一旦把樣式放到 inline，就失去許多 CSS 的優點：集中管理、一致的定義。
-
-
樣式表內容
-
標記
樣式表裡不能出現任何標記，
因為歷史因素，HTML註解標記是唯一一個能夠出現在 style元素內的標記。<style type="text/css">
<!--
h1 {color: naroon;}
body {background: yellow;}
-->
</style> -
規則結構
每個規則分為兩個基本成份：
選擇器 (selector)與宣告區塊 (declaration block)。
選擇器，決定了文件內會受到影響的部分。
宣告區塊，由一個以上的宣告組成，每個宣告是由 CSS屬性加上屬性值組成。h1 {
color: red;
background: yellow;
} -
廠商字首
是用來讓瀏覽器廠商標記實驗中或私有的 CSS屬性 與數值等。
- 常見的廠商字首
字首 廠商 -epub-國際數位出版論壇 (International Digital Publishing Forum) 的 ePub 格式 -moz-以 Mozilla 為基礎的瀏覽器 (如 Firefox) -ms-微軟的 Internet Explorer -o-以 Opera 為基礎的瀏覽器 -webkit-以 Webkit 為基礎的瀏覽器 (如 Safari 與 Chrome)
到了2016年底，隨著瀏覽器實作慢慢移除了舊有的字首特性與數值，廠商字首也越來越少見了。
- 常見的廠商字首
-
空白處理
-
CSS註解
-
-
媒體查詢
-
使用方法
-
簡單媒體查詢
-
媒體類型
-
媒體描述子
-
媒體特性描述子與值
-
-
特性查詢
-
小結
/... 未完待續 .../ -