CSS: 语法基础

{ Posted on 星期二, 十二月 08, 2009 by Kaiser.XKw }
Tags :
CSS 的全名為 Cascading Style Sheets，是一種樣式表 (Stylesheet) 語言。它的目的是為了對像 XHTML 及 HTML 之類的標記語言 (markup language) 提供一個顯示層。有了 CSS，我們就可以將資料層及顯示層分開：HTML 文件就只包括資料，而 CSS 則是告訴瀏覽器這些資料應該要如何顯現出來

宣告 CSS 樣式的語法如下： 選擇器 {
     屬性：設定值；
     ...
} 在一個選擇器 (Selector) 中，可以設定的屬性數目沒有限制。
選擇器主要有三種：型類 (Type) 選擇器、Class 選擇器、和 ID 選擇器。
型類選擇器是 (X)HTML 標籤，如 <body> 和 <h1>。Class 和 ID 選擇器是使用者自訂的選擇器。

Grouping
如果有數個選擇器享有同樣的樣式，它們可以同時被宣告。這叫做 "grouping"。舉例來說，如果 <h1>, <h2>, and <h3> 都會有相同的樣式，那它們就可以用以下的方式被宣告：
h1 h2 h3 {
    屬性：設定值；
    ...
}

後代選擇器 (Descendant Selectors)
我們可以設定說，只有當甲元素在乙元素之內時，甲元素才會用某個樣式。若甲元素不在乙元素內的話，那甲元素就可以有其他的樣式。要達到這個目標，我們就要利用後代選擇器的方式。 後代選擇器宣告的語法是：
父選擇器】【子選擇器】{
    屬性：設定值；
    ...
} 在以上的宣告中，只有當子選擇器是在父選擇器之內時，樣式才會被用到。這一類的語法可以包括好幾代的選擇器，而不是只有兩代而已。
舉例來說，以下的宣告: li b {
    color:yellow;
} 代表在 <li> <b> 之內的文字是黃色的。不是在 <li> 之內的 <b> 中的文字，就不會套用黃色字體這個樣式。

將 CSS 套用入 HTML 文件中的四種方式

嵌入套用
樣式可以嵌入於 HTML 文件中 (通常是在 <head> 內)。舉例來說， <head>
<style type="text/css">
div {
background-color:#FF0000;
}
</style>
</head>

<body>
<div>
背景顏色是紅色
</div>
</body> 以上的 HTML 會顯現出：

背景顏色是紅色

外部連接套用
在這種方式下，所有的 CSS 樣式宣告都是存在另外一個檔案中。該檔案通常名稱為 .css。在 HTML 文件的 <header> .. </header> 之中，我們將用以下的程式碼將這個 .css 檔案連接進入： <link rel=stylesheet type="text/css" href="external-stylesheet.css"> 以上這一行會將在 external-stylesheet.css 這個檔案內所宣告的樣式加入 HTML 文件內。

匯入套用
外部的 CSS 樣式也可以被匯入進 HTML 文件。匯入的做法為利用 @import 這個指令。@import 的語法為： <STYLE TYPE="text/css">
<!--
@import url(http://www.mysite.com/style.css);
-->
</STYLE> @import 指令最初的用意，是為了能夠針對不同的瀏覽器而運用不同的樣式。不過，現在已經沒有這個必要。現在用 @import 的目的，最常是要加入多個 CSS 樣式。當多個 CSS 樣式被 @import 的方式加入，而不同 CSS 樣式互相有衝突時，後被加入的 CSS 樣式有優先的順位 (詳情請見 CSS 串接)。

CSS 媒體類別
不同的媒體類別可以用不同的 CSS 樣式表。舉例來說，在螢幕上的文件可能適用某一個 CSS 樣式表，而同一份文件在被列印時，可以用一個不同的 CSS 樣式表。標出一個 CSS 樣式表媒體類別的語法如下：

外部連接套用 <link rel="stylesheet" href="style.css" type="text/css" media="【媒體類別】">

嵌入套用 <style type="text/css" media="【媒體類別】">

匯入套用 @import url("style.css") 【媒體類別】;

媒體類別】可以有以下的值：
值 適用於
all 所有媒體類別
aural 言語合成器
braille 布拉耶點字法 (盲人用) 媒體
handheld 掌上型媒體
print 列印
projection 投射媒體
screen 電腦螢幕
tty 固定字寬 (fixed-pitch) 的媒體
tv 電視類的媒體

CSS 串接
CSS 的全名為 Cascading Style Sheets。如果只有一個樣式表，那『串接』(cascade) 這個部分就不重要。若一個 HTML 文件中包含有多個樣式表，那串接這個概念就非常重要了。串接是指當不同樣式表中對相同屬性有不同定義時，應該要用哪一個樣式表中的定義的規則。

最基本的規則是，越接近 HTML 本身的樣式越有優先權。

另外，每一個瀏覽器也都有自己的樣式表 (這就是為什麼超連接文字通常會是藍色，而且下面有一條線)。這一類的樣式表優先權比以上的幾種都低。

所以，從最高優先權到最低優先權的排名如下：
  • 內行套用的樣式表 (Inline stylesheet)
  • 嵌入套用的樣式表 (Embedded stylesheet)
  • 匯入套用的樣式表 (Imported stylesheet)
  • 外部連接套用的樣式表 (Linked stylesheet)
  • 瀏覽器本身的樣式表 (Browser's own stylesheet)

CSS 繼承
在一個 HTML 文件中，標籤之間有所謂的親子關係。舉例來說，<title> 這個標籤一定都是在 <head> 這個標籤之內，所以我們就說 <title> 是 <head> 的子標籤。繼承 (inheritance) 的意思就是說子標籤的樣式會跟父標籤一樣，除非子標籤本身另有自訂的樣式 舉例來說，如果我們有以下的樣式：

p { color: #00FF00; }
strong { font-size:20px; } 下面這行 HTML 碼，<p>這是一個 <strong>繼承的例子。</strong></p>
就會顯現出為:

這是一個繼承的例子。

在以上的例子中，雖然我們並沒有對 <strong> 設定顏色，可是我們可以看到，整個句子的顏色都是綠色的。這是因為， <strong> 是 <p> 的子標籤，所以 <strong> 繼承了 <p> 的樣式，而在 <p> 的樣式中，文字顏色是設定為綠色的。

CSS Class 與 CSS ID  Class 及 ID 都是使用者設定的選擇器 (selector)。

Class
Class 的宣告法，是先放一個句點 (.)，之後再列出選擇器名稱。設定一個 Class 選擇器的語法如下： .【Class 名稱】{
屬性：設定值；
    ...
} 舉例來說 .navbar {
    color:#0000FF;
} 要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼： <p class="navbar">這是用 Class 選擇器的例子。</p> 以上的 HTML 碼會顯現出：
這是用 Class 選擇器的例子。
一個 Class 選擇器可以同時有好幾個不同的物件 (instance)。這是靠以下的語法： 【型類選擇器】.【選擇器名稱】{
屬性：設定值；
    ...
} 舉例來說，若有以下的 CSS 宣告 b.special {
color:#0000FF;
}

i.special {
color:#FF0000;
} 以下的 HTML 碼

這個例子顯示出 <b class="special">同一個選擇器</b>可以<i class="special">有不同的 instance。</i>.

就会顯現出: 這個例子顯示出同一個選擇器可以有不同的 instance。.

多重 Class
我們也可以同時套用數個 class。舉例來說，若我們有以下的 CSS 宣告， .applylarge {
font-size:20px;
}

.applyred {
color:#FF0000;
} 那以下的 HTML 碼， <p class="applylarge applyred">這是多重 Class 的例子。</p>

ID    ID 的宣告法，是先放一個井字號 (#)，之後再列出選擇器名稱。設定一個 ID 選擇器的語法如下： #【ID 名稱】{
屬性：設定值；
...
} 舉例來說 #footer {
color:#FF00FF;
} 要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼： <p id="footer">這是用 ID 選擇器的例子。</p>
>

Class 跟 ID 的比較
這兩者最大的不同，是在於 ID 選擇器在一個 HTML 文件中只能被使用一次，而 Class 選擇器在一個 HTML 文件中可以被使用多次。第二個不同的地方，是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用，而 Class 選擇器無法被 Javascript 運用到。

並沒有什麼固定的規則，來決定什麼時候要用 ID 及什麼時候要用 Class。我們的建議是盡量用 Class，因為這樣子最靈活 (同一個 HTML 文件可以利用這類的選擇器多次)。唯一的例外，是當你要用 Javascript 的 GetElementByID 函數時。在這個情況下，你就應該要用 ID。

Class 名稱及 ID 名稱都是對大小寫敏感的。舉例來說，.classone 及 .ClassOne 是代表兩個不同的 Class 選擇器。

CSS Div 與 CSS Span

Div    這個標籤目的是將內容分為不同的區域，而每一個區域可以根據 CSS 中的宣告而有自己的樣式。Div 是一個區塊級容器 (block-level container)，這代表在 </div> 標籤後會換行。

舉例來說，如果我們有以下的 CSS 樣式： .large {
color: #00FF00;
font-family:arial;
font-size: 4pt;
} 以下的 HTML 碼 <div class="large">
這是 DIV 範例。
</div>

Span     Span 跟 Div 類似的地方是，這兩個標籤的目的都是將內容分為不同的區域。不同的是，Span 可以涵蓋更細層的元素。所以，我們甚至可以用 <span> 來調整單一文字的樣式。另外，在 </span> 之後並不會換行。。。。

舉例來說，如果我們有以下的 CSS 樣式： .largefont {
color: #0066FF;
font-family:arial;
font-size: 6px;
} 以下的 HTML 碼 Span 不是<span class="largefont">區塊級的</span>.
CSS 長度單位

在 CSS ，長度單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位。
相對單位包括：

  • px: pixels
  • em: em
  • ex: x 字母的高度
    絕對單位包括：
  • in: 吋
  • cm: 公分
  • mm: 公厘
  • pt: points, 1 pt = 1/72 吋
  • pc: picas, 1 pc = 12 pt

    如果沒有註明單位，那預設的單位是 px。

    以下是每一種單位的例子：

    CSS 樣式 顯現結果
    p {font-size:9px;}

    文字大小為 9px。
    p {font-size:3em;}

    文字大小為 3em。
    p {font-size:3ex;}

    文字大小為 3ex。
    p {font-size:0.2in;}

    文字大小為 0.2 inch。
    p {font-size:0.5cm;}

    文字大小為 0.5 cm。
    p {font-size:12mm;}

    文字大小為 12 mm。
    p {font-size:24pt;}

    文字大小為 24 pt。
    p {font-size:2pc;}

    文字大小為 2 pc。
    在大部分的情況下，用相對長度單位會比較適合。這是因為，這樣子您能讓使用者依自己的喜好來加大或減小字體。如果您用絕對長度單位的話，使用者就無法改變字體的大小了。

    • No Response to "CSS: 语法基础"

    发表评论

    订阅： 博文评论 (Atom)