XML Technology Research Lab: CSS 入門

Cascading Style Sheet

串接式的排版樣本（Cascading Style Sheet）是目前最常見的排版語法，幾乎所有的部落格網站都大量使用 CSS。除了 HTML 之外，還發展 CSS 的主要目旳在於將文件內容與呈現方式分開，這將使得網頁的管理比較容易，尤其在開發網頁為介面的資訊系統時特別具有彈性。CSS 目前分成兩個版本，分別為 CSS1 與 CSS2。這裡是 W3Schools 所製作的一份 CSS Tutorial，不排斥英文的讀者，我們強烈建議去看看！

CSS 語法

CSS 語法主要分成三個部份，分別是選擇器（selector）、屬性名稱（property）、以及屬性值（value）。語法的表達如下：

selector {property: value}

屬性名稱和屬性值形成一個所謂的 style（風格、樣式等），而這個 style 可以套用在某個特定的區域，而這個區域由選擇器所代表。一個簡單的範例如下：

h3 {color: blue}

以上例來說，大括號內（{}）所定義的 style 會影響所有 <h3> 和 </h3> 之間的所有的內容。而範例中的 style 說的是 <h3> 內的文字顏色（color 就是指定文字顏色的屬性名稱）設定為 blue（blue 就是設定文字顏色的屬性值）。當我們設定好了之後，這樣的定義要放在哪裡呢？style 的定義方式主要的有三種，首先我們先說明內嵌式的（Embedded Style Sheet）的定義方式。這種方式的定義方式是在你的 HTML 檔內的 <head> 標籤之間加入 <style> 的標籤，其格式如下：

<head>
<style type="text/css">
  CSS styles....
</style>
</head>

然後在灰色的那個區塊（也就是 "CSS styles...."）加入之前的 CSS 語法。以我們之前的 style 為範例，我們就可以寫成如下的原始碼：

<head>
<style type="text/css">
  h3 {color: blue}
</style>
</head>
<body>
<h3 align="center">文字顏色測試</h3>
</body>

如果你想看範例的結果，請按這裡。從範例的結果，我們可以看到文字的顏色變成了藍色。

Inline Style Sheet

另外一種定義 style 的方式稱之為行內式的（Inline Style Sheet）的定義方式。所謂的行內式的定義方式指的是將 style 的定義跟 HTML 的標籤放在一起。由於 style 跟 HTML 的標籤放在一起，所以 selector 是不必定義的。其語法如下：

<HTML標籤 style="CSS style">
</HTML標籤>

以上例說明的話，其設定的方式如下：

<body>
<h3 align="center" style="color: blue">文字顏色測試</h3>
</body>

如果你想看範例的結果，請按這裡。請注意，內嵌式的設定方式會影響所有和 selector 相同的標籤，但是行內式的設定方式只會影響到你所設定的那個標籤，這也可以從之前兩個範例網頁中最後一段文字的呈現顏色看的出來。 練習題：

請寫兩個網頁，一個使用內嵌式的設定方式，另一個使用行內式的設定方式。設定的 style 請應用在 <i> 的標籤。為了看出影響範圍，兩個網頁內至少包含兩個以上的 <i> 標籤，利用行內式的設定方式請只在其中一個 <i> 標籤設定 style。因為我們目前只學到文字顏色的設定，那就把 style 設定成文字顏色改成紅色。
如果一個 HTML 檔案中，同時包含了內嵌式的設定以及行內式的設定，那麼結果為何呢？請將前一個練習題中的兩個網頁結合成一個網頁，為了看出效果，內嵌式的設定請將文字顏色改成藍色。

CSS 也允許你一次定義多種 style，你只需要在每一對的屬性之間加上分號（;）即可，例如，下例中，我們將段落（p）定義成置中，且顏色為紅色。

p {text-align:center;color:red}

如果你想看範例的結果，請按這裡。除了可以把多個 style 設定給一個 selector 之外，你也可以把一個或者多個 style 設定給多個 selectors。例如，在下面這個範例中，我們把"文字顏色設定成綠色"的 style 定義給 h1、h2、h3 這三個標籤。如範例所示，每一個標籤之間也是以逗點分開。

h1,h2,h3,h4,h5,h6 {
  color: green
}

我們把 p 和 h1 等的範例結合在一起，結果請按這裡。

階層式的設定

selector 的用法也可以有階層式的設定。所謂階層式的設定就是說 selector 的名稱可以由兩個或者兩個以上的 HTML 標籤所組成，以兩個 HTML 標籤所組成的語法如下：（請注意：階層式的設定中，兩個 HTML 標籤之間是空格，而不是逗點）

selector1 selector2 {property: value}

這樣的設定方式指定：由 {property: value} 的 style 只能套用在 selector2 的標籤上，而且這個 selector2 的標籤必須在 selector1 的定義範圍內才可以。例如：如果我希望只在粗斜體的情形下，文字的顏色在會變成藍色，否則單獨的斜體字其顏色不會變化。為了符合上述的需求，我們所設定的 style 如下：

b i {color: blue}

如果你想看範例的結果，請按這裡。如果你仔細檢查網頁的原始碼，你會發現：單獨使用 <i>、<b>、甚至使用 <i><b> 都只會呈現預設的文字顏色（黑色），只有使用 <b><i> 才會呈現藍色。 練習題：

如果在上面這個範例中，我們也希望能使得 <i><b> 也會呈現藍色，要怎麼辦？
如果我們希望無順序的條列式（unordered list）的每一個項目的文字顏色是綠色，但是有順序的條列式（ordered list）的每一個項目的文字顏色不變，你要怎麼利用階層式的 selector 方式來設定 style？

class selector

除了之前所說的 selector 的用法之外，還有兩種主要的用法。一種是在 selector 名稱之前加上 .（一點）、另一種是在 selector 名稱之前加上 #。在 selector 名稱之前加上一點的 selector 稱之為 class selector。 class selector 的定義方式有兩種，一種是在一點之前還有 HTML 的標籤，另一種就是一點之前沒有 HTML 的標籤。如果你定義的方式是採用一點之前還有 HTML 的標籤的話，這個設定的意義就是 style 只能套用在這個 HTML 標籤內；反之，如果一點之前沒有 HTML 的標籤，那麼這個 style 就可以套用在所有的 HTML 標籤。我們的範例如下：

.right {text-align: right; color: blue}
p.center {text-align: center; color: red}

在這個範例中，.right 定義所有 HTML 標籤都可以使用 .right 這個 style（也就是文字靠右）。而 .center 則只能套用在 <p> 的標籤。而使用 class selector 的方式就是在 HTML 標籤內定義一個 class 屬性，而其屬性值就是 selector 的名稱（但是不包含那一點）。文字顏色的設定是可以不要的，我們把它們定義出來主要是為了讓呈現效果更明顯。在給範例說明以前，我們需要先說明兩個特別的 HTML 標籤：一個是 <div>、一個是 <span>。這兩個標籤單獨使用並沒有任何特別的意義，在網頁上也不會呈現任何特別效果。一般來說，這兩個標籤的使用時機是和 class 或者 id 屬性一起使用的。<div> 和 <span> 唯一不同的地方在於 <div> 會形成一個區塊（block），而 <span> 會和之前、以及之後的資料在同一行出現，稱之為 inline。我們首先給一個範例說明 <div> 和 <span> 的不同。如果你想看範例的結果以及說明，請按這裡。在範例中，可以很明顯的看出，<div> 會單獨形成一個區塊，而 <span> 仍然跟前後文連結。
好，說明完了 <div> 和 <span> 之後，我們現在就可以給一個範例，這個範例同時結合 class selector 以及 <div>。如果你想看範例的結果，請按這裡。仔細檢查原始碼以及網頁的結果，你會發現： <div> 和 center 結合在一起是一點效果也沒有。 請注意： 每一個 HTML 標籤只能有一個 class 屬性。

id selector

在 selector 的名稱之前加 # 又是什麼情形呢？其實它的用法跟加一點類似，只是在使用這一類的 selector 的時候，HTML 標籤內的屬性必須使用 id，所以這一類的 selector 又稱之為 id selector。 id selector 的定義方式跟 class selector 也一樣，可以在 # 加上 HTML 標籤，當然你也可以選擇不加。id selector 有一個特性是 class selector 沒有的，那就是"唯一性"，也就是說在一份 HTML 文件中，如果你定義了一個叫做 aaa 的 id，那整份 HTML 文件中只能有一個標籤的 id 值是 aaa，重複的話，這份 HTML 的文件就是一個不合法的文件。這樣的特性讓 id selector 的使用上多了許多應用：部落格網站經常為網頁中的位置給予特定的名稱；例如，我們可以為網頁的橫幅區域命名為 banner，如此一來，使用者就可以輕易的為 banner 區塊改成自己的樣子；或者在使用 Javascript 的動態網頁上，程式可以利用取得標籤 ID 的方式找到所要的標籤。假設我們定義了如下的 style：

#right {text-align: right; color: blue}
p#center {text-align: center; color: red}

如果我們希望有一段文字可以靠右而且文字顏色為藍色，那麼我們就可以定義為 <div id="right">。比較完整的範例，請按這裡。

Cascading Order

What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority:

Browser default
External Style Sheet
Internal Style Sheet (inside the tag)
Inline Style (inside HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the tag, in an external style sheet, and in a browser (a default value).

XML Technology Research Lab

2012年10月26日星期五

CSS 入門

Cascading Style Sheet

CSS 語法

Inline Style Sheet

階層式的設定

class selector

id selector

更多的範例

Cascading Order

沒有留言:

張貼留言

2012年10月26日 星期五

CSS 入門

Cascading Style Sheet

CSS 語法

Inline Style Sheet

階層式的設定

class selector

id selector

更多的範例

Cascading Order

沒有留言:

張貼留言

2012年10月26日星期五