樣式單（Styling Sheet） 樣式單是什麼？ 樣式單的優點與缺點 加入樣式單的方式 基本概念 樣式種類 行間樣式單 內嵌樣式單 外部樣式單 基本概念 樣式種類
樣式單是什麼？ 樣式單是一種設定文字格式與版面布置的規格。 主要目的：用於網頁的排版，使得內容與外觀得以隔離。 W3C 在 1996 年 12 月公布 CSS1 樣式單語法與功能的標準。 http://www.w3.org/pub/WWW/TR/REC-CSS1 W3C 在 1998 年 5 月公布 CSS2 樣式單語法與功能的標準。 http://www.w3.org/pub/WWW/TR/REC-CSS2
樣式單的簡單範例 我們以底下的簡單 HTML 文件為例： <HTML> <HEAD> <TITLE>Bach’s home page</TITLE> </HEAD> <BODY> <H1>Bach’s home page</H1> <P>Johann Sebastian Bach was a prolific composer.</P> </BODY> </HTML>
CSS 規則 假定想把 H1 元件的文字顏色改成藍色，我們可以使用以下的 CSS 規則： H1 {color:blue} 選擇項（selector）：如上例中的 H1。 宣告（declaration）：如上例中的 color:blue。 宣告又是由兩個部分所組成： 屬性（property）：如上例中的 color。 屬性值（value）：如上例中的 blue。
嵌入 CSS 規則 我們可以用好幾種方法把 CSS 規則加入網頁中。底下我們採用嵌入樣式的方法： <HTML> <HEAD> <TITLE>Bach’s home page</TITLE> <STYLE type="text/css"> H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Bach’s home page</H1> <P>Johann Sebastian Bach was a prolific composer.</P> </BODY> </HTML>
連結外部的 CSS 規則 通常我們會把 CSS 規則存在另一個檔案中，然後用 LINK 標籤連結進來，如下例所示： <HTML> <HEAD> <TITLE>Bach’s home page</TITLE> <LINK rel="stylesheet" href="bach.css" type="text/css"> </HEAD> <BODY> <H1>Bach’s home page</H1> <P>Johann Sebastian Bach was a prolific composer.</P> </BODY> </HTML>
CSS 規則的繼承 <HTML> <HEAD> <TITLE>Bach’s home page</TITLE> <STYLE type="text/css"> BODY { color: red } H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Bach’s home page</H1> <P>Johann Sebastian Bach was a prolific composer.</p> </BODY> </HTML>
在前一頁的例子中，CSS 規則 BODY { color: red } 把網頁文字設為紅色。由於 P 元件是 BODY 元件的子元件，因此 P 元件會繼承 BODY 元件的樣式設定。這使得 P 元件中的文字亦為紅色，即使我們並未設定其樣式。
CSS 屬性範例 CSS 提供超過 100 個屬性讓我們做各種不同的排版設定。比方說：以下的樣式會產生右下圖所示的結果。 無樣式設定 有樣式設定 CSS 提供超過 100 個屬性讓我們做各種不同的排版設定。比方說：以下的樣式會產生右下圖所示的結果。 <STYLE type="text/css"> BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; } </STYLE>
樣式單的優點 可微調字與字之間的距離。 可調整行高 可調整各種邊界的寬度或高度 表格設計更具有彈性 使得網頁排版更簡單一致。
樣式單的缺點 不是每一種瀏覽器都完整地支援樣式單的功能。譬如： Netscape 4.X 瀏覽器只支援少部份的功能，而 IE. 4.0 則支援了大半的功能。 不過 IE5 和 Netscape 5 將完全支援樣式單的功能。
加入樣式單的方式 行間樣式單（inline styling sheet） 內嵌樣式單（embedded styling sheet） 外部樣式單（external styling sheet）
行間樣式單 在 HTML 的元件中，以 style 屬性來設定樣式。 優點：最簡單易用的一種。 缺點： 影響僅涵蓋元件的範圍 繁瑣
行間樣式單的格式 在 HTML 的標簽內加入樣式屬性。 樣式屬性的格式如下： STYLE = ”屬性一:屬性值; 屬性二:屬性值; …” 屬性的設定必須含括在雙引號（”）之間。 屬性與屬性值之間以英文冒號（:）隔開 不同的屬性設定以英文分號（;）隔開。
行間樣式單的範例 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT= "text/html; charset=Big5"> <TITLE>行間樣式單</TITLE> </HEAD> <BODY> <P STYLE=“font:14pt 新細明體”>此段利用行間樣式單 將文字的大小設為 14 點。</P> <P STYLE=“font:32pt 標楷體”>此段利用行間樣式單將 文字的大小設為 32 點。</P> </BODY> </HTML>
內嵌樣式單 樣式單定義於網頁<HEAD>元件 內。 優點： 缺點 影響範圍涵蓋整份網頁 網頁排版效果一致 無法同時應用於排版多張網頁
內嵌樣式單的格式 所有樣式的定義均設定於 <STYLE> 及</STYLE> 之間。 <STYLE> 要在 <HEAD> 元件內。 定義 HTML 元件的樣式。 樣式定義中的欄位，以分號 (；)分隔。 欄位與設定值之間是用冒號 (：) 分隔。 樣式的設定需用大括號({})括起來。
內嵌樣式單的範例 <HEAD> ... <STYLE><!-- BODY { background:#FFFFFF; color:#000000; margin-top:.25in; margin-left:.75in; margin-right:.75in} H3 {font:14pt 新細明體; color:#0000FF} P {font:12pt 標楷體; text-indent:0.5in} A {color:#FF0000} --></STYLE> </HEAD> <BODY>
外部樣式單 樣式單不直接附在HTML原始檔中，而是存於一個以 .css為副檔名的檔案中 優點：影響範圍可及多張網頁 缺點：稍嫌複雜
外部樣式單的格式 將樣式單的設定儲存在一個.css 檔之中。 在 HTML 原始檔的 HEAD 元件中加入以下的 LINK 標籤： <LINK rel=stylesheet href= 外部樣式單檔案的 URL type="text/css” >
.css 的範例 <!-- 檔案名稱：style.css --> <STYLE><!-- Body {background:#FFFFFF;color:#000000; margin-top: 0.25in; margin-left:.74in; margin-right:.75in} H3 {font:14pt 華康中黑體; color: #0000FF} P {font:12pt 新細明體; text-indent: 0.5in} A {color:#FF000} --></STYLE>
連結外部樣式單 <HEAD> ... <TITLE>外部樣式單</TITLE> <LINK rel=stylesheet href="style.css" type="text/css"> </HEAD> <BODY>
基本概念 文件樹（Document Tree） 選擇項（Selector） 樣式的定義方式 繼承
文件樹（Document Tree） The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none.
選擇項（Selector） 選擇項可用來區隔相同元件的樣式。 選擇項可分成以下三種方式： 類別（CLASS） 識別名稱（ID） 語境（Contextual）
組合（Grouping） 若樣式宣告都一樣，我們可以把選擇項合併寫在一起，並用逗號分隔。譬如以下的三條 CSS 規則： H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif } 可合併寫成如下的一條 CSS 規則： H1, H2, H3 { font-family: sans-serif }
選擇項一覽表 Pattern Meaning * E E F E > F E + F Matches any element (i.e., the universal selector). E Matches any E element (i.e., an element of type E). Type selectors E F Matches any F element that is a descendant of an E element. Descendant selectors E > F Matches element E when E is the first child of its parent. E + F Matches any F element immediately preceded by an ekement E.
E:link E:visited E:active E:hover E:focus E:lang(c) E[foo] Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). E:active E:hover E:focus Matches E during certain user actions. E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). E[foo] Matches any E element with the "foo"attribute set (whatever the value). E[foo="warning"] Matches any E element whose "foo“ attribute value is exactly equal to "warning". E[foo~="warning"] Matches any E element whose "foo“ attribute value is a list of space-separated values, one of which is exactly equal to "warning".
E[lang|="en"] E.myclass E#myid Matches any E element whose "lang“ attribute has a hyphen-separated list of values beginning (from the left) with "en". E.myclass The same as E[class~="myclass"]. E#myid Matches any E element ID equal to "myid".
Universal Selector The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree. If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example: *[LANG=fr] and [LANG=fr] are equivalent. *.myclass and .myclass are equivalent. *#myid and #myid are equivalent.
Type Selectors A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree. Example: The following rule matches all H1 elements in the document tree: H1 { font-family: sans-serif }
Descendant selectors At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by whitespace. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.
範例： For example, consider the following rules: H1 { color: red } EM { color: red } Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as: <H1>This headline is <EM>very</EM> important</H1> We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1: H1 EM { color: blue }
範例： The following selector: DIV * P matches a P element that is a grandchild or later descendant of a DIV element. Note the whitespace on either side of the "*". 範例： The selector in the following rule, which combines descendant and attribute selectors, matches any element that (1) has the "href" attribute set and (2) is inside a P that is itself inside a DIV: DIV P *[href]
Child selectors A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">". 範例： The following rule sets the style of all P elements that are children of BODY: BODY > P { line-height: 1.3 } 範例： The following example combines descendant selectors and child selectors: DIV OL>LI P It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV.
Adjacent sibling selectors Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2. In some contexts, adjacent elements generate formatting objects whose presentation is handled automatically (e.g., collapsing vertical margins between adjacent boxes). The "+" selector allows authors to specify additional style to adjacent elements.
範例： The following rule states that when a P element immediately follows a MATH element, it should not be indented: MATH + P { text-indent: 0 } 範例： The next example reduces the vertical space separating an H1 and an H2 that immediately follows it: H1 + H2 { margin-top: -5mm } 範例： The following rule is similar to the one in the previous example, except that it adds an attribute selector. Thus, special formatting only occurs when H1 has class="opener": H1.opener + H2 { margin-top: -5mm }
Matching attributes and attribute values Match when the element sets the "att" attribute, whatever the value of the attribute. [att=val] Match when the element’s "att" attribute value is exactly "val". [att~=val] Match when the element’s "att" attribute value is a space-separated list of "words", one of which is exactly "val". If this selector is used, the words in the value must not contain spaces (since they are separated by spaces). [att|=val] Match when the element’s "att" attribute value is a hyphen-separated list of "words", beginning with "val". The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches (e.g., the "lang" attribute in HTML) as described in RFC 1766.
範例： the following attribute selector matches all H1 elements that specify the "title" attribute, whatever its value: H1[title] { color: blue; } 範例： In the following example, the selector matches all SPAN elements whose "class" attribute has exactly the value "example": SPAN[class=example] { color: blue; } 範例： Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus": SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
範例： The following selectors illustrate the differences between "=" and "~=". The first selector will match, for example, the value "copyright copyleft copyeditor" for the "rel" attribute. The second selector will only match when the "href" attribute has the value "http://www.w3.org/". A[rel~="copyright"] A[href="http://www.w3.org/"] 範例： The following rule hides all elements for which the value of the "lang" attribute is "fr" (i.e., the language is French). *[LANG=fr] { display : none }
Class selectors For style sheets used with HTML, authors may use the dot (.) notation as an alternative to the "~=" notation when atching on the "class" attribute. Thus, for HTML, "DIV.value" and "DIV[class~=value]" have the same meaning. The attribute value must immediately follow the ".". 範例： For example, we can assign style information to all elements with class~="pastoral" as follows: *.pastoral { color: green } /* all elements with class~=pastoral */ or just .pastoral { color: green } /* all elements with class~=pastoral */
範例： The following assigns style only to H1 elements with class~="pastoral": H1.pastoral { color: green } /* H1 elements with class~=pastoral */ Given these rules, the first H1 instance below would not have green text, while the second would: <H1>Not green</H1> <H1 class="pastoral">Very green</H1>
To match a subset of "class" values, each value must be preceded by a ".", in any order. 範例： For example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine": P.pastoral.marine { color: green } This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".
ID selectors What makes attributes of type ID special is that no two such attributes can have the same value; an ID attribute can be used to uniquely identify its element. In HTML all ID attributes are named "id". The ID attribute allows authors to assign an identifier to one element instance in the document tree. CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a "#" immediately followed by the ID value. 範例： The following ID selector matches the H1 element whose ID attribute has the value "chapter1": H1#chapter1 { text-align: center }
範例： In the following example, the style rule matches the element that has the ID value "z98y". The rule will thus match for the P element: <HEAD> <TITLE>Match P</TITLE> <STYLE type="text/css"> *#z98y { letter-spacing: 0.3em } </STYLE> </HEAD> <BODY> <P id=z98y>Wide text</P> </BODY>
範例： However, the style rule will only match an H1 element that has an ID value of "z98y". The rule will not match the P element in this example: <HEAD> <TITLE>Match H1 only</TITLE> <STYLE type="text/css"> H1#z98y { letter-spacing: 0.5em } </STYLE> </HEAD> <BODY> <P id=z98y>Wide text</P> </BODY>
Pseudo-elements and pseudo-classes In CSS2, style is normally attached to an element based on its position in the document tree. This simple model is sufficient for many cases, but some common publishing scenarios may not be possible due to the structure of the document tree. For instance, in HTML 4.0, no element refers to the first line of a paragraph, and therefore no simple CSS selector may refer to it. CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
Pseudo-elements Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document (e.g., the :before and :after pseudo-elements give access to generated content).
:first-line pseudo-element The :first-line pseudo-element applies special styles to the first formatted line of a paragraph. For instance: P:first-line { text-transform: uppercase } The above rule means "change the letters of the first line of every paragraph to uppercase". However, the selector "P:first-line" does not match any real HTML element. It does match a pseudo-element that conforming user agents will insert at the beginning of every paragraph.
範例： <html> <head> <title>First line</title> <STYLE type="text/css"> P { font-size: 12pt; line-height: 18pt } P:first-line { text-transform: uppercase } </STYLE></head> <body> <P>The first few words of an article in The Economist.</P> </body> </html>
:first-letter pseudo-element The :first-letter pseudo-element may be used for "initial caps" and "drop caps", which are common typographical effects. This type of initial letter is similar to an inline-level element if its ’float’ property is ’none’, otherwise it is similar to a floated element.
範例： <HTML> <HEAD> <TITLE>Drop cap initial letter</TITLE> <STYLE type="text/css"> P { font-size: 12pt; line-height: 18pt } P:first-letter { font-size: 200%; font-weight: bold; float: left } SPAN { text-transform: uppercase } </STYLE> </HEAD> <BODY> <P><SPAN>The first</SPAN> few words of an article in The Economist.</P> </BODY> </HTML>
範例： <HTML> <HEAD> <TITLE>Initial cap the first letter</TITLE> <STYLE type="text/css"> P { font-size: 12pt; line-height: 18pt } P:first-letter { font-size: 200%; font-weight: bold } SPAN { text-transform: uppercase } </STYLE> </HEAD> <BODY> <P><SPAN>The first</SPAN> few words of an article in The Economist.</P> </BODY> </HTML>
:before and :after pseudo-elements The :before and :after pseudo-elements can be used to insert generated content before or after an element’s content. （見以後的說明）
Pseudo-classes Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exception is ’:first-child’, which can be deduced from the document tree.
:first-child pseudo-class The :first-child pseudo-class matches an element that is the first child of some other element. 範例： In the following example, the selector matches any P element that is the first child of a DIV element. The rule suppresses indentation for the first paragraph of a DIV: DIV > P:first-child { text-indent: 0 }
The link pseudo-classes: :link and :visited User agents commonly display unvisited links differently from previously visited ones. CSS provides the pseudo-classes ’:link’ and ’:visited’ to distinguish them: The :link pseudo-class applies for links that have not yet been visited. The :visited pseudo-class applies once the link has been visited by the user. 範例： If the following link: <A class="external" href="http://out.side/">external link</A> has been visited, this rule: A.external:visited { color: blue } will cause it to be blue.
The dynamic pseudo-classes: :hover, :active, and :focus The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).
範例： A:link { color: red } /* unvisited links */ A:visited { color: blue } /* visited links */ A:hover { color: yellow } /* user hovers */ A:active { color: lime } /* active links */ Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the ’color’ property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
樣式屬性值的種類 長度 百分比 顏色 URL
長度 長度屬性值的格式是：先寫正負號（+ 或 -，預設為 +）、次寫數值，最後加上單位。長度單位有絕對或相對兩種形式。 絕對長度單位 cm centimeter（公分） mm millimeter（公釐），1mm=0.1cm in inch（英吋），1in=2.54cm pt points（點） ， 1pt=1/72in pc pica（匹卡），1pc=12pt 相對長度單位 em 目前字型的大小 ex 目前字型中，字母 x 的高度（約為字型大小的一半） px 像素
百分比 百分比屬性值的格式是：先寫正負號（+ 或 -，預設為 +）、次寫數值，最後加上英文百分號字元（%）。當然，其中的數值必須介於 0 到100 之間。 百分比是一種相對的屬性值。通常百分比是相對於元件的字型大小而言。 範例： 底下的規則把 P 元件的行高設定為字型大小的 1.2 倍。 P { line-height:120% }
顏色 顏色可以用名稱或 RGB 值兩種方式來指定顏色。 我們可以使用下表所示的十六種顏色的名稱來指定顏色。
#rrggbb #rgb rgb(r,g,b) rgb(r%, g%, b%) 六位十六進位數字，其中的 rr, gg, 與 bb 分別指定紅綠藍三色的成分。它們的最小值為 00 (0)，最大值 為 ff (255)。 #rgb 三位十六進位數字，其值代表 #rrggbb，而非 #r0g0b0，譬如：#fb0 的值是 #ffbb00，而不是 #f0b000）。 rgb(r,g,b) r, g, 與 b 分別為紅綠藍三色的成分值。它們的值必須是 一個小於256的十進位正整數。 rgb(r%, g%, b%) r%, g%, 與 b% 分別為紅綠藍三色的成分百分比。
URL URL 屬性值的格式為：url(網址)。譬如以下的樣式： BODY {background:url(http://www.pu.edu.tw/welcome.gif)} 設定網頁背景使用 URL 為 http://www.pu.edu.tw/welcome.gif 的圖片。 如果你使用檔案路徑 UR 於外部樣式單中，則該 URL 是相對於外部樣式單所在的路徑，而非相對於使用該外部樣式單的網頁路徑。舉例來說，假定某張網頁 web.html 所使用的外部樣式單 mystyle.css 含有以下的樣式： BODY {background:url(welcome.gif)} 則 welcome.gif 這個圖片檔案是與 mystyle.css 同目錄，而不是與 web.html 同目錄。
繼承（Inheritance） 延續外層元件或預設值的設定 <STYLE><!-- H1{color:blue } EM{font:20pt } --><STYLE> …. <BODY> <H1>標題<EM>一</EM></H1> … </BODY>
字型屬性 font-family （字型屬性） font-style （字形樣式） font-variant （字型變體） font-weight （字型粗細） font-size （字型大小）
文字屬性 letter-spacing （字元間距） word-spacing （字間距） text-decoration （文字裝飾） text-transform （文字轉換） text-shadow （文字陰影） text-align （文字水平對齊） vertical-align （垂直對齊） text-indent （文字內縮） line-height （行高） white-space （空白）
範例 <STYLE> BODY{line-height:1.5em; text-indent:2em} … </BODY>
顏色屬性 color （顏色） background-color （背景顏色） background-image （設定背景圖片） background-repeat （背景複製方式） background-position（背景位置）
元件盒（Box） HTML 的元件可區分為行間類（inline）與區塊類（block）。前者用來設定字詞的格式，如 <EM>、<S>、<BIG> 等元件。後者用來設定段落的格式，通常會佔據一塊矩形區域，如 <P>、<DIV>、<LI> 等元件。所謂元件盒即是指的區塊類元件所佔據的矩形區域。 如下一頁所示，元件盒由外而內可區分為：邊界、框線、內距、和內文共四層區域。我們可以用樣式單來設定這些區域的大小，以及框線的樣式。
邊界（margin） 外框線（border） 內距（padding） 內文
邊界屬性之一 margin-top （上邊界） margin-right （右邊界） margin-bottom （下邊界） margin-left （左邊界） padding-top （上內距） padding-bottom （下內距） padding-left （左內距） border-top-width （上邊框寬度） border-right-width （右邊框寬度） border-bottom-width（下邊框寬度） border-left-width （左邊框寬度）
邊界屬性之二 border-width （邊框寬度） border-color （邊框顏色） border-style （邊框樣式） border-top （上邊框） border-right （右邊框） border-bottom （下邊框） border-left （左邊框）