本頁使用了標題或全文手工轉換

CSS

維基教科書,自由的教學讀本
跳至導覽 跳至搜尋

狀態[編輯]

備忘錄:正在寫書本的大綱階段。

本書的內容[編輯]

這本書唯一的主題就是 CSS,因此,這本書不會告訴你 CSS 的歷史,也不會著墨於 CSS 的好處與優點,因為在網路上已經有很豐富的資料。然而我鼓勵讀者若是時間許可,應該花些時間了解為什麼網頁技術怎麼從 HTML 開始,後來衍生出 CSS,而最後又冒出 XHTML 。關於 CSS 的歷史,你可參考 Who created CSS? CSS Early History,至於 CSS 的好處與優點,用了你就會了解。

雖然我會在適當的地方加入參考資料或是連結,但是基本上,沒有閱讀這些參考資料與連結並不會影響你學習 CSS。因此,除了自己動手作停下來之外,盡量別讓其他的事情中斷你的閱讀。

CSS 3 增加了對圓角[1]、陰影的直接支持,有助於簡化開發。在以前要完成基本的邊框圓角效果非常麻煩,需要自己提前製作好圖片,無法僅藉助CSS直接實現[1]

先統一辭彙[編輯]

Cascading Style Sheet (CSS) 的中文翻譯一直沒有定調,有人稱他為「層疊樣式表」,也有稱「串接樣式表」,我想,我在這裡不為 CSS 的中文譯名正名,往後的文章中,中文一律用「樣式表」來稱呼 CSS,不過我寧可多用英文,以免造成誤解。

還有一個重要的詞彙「selector」,中文有「選擇器」與「選取項」兩種翻譯,本書我採用後者。

前言:一個網頁的構成[編輯]

底下的說明,對於任何數位的文件來說,都會成立,但是我仍然將數位文件侷限在網頁這個範圍,這樣會讓問題單純一些。

從產生(或是製作)的過程來看,網頁可以區分為:

  1. 內容(contents)
  2. 呈現(presentation)

兩大元素。簡單的說,我們會依照不同的重要性、不同的性質(屬性)與意圖,將網頁的內容結構化,之後,再依據這個架構,給予各個部份合適的呈現方式。這就是我們最後看到的網頁。

概述[編輯]

不同性質的內容[編輯]

我們先試著從不同的角度來看一分網頁,先從瀏覽器呈現出來的畫面,再到原始碼,最後看看有沒有什麼遺漏的內容。

從瀏覽器看到的成品[編輯]

大家可以回想一下你曾經看過或是作過的網頁,從瀏覽器前端看得到的組成元素不外乎底下的幾個要素:

標題(heading)
網頁的第一級標題、第二級標題、第三級 ... 標題。
段落(paragraph)
指的是一段意義完整的圖、文。
表格(table)
例如價目表、行事曆等等,由行、列組成的資料。
清單(list)
有序的清單、無序清單與定義式清單。
圖片(image)
各種可以被瀏覽器讀取的格式的圖檔。
超連結(hyperlink)
超連結是網頁有別於一般文件的一個很重大的分野,因此,我也把它當作是網頁的一個要素。
表單(form)
有按鈕、單選選項(raido)、複選選項(check box)、輸入欄位(text field)、輸入文字區塊(text area)等等。
多媒體(multimedia)
影片、音樂或是 flash。

反觀網頁原始碼[編輯]

若是你熟悉原始碼,上面我提到的每一個要素,你一定可以立刻對應到某個 HTML 的標籤(tag),但是在原始碼裡面,你會發現更多東西,例如:

  • Javascript
  • meta 標籤
  • style 標籤
  • ...

事實上,在原始碼裡面,我們還要提供許多很關鍵的資訊給瀏覽器或是搜尋引擎,這些資訊並不會呈現在使用者眼前,但是卻與網頁的呈現正確與否息息相關。這些資訊包括: 利用 meta 標籤告訴瀏覽器你的網頁所使用的編碼,例如:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

其他[編輯]

若是你細心一點,你一定會發現,一個網頁所包含的元素裡面,我們漏提了許多的東西,例如:

關於整個版面的
  • 前景、背景顏色
  • 邊界
  • 間距
關於字體的
  • 字型、字級與顏色
  • 行高

HTML 與 CSS 的分工[編輯]

談到這裡,我想你一定感覺到了,原來所謂的「標記語言(markup language)」確實是要替文件的內容加上註記,讓一個文件的結構清晰、層次分明。熟悉 HTML 的人會說,HTML 的標籤裡面還是有一些用來作格式化(也就是定義呈現方式)的標籤,如:<b>、<i>,但是,總體來說,HTML 最大的用途乃是用來描述文件的架構,讓文件本身在結構上具有意義,甚至更進一步的讓文件具有語義。

至於樣式表的角色呢?它是用來告訴瀏覽器,如何裝扮每一個 HTML 標籤所標示的內容。所以,任何談到樣式表與 HTML 的文章都會說:「藉由 CSS,我們讓文件的內容與呈現可以分離。」沒錯,這就是學習 CSS 的目的,你應該開始想像,在不更動任何 HTML 原始碼的狀況下,藉由修改樣式表,你的網頁將呈現各種風格迥異的面貌。

HTML 簡單介紹(A Brief of HTML)[編輯]

在真正提到 CSS 之前,弄清楚下列幾個 HTML 的基本觀念,可以讓你更快掌握 CSS,也可以幫助你將來比較容易閱讀其他相關文件,另外,用合適的術語表達概念,有助於與其他設計師的溝通。

標籤與元素 (Tags and Elements)[編輯]

標籤與元素
標籤(tag)
  • 介於左右三角括弧 (angled brackets) 的文字,如:<body>
  • 通常標籤是成對的,分別成為「起始標籤(opening tag)」與「結束標籤(closing tag)」,我們將內容在兩個標籤之中。
  • 一般而言,標籤用來告訴瀏覽器採取什麼處理方式:起始標籤告訴瀏覽器開始某個處理方式,結束標籤告訴瀏覽器終止該處理方式。
元素 (elements)
  • 由起始標籤、結束標籤和其間的內容所構成,例如:<b>This is bold text</b>

屬性 (Attribute)[編輯]

我們以實際的例子來說明:

<img src="images/foo.gif" alt="範例" width="100" height="50" />

這是一個 img 標籤,在原始碼中,標示這裡要放入一張圖,圖片來源(source, src)是 image/foo.gif 這個檔案,萬一圖片無法顯示時,替代的(alternative, alt)文字是 "範例",而這張圖的寬度(width)是 100 像素(pixels),高度(height)是 50 像素。

我們稱呼:

  • src
  • alt
  • width
  • height

為 img 標籤的屬性,而等號(=)後面用雙引號括起來的稱為屬性的「值(value)」。

不同的標籤有不同的屬性,數量也不一樣。

區塊標籤(Block-level Tags)與同軸標籤(Inline Tags)[編輯]

我們先看一個例子,再來解釋什麼是 block-level 什麼是 inline。

HTML 原始碼 呈現
<p>
這是用來說明
<b>區塊標籤(block-level tags)</b>與
<b>同軸標籤(inline tags)</b>的例子。
</p>
<p>
你注意到例子中,兩個標籤一個會造成換行,一個卻沒有
</p>

這是用來說明區塊標籤(block-level tags)同軸標籤(inline tags)的例子。

你注意到例子中,兩個標籤一個會造成換行,一個卻沒有

在上面的例子當中,<p> 標籤所形成的元素,會自成一個區塊(也就是會換行),<b> 標籤所形成的元素,並不會這樣,它僅在同一行裡作用。在 HTML 裡面,常看到的 block-level 的標籤有:

  • blockquote - 引用的區塊
  • center - 區塊置中
  • div - 通用的 block-level 標籤
  • h1 - 第一級標題
  • h2 - 第二級標題
  • h3 - 第三級標題
  • h4 - 第四級標題
  • h5 - 第五級標題
  • h6 - 第六級標題
  • hr - 水平線
  • p - 段落
  • pre - 保留文字格式

而 inline 的標籤有:

  • a - 錨點(超連結標籤)
  • br - 段行
  • iframe - 同軸框架(Inline frame)
  • img - 圖片
  • q - 簡短的引用
  • script - 用戶端 script
  • span - 通用的 inline 標籤
  • sub - 下標(subscript)
  • sup - 上標(superscript)

Cascading Style Sheet : CSS[編輯]

層疊式 (Cascading)?[編輯]

CSS不同定義方式的樣式,其優先級為:內聯指定的style > 通過id指定的style > 通過class指定的style > 通過html tag指定的style

故得名Cascading

語法[編輯]

@rule argument(s) {
	selector {
		property: argument(s);
		another-property: argument(s);
		property-the-third: argument(s);
		fourth-property: argument(s);
	}
}

規則(Rules)[編輯]

CSS規則以@符號為前綴。至少1個實參(argument)。例如:@charset定義了文檔字符集。@media設置了媒體的屬性,常為all, screen與print。@font定義了網頁字體。

註解符號 (Commenting)[編輯]

/* comment contents */

規則的形式 (Form of rules)[編輯]

格式化表單的位置(Where to place Style Sheet?)[編輯]

內部格式化表單(Internal Style Sheet)[編輯]

又稱內嵌式格式化表單(Embedded style sheet) 例如:

<style type="text/css">
/*CSS goes here...*/
</style>

其中 style 標籤內為放置 CSS 代碼的地方。

外部格式化表單(External Style Sheet)[編輯]

CSS 內可用 @import 語句,在一個 CSS 內引入其它 CSS:

@import url("mystyle.css");

在html文件中,引入樣式表的方法可用 link 標籤,如下所示。

<link rel="stylesheet" href="mystyle.css" type="text/css" />

外部樣式表的好處是令結構和表現完全分離。

內聯樣式表 (Inline Style Sheet)[編輯]

如下所示是一個使用內聯樣式表的示例。通過 style 屬性,可以為元素添加樣式。它無法做到結構與表現的分離,但在無法引入外部樣式表或 style 標籤時(如維基百科)時仍然有用。

<div style="color:red; background:yellow; font-weight:bold;">
這個段落會被顯示為黃底紅字粗體。
</div>

顯示為

這個段落會被顯示為黃底紅字粗體。

樣式的優先順序(Priority rules)[編輯]

繼承的問題(Inheritance)[編輯]

瀏覽器如何工作?( How browsers work?)[編輯]

選取項(Selector)[編輯]

選取項的語法(Syntax of selector)[編輯]

  • 一般選取項(Universal)
  • 型態選取項(Type)
  • 群組選取項(Grouped)
  • 子孫選取項(Descendant)
  • 子選取項(Child)
  • 比鄰選取項 (Adjacent)
  • 屬性選取項(Attribute):語法為E[Attribute="value"]. Attribute支持多種不同的匹配運算符,如 =, !=, ~=, ^= and $=.
  • 類別選取項(Class):語法為E.classname.
  • ID 選取項(ID):語法為E#IDname.
  • 擬元素選取項(Pseudo-element)
  • 擬類別選取項(Pseudo-classes):偽類是特殊的類,基於元素的狀態,使用:運算符。語法為E:pseudo-class. 常見的有:hover, :link and :visited

In CSS, a selector is the part of a rule that comes before the first "{", such as "p" in the rule " p { font-weight:bold; } ". A selector specifies to which elements a rule should apply, by naming the type of the element, such as "div", the class of the element, or the id of the element. Selectors can only be used in linked and embedded CSS, not in inlined one.

The following table provides an overview of selectors. The sections that follow discuss each type of selector in detail.

Overview of selectors
Type of Selector Example Selector Example Rule
type div div { margin:7px; padding:7px; }
class .important .important { font-weight:bold; color:red; }
id #onlyThisOne #onlyThisOne { font-family:courier; }
universal * * { color:green; }
pseudo-class a:link a:link { color:blue; }
pseudo-element p:first-letter p:first-letter { color:red }
descendant td span td span { font-weight:bold; }
grouped h1, h2, h3 h1, h2, h3 { text-align:center; }

Type[編輯]

These selectors match elements based on the name of their element type. The example above is using a type selector to make every instance of p have bold text. You can use the type selector with any element. Here are a few examples:

 div{
   margin:7px;
   padding:7px;
 }
 body{
   background-image:url("image.gif");
   font-size:.9em;
 }

Class[編輯]

The class selector works with (X)HTML documents. It does not work with general XML documents unless the User Agent (web browser or other document reader) can determine which attribute is the class attribute for elements in the document. In (X)HTML documents class is defined to be the class attribute.

HTML permits the class attribute for all elements that are valid in the body section of an HTML document, including the body element itself. This allows the web designer to distinguish between elements of the same type used in different contexts. For example, the designer could differentiate between HTML elements and HTML attributes in a technical document on HTML.

 The <code class="attribute">alt</code> attribute of the <code class="element">img</code>

The class selector allows you to apply CSS rules based on the class of an element.

The first way is to make a global class, which can be added to any element. You do that like this:

 .important {
   font-weight:bold; color:red;
 }

That will make any element that has the class of important be bold and red.

Sample HTML:

 <p class="important">Important Text</p>
 <p>Ordinary Text</p>
 <div class="important">Important Footnote</div>

Example rendering: Template:CSS:rendered The second way is to attach it to a type selector. The rule is only applied to elements of the given type which are of the specified class.

CSS rule:

 p.right {
   float:right;
   clear:both
 }

Sample HTML:

 <p class="right">Righty Righty</p>

Example rendering (look right): Template:CSS:rendered

An element may belong to more than one class, e.g.

 <p class="right">This paragraph belongs to the class 'right'.</p>
 <p class="important">This paragraph belongs to the class 'important'.</p>
 <p class="right important">This paragraph belongs to both classes.</p>

Example rendering: Template:CSS:rendered

Class names should describe the purpose of the class, e.g. important, not the effect of the class, e.g. red. If you name classes by effect and then change your mind about the appearance you want you can end up with rules like:

 .red {color:blue}

If necessary multiple class selectors can be used to select only elements that belong to all the specified classes, e.g.

p.important.right {
  border: 2px dashed #666
}

Example rendering: Template:CSS:rendered

Internet Explorer 6 bug[編輯]

Multiple class selectors as shown in the previous example do not work in Internet Explorer version 6. It treats the selector as though only the last class selector was present, e.g. p.important.right is treated as equivalent to p.right.

Previous example rendered in Internet Explorer 6: Template:CSS:rendered

The complete HTML document and CSS stylesheet to test this bug are given below.

classBug.css:

.important {
  font-weight:bold; color:red;
}

p.right {
  float:right;
  clear:both
}

p.important.right {
  border: 2px dashed #666
}

classBug.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
    <title>IE6 multiple class bug</title>
    <link rel="stylesheet" type="text/css" href="classBug.css">
  </head>
  <body>
    <p class="right">This paragraph belongs to the class 'right'.</p>
    <p class="important">This paragraph belongs to the class 'important'.</p>
    <p class="right important">This paragraph belongs to both classes.</p>
  </body>
</html>

ID[編輯]

The ID selector works with (X)HTML documents. It does not work with general XML documents unless the User Agent (web browser or other document reader) can determine which attribute is the ID attribute for elements in the document. In (X)HTML documents id is defined to be the ID attribute.

The ID selector is used to select a single item on a page. It matches the id attribute of an element. Two elements on the same page must not have the same id attribute.

However, several different webpages within the same site might reuse an id. It is commonly used for the major divisions of a page, e.g. mainContent, navigationBar. It is often used in conjunction with descendant selectors, e.g. to style all list items in the navigation bar whilst not affecting lists in the main content.

CSS rule:

 #onlyThisOne {
   font-family:courier;
 }

Sample HTML:

 <p id="onlyThisOne">Courier</p>

Example rendering: Template:CSS:rendered

Universal[編輯]

These selectors apply a style to all the items on the page. For example to make all the text on the page green use the rule:

 * {
   color:green;
 }

Pseudo-Classes[編輯]

Pseudo-classes and pseudo-elements allow elements to be formatted on the basis of information other than the position of the element in the document tree. Pseudo-class and pseudo-element selectors are prefixed by a colon, :, in CSS1 and CSS2.1. In CSS3 pseudo-elements are prefixed by ::.

CSS level 1 defines three pseudo-classes:

link
unvisited links
visited
visited links
active
active links

These can only be applied to the anchor (a) elements.

 a:link{
   color:blue;
 }

 a:visited{
   color:purple;
 }

 a:active{
   color:red;
 }

CSS level 2.1 introduces several additional pseudo-classes, including hover. hover can be used to create rollover effects without resorting to Javascript. CSS2.1 also allows active to apply to any element that can be active, e.g. a button.

The additional CSS 2.1 pseudo-classes are:

first-child
matches any element that is the first child of its parent.
lang(...)
matches the language of the element. The language may be set directly on the element or inherited from an ancestor element. A valid language code must appear in the parentheses, e.g. en for any variant of English or en-gb for British English.
hover
applies whilst the user hovers over the element with the mouse.
active
now allowed on any element capable of being 'active' – applies whilst the element is active.
focus
applies whilst the element has the keyboard focus.

Although CSS2.1 allows hover on any element Internet Explorer only allows it on anchor elements.

Examples:

  p:first-child {
    font-size:120%
  }

  span:lang(la) { /* render Latin text, e.g. per se, in italics */
    font-style:italic
  }

  li:hover { /* doesn't work in Internet Explorer */
    background-color:blue
  }

  input:active {
    color:red
  }

  input:focus {
    background-color:yellow
  }

An example of the first-child pseudo-class is given at the end of the descendant selector section.

Multiple pseudo-classes may be specified, e.g. to warn the user that they are hovering over a link they have already visited:

a:visited:hover {
  background-color:red
}

Care should be taken over the order of rules using pseudo-classes. For example, if you want visited links to be green except whilst the user hovers over them, when they should be yellow, the rules must be in the following order:

 a:visited{
   color:green
 }

 a:hover{
   color:yellow
 }

If the rules were reversed the cascade would mean that the visited color would take precedence over the hover color. Visited links would remain green even when the user hovered over them.

Pseudo-Elements[編輯]

Pseudo-classes and pseudo-elements allow elements to be formatted on the basis of information other than the position of the element in the document tree. Pseudo-class and pseudo-element selectors are prefixed by a colon, :, in CSS1 and CSS2.1. In CSS3 pseudo-elements are prefixed by ::.

CSS level 1 defines two pseudo-elements, first-letter and first-line, which select the first letter and line of the rendered element respectively. These can be used to apply typographic effects, e.g. to create a drop cap at the start of a paragraph.

 p:first-letter { color:red }

Only one pseudo-element selector may be used and it must be the last part of the selector chain. The first-line selector may only be applied to block-level elements, inline-blocks, table captions and table cells.

CSS2.1 adds two more pseudo-elements, before and after.

Starting in CSS3 pseudo-elements are prefixed with :: rather than :.

Simple selectors[編輯]

The selectors described above (type, class, ID, universal, pseudo-class and pseudo-element) are all examples of simple selectors. The full syntax for a simple selector is:

  • a type selector or the universal selector
  • zero, one or more class, ID and pseudo-class selectors (CSS2.1 also allows attribute selectors)
  • zero or one pseudo-element selectors

The following are all examples of simple selectors:

  p
  p.important
  p#navigation
  a:link
  p:first-line
  a:visited#homePage.menu2:first-letter
  *
  *#footer
  *.content.abstract
  *#mainArticle:first-letter

As a shorthand notation the universal selector, *, may be omitted if it is not the only component of the simple selector. For example, #footer is equivalent to *#footer and :first-line is equivalent to *:first-line.

Combining simple selectors: Simple selectors can be combined to take the context of the element in to account. For example you might want to apply a rule only to list elements in the navigation bar.

Descendant[編輯]

Descendant selectors allow you to apply style to elements that are nested within another specified element. For example, you could have every span element inside of every p element be bold. The span can be a child element of the p element, or a grandchild, or a great-grandchild, etc.

CSS rule:

 p span{
   font-weight:bold;
 }

Sample HTML:

 <p>Start of paragraph. <span>This span is bold.</span> Rest of paragraph.</p>
 <div>Start of division. <span>This span is normal.</span> Rest of division.</div>

Example rendering: Template:CSS:rendered

The next example changes the color of visited links in the navigation section. Visited links in other parts of the document would be unaffected.

CSS rule:

 ul#navigation a:visited {
   color:red
 }

Sample HTML:

 <ul id="navigation">
   <li><a href="HomePage">Home</a></li>
   <li><a href="AnotherPage">A page you haven't visited yet.</a></li>
 </ul>

Example rendering: Template:CSS:rendered

An example using the first-child selector.

CSS rule:

 div.content strong:first-child {
   color:red
 }

Sample HTML:

 <div class="content">
   <p>Some <em>emphasized</em> text and some <strong>strongly emphasized</strong> text.</p>
   <p>Some <strong>strongly emphasized</strong> text and some <em>emphasized</em> text.</p>
 </div>

Example rendering: Template:CSS:rendered

Two important points to note:

  • an element is still the first child if it is preceded by text, so the em element in the first paragraph and the strong element in the second paragraph are the first children of their respective paragraphs.
  • a rule is only applied to an element if it matches all parts of the selector. The strong element in the first paragraph is a second child, so it is not matched by the strong:first-child selector.

Grouping selectors[編輯]

Selectors can be grouped into comma separated lists.

h1, h2, h3 { text-align:center; }

is equivalent to

h1 { text-align:center; }
h2 { text-align:center; }
h3 { text-align:center; }

An element may be selected by more than one rule:

 h1, h2, h3, h4, h5, h6 { color: white; background-color: red; }
 h1 { color: yellow; }

All headings will have a red background. Level 2–6 headings will have white text. Level 1 headings will have yellow text.

The order of the rules is significant. In the following example all headings would have white text.

 h1 { color: yellow; } 
 h1, h2, h3, h4, h5, h6 { color: white; background-color: red; }

When more than one rule applies to an element the cascade is used to determine the resulting style applied to the element.

Later CSS versions[編輯]

Additional selectors in CSS 2.1:

  • Child selectors
  • Adjacent sibling selectors
  • Attribute selectors
  • More pseudo-classes and pseudo-elements.

Additional selectors in CSS 3:

  • More sibling selectors
  • More attribute selectors
  • More pseudo-classes and pseudo-elements.

一般選取項(Universal)[編輯]

所謂的廣域選擇器指的是以星號(*)的方式來決定選取的範圍,實際上,*通常代表的是不特定範圍的選取,因此在CSS中以*設定廣域選取器時,將交由瀏覽器來自行決定範圍

     * { color: #FF0000; }

型態選取項(Type)[編輯]

型態選擇器會是大家最常用到的選擇器之一,所指定的型態名稱會找尋文件中相同的實體元素配合,實際上,我們所使用的『標籤』語法就是一種型態選擇器。

     body { 
       background-color: #999999;
       color: #FFFFFF;
    }

如果有一樣的樣式想要同時作用在好幾個標籤上的話,可以使用逗號(,)作分隔。

     a, p, h1 {
       font-size: 10 pt;
       color: #0000AA;
    }

群組選取項(Grouped)[編輯]

子孫選取項(Descendant)[編輯]

子孫選擇器的形式為空格,水平制表符,換行等任何 ASCII 空白字符。例如在下面示例里,給 class 為 test 的任何 span 子元素設置 consolas 的字體:

    .test span {
       font-family:consolas;
    }

子選取項(Child)[編輯]

比鄰選取項 (Adjacent)[編輯]

屬性選取項(Attribute)[編輯]

類別選取項(Class)[編輯]

ID 選取項(ID)[編輯]

在網頁中指定元件的id屬性之後,就可以使用井字號(#)來設定ID選擇器,在語法中ID選擇器前可以指定網頁元素,但在實際使用時,因為建議網頁中不要有重複ID的元素,因此就沒有指定的必要了。舉例來說,有個識別選擇器p#example,然後在網頁中有兩個物件<p id="example">以及<table id="example">,則只有前者會起作用,但如果選擇器的名稱為#example,擇兩者均會起作用。

    #example {
       font-size: 10 pt;
       color: #0000AA;
    }

擬元素選取項(Pseudo-element)[編輯]

偽元素選擇器指的是一種以雙冒號 (::) ,或有時也使用單冒號分隔開,後連所選取的偽元素的選擇器。是於CSS裡製造出來的假HTML元素。[2]目前共有 5 種

 :after /*或*/ ::after
 :before /*或*/ ::before
 :first-letter /*或*/ ::first-letter
 :first-line /*或*/ ::first-line
 ::selection

擬類別選取項(Pseudo-classes)[編輯]

方框的基本介紹 (Introduce to Box)[編輯]

在CSS中,瀏覽器將每個標籤用Box方式呈現,並分為行內Box以及區塊Box。 每個Box區塊使用Box模式(Box model)呈現,以外距、邊線、內距、內容四種屬性(由外而內)的順序組成一個Box。

幾個特別的性質(properties)[編輯]

注意[編輯]

有時一個網頁的作者會濫用CSS。有些習慣於只使用HTML的作者可能會忽視CSS提供的可能性。比如有些習慣於使用HTML的顯示元素的作者可能會在所有的HTML文件內加入CSS樣式。這比將HTML顯示和結構指令混在一起是一個進步,但它還是有許多同樣的缺點,而且維護時的工作量與混合使用差不多。

CSS與其他程式語言有著一些共同的陷阱。尤其在命名CSS的id和class時,CSS作者常選擇一個比較有說明性的名稱而使用顯示特徵作為它們的名稱。比如一個作者可能使用「big-red」來命名一個用大紅字體的突出顯示的字節。在當時,對作者來說這個名稱可能是很直覺的,但假如後來作者決定突出顯示的字節應該使用綠色,而不是紅色的話,他的命名就有毛病了。在上面這個例子中,一個更合適的名稱應該是「emphasized」(強調),它描寫的是這個「class」的用意,而不是它是如何被顯示的。

另一個毛病是未記錄的、未定義的和往往會被遺忘的名稱。一個網頁作者可能會選擇上百個名稱。名稱如footer、footnote或者explanation、note、info、more可能是指同一回事。這樣許多重複的名稱就出現了。有時一個複雜的網站的設計者可能會結合HTML和CSS來解決這個問題,但這樣一來他又把內容與顯示黏有一起了,而且這樣一來這個文件就只適合於某一媒體了。(外部樣式表的一個大優點就是它是跨媒體的,因為不同的樣式可以特別適用於不同的輸出媒體。)

HTML本身的複雜性是另一個困難處。雖然大部分使用CSS的文件比傳統的使用表格的文件要整潔,但過分使用class和過於細膩的結構層次同樣使HTML變得繁庸。此外有的作者過分使用div元素。

另一個陷阱是為了解決常見的瀏覽器錯誤而引入特別的CSS樣式,這些樣式當然是為了除錯而引入的,但它們使一個CSS文件的維護性能降低,有時這樣的CSS文件的維護量甚至比過去的HTML文件的維護量還大。常見的特別CSS樣式多是針對Internet Explorer(尤其IE 6、IE 7等舊版本)的顯示錯誤而額外編寫。

有時一個作者可能會過度地使用CSS來決定他的文件應該怎樣被顯示,如:一個作者會決定隱藏超連結底下的橫線,這很容易做到,但對瀏覽者來說這可能會帶來不便。

有些新的CSS3樣式尚未成為標準,因此在使用時需要加上前綴(Prefix),使其可以在採用不同排版引擎的瀏覽器中正確顯示。但於Internet Explorer 10 Release Preview起, transform, transition, animation和gradient漸變等屬性均可不加前綴。[3][4]例如使用transition時,需要額外撰寫四行編碼:

-webkit-transition: height 0.2s linear; /* 針對使用WebKit排版引擎的瀏覽器,如Google Chrome、Apple Safari */
-moz-transition: height 0.2s linear; /* 針對使用Gecko排版引擎的瀏覽器,如Mozilla Firefox */
-o-transition: height 0.2s linear; /* 針對使用Presto排版引擎的瀏覽器,如Opera */
-ms-transition: height 0.2s linear; /* MSIE,但Release Preview起可以不用前缀*/
transition: height 0.2s linear; /* CSS3標準,放最後*/

CSS的大小因此增大,到這些CSS樣式不需前綴時,又需要額外花時間把它們刪除。

參考資料[編輯]

文內引用[編輯]

  1. 1.0 1.1 見莫振傑《HTML與CSS進階教程》第172頁(位於第11章「CSS圖形」第3節「圓」)。
  2. w:CSS
  3. Unprefixed CSS3 Gradients in IE10
  4. Moving the Stable Web Forward in IE10 Release Preview

補充來源[編輯]

  • 莫振傑. HTML與CSS進階教程 1. 中國北京: 人民郵電出版社. 2016年. ISBN 978-7-115-43295-7 (中文(中國大陸)). 

其它資料[編輯]

  • Cascading Style Sheets, Level 2
  • Code Style Media monitor
  • CSS - Cascading Style Sheets
  • CSS Bugs and Workarounds
  • CSS Panic Guide
  • CSS Reference Table
  • css-bug info
  • glish.com CSS layout techniques
  • glish.com
  • Guide to Cascading Style Sheets
  • Little Boxes
  • Pixellated! DesignDevelopDeliver
  • RichInStyle.com - Style sheet master class part 1 - writing perfect style sheets
  • Tableless layout HOWTO
  • The Layout Reservoir - BlueRobot
  • Web Nouveau Table-less sites list-1
  • Webmonkey Reference Stylesheets Guide
  • Working with CSS - Introduction to CSS Layout
Wikipedia-logo.png
維基百科中的相關條目: