XML - 資料交換管理/CSS

XML - 資料交換管理

章節

附錄

練習

相關主題

參與進來

上一章	下一章
← XLink	XSLT和樣式表 →

學習目標

完成本章後，對於CSS，您將能夠

瞭解使用CSS的好處
瞭解CSS的侷限性，以便您能夠為您的文件找到最佳解決方案
瞭解如何在XML文件上實現和使用CSS

簡介

CSS（層疊樣式表）是一種描述結構化文件的呈現形式的語言。

基於XML或HTML的文件沒有固定的樣式，它包含沒有樣式資訊的結構化文字。文件在紙上列印和在瀏覽器或手機上檢視時的外觀由樣式表決定。使用CSS是使文件看起來一致且易於更新的好方法，維基百科就是一個很好的例子。

CSS的歷史

樣式表自1990年代初HTML誕生以來就一直以某種形式存在。各種瀏覽器都包含自己的樣式語言，可用於自定義網頁文件的外觀。最初，樣式錶針對的是終端使用者；HTML的早期版本沒有提供許多用於呈現屬性的功能，因此網頁文件的外觀通常取決於使用者。

然而，隨著HTML語言的發展，它包含了更多樣化的樣式功能，以滿足網頁開發人員的需求。隨著這些功能的出現，樣式表變得不那麼重要，而用於定義樣式屬性的外部語言直到CSS的開發才被廣泛接受。

層疊樣式表的概念最初由Håkon Wium Lie於1994年提出。Bert Bos當時正在開發一款名為Argo的瀏覽器，該瀏覽器使用自己的樣式表；兩人決定共同開發CSS。

已經提出了許多其他樣式表語言，但CSS是第一個包含“層疊”概念的語言——文件的樣式可以從多個“樣式表”繼承。這允許使用者的首選樣式在某些區域覆蓋站點作者指定的樣式，而在其他區域繼承或“層疊”作者的樣式。以這種方式層疊的能力為使用者和站點作者提供了額外的靈活性和控制；它允許混合樣式偏好。

Håkon的提議於1994年在芝加哥舉行的“Mosaic and the Web”會議上提出，並在1995年與Bert Bos再次提出。大約在這個時候，全球資訊網聯盟正在成立；W3C 對 CSS 的開發產生了興趣，併為此組織了一個研討會。Håkon和Bert是該專案的核心技術人員，微軟的Thomas Reardon等其他成員也參與其中。到1996年底，CSS幾乎準備就緒，即將正式釋出。CSS 1 級建議於 1996 年 12 月釋出。

1997年初，CSS在W3C內被分配了一個自己的工作組。該小組開始解決 CSS 1 級未解決的問題，最終產生了 CSS 2 級，該級別於 1998 年 5 月作為正式建議釋出。截至 2005 年，CSS 3 級仍在開發中。

為什麼要使用CSS？

更整潔的程式碼

管理設計元素的大量HTML標籤通常會掩蓋頁面的內容，使程式碼更難閱讀和維護。使用CSS，頁面的內容與設計分離，使HTML、XHTML和XML等格式的內容製作儘可能容易。

頁面載入速度更快

非CSS設計通常比CSS設計的網站包含更多程式碼。

在非CSS設計中，有關設計的資訊會在訪問者訪問每個新頁面時重新載入。此外，設計的細微之處會很尷尬地執行。例如，定義網頁間距的常用方法是在表格中使用空白GIF影像。

使用CSS使內容和設計分離，因此需要的程式碼更少。CSS檔案在每次會話中只加載一次，並儲存在使用者的本地快取中。所有有關維度的資訊都在此樣式表中定義，從而使空白GIF影像等笨拙的結構變得不必要。

儘管越來越多的網際網路使用者擁有寬頻，但網頁的大小對於那些只能使用撥號連線的使用者來說可能很重要。假設一個使用撥號上網的使用者訪問了某家公司的網站，而這位訪問者遇到了很長的載入時間。訪問者很可能會停止訪問，或者認為這家公司“很慢”。這樣，看似微小的差異可能會帶來額外的收入。

此外，頻寬不是免費的，大多數網站託管公司都會限制頻寬使用量。事實上，許多主機根據頻寬使用情況收費，因此更少的程式碼還可以降低成本。

重新設計變得微不足道

如果正確使用，CSS是一個非常強大的工具，可以讓網站架構師完全控制網站的呈現方式。它是一種記號法，其中設計規則受到管理。對於需要對每種型別的元素（例如標題、副標題、程式碼片段或段落）保持一致外觀的大型網站來說，這一點非常有用。

例如，假設一家公司擁有一個包含 1,200 個頁面的網站，該網站耗費了幾個月的時間才完成。然後，該公司進行了品牌重塑，因此需要將字型、背景、超連結的樣式等等更新為新的企業設計。如果該網站使用CSS進行了正確的設計，那麼更改只需編輯單個CSS檔案（假設它是外部樣式表）的相應行即可。如果沒有使用CSS，則管理外觀的程式碼將儲存在每個頁面中。在這種情況下，為了更新設計，必須單獨更新每個檔案。

優雅降級

可訪問性

視力障礙者或使用特殊網頁瀏覽器的使用者，例如盲人，可能會更喜歡使用 CSS 設計的網站，而不是沒有使用 CSS 設計的網站。因為 CSS 允許您將閱讀順序與視覺佈局分開定義，這使得特殊網頁瀏覽器更容易閱讀頁面。請記住，任何戴眼鏡或隱形眼鏡的人都可以被認為是視力障礙者。

許多設計師將字型大小鎖定在畫素中，這會阻止使用者更改字型大小。良好的 CSS 設計允許使用者隨意增加或減少字型大小，從而使頁面更易於使用。大量的網民喜歡使用 300% 或更高的放大倍數。

為使用者提供更改字型大小的機會對普通使用者沒有任何影響，但對視力障礙者來說可能會有所不同。問問自己：網站是為誰製作的？訪客還是設計師？

使用 CSS 設計的網站在 PDA 和手機中使用的網頁瀏覽器中比基於表格的設計顯示效果更好。使用手機瀏覽的趨勢可能會持續增長。基於表格的設計將使這些使用者無法訪問網頁。

請謹慎使用您的 CSS 設計。濫用絕對定位和絕對尺寸而不是相對尺寸可能會使您的網頁更難訪問，而不是更容易訪問。好的表格設計比糟糕的 CSS 設計更好。

在搜尋引擎中獲得更好的結果

過度使用表格會混淆搜尋引擎，它們實際上可能會在分離內容和程式碼方面遇到問題。搜尋引擎機器人從頁面的頂部開始讀取，它們希望儘快找出網頁的相關性。同樣，更少的程式碼將使搜尋引擎更容易找到相關的程式碼，並且可能會使您的網頁排名更高。

CSS 的缺點

使用 CSS 進行樣式設定幾乎沒有缺點。但是，一些瀏覽器，尤其是舊瀏覽器，有時會錯誤地顯示頁面。當我收集本章的資訊時，我發現許多專家認為使用 CSS 格式化 XML 不是網路的未來。主要觀點是 XSL 將成為新的標準。因此，請確保您再次通讀本書的前一章。XSL 和 CSS 的格式化部分將非常相似。例如，您可以在 XSL 中使用所有 CSS1 和 CSS2 屬性和值，其含義與 CSS 中相同。

CSS 等級

第一個成為正式 W3C 建議的 CSS 規範是 CSS 1 級，於 1996 年 12 月釋出。其功能包括支援

字型|字型屬性，如字型和強調
文字、背景和其他元素的顏色
文字屬性，如單詞、字母和文字行之間的間距
對齊（排版）|文字、影像、表格和其他元素的對齊
大多數元素的邊距、邊框、填充和定位
屬性組的唯一標識和通用分類

W3C 維護著 CSS1 建議。

CSS 2 級由 W3C 開發，並於 1998 年 5 月釋出為建議。CSS2 是 CSS1 的超集，包含許多新功能，其中包括元素的絕對、相對和固定定位，媒體型別的概念，支援聽覺樣式表和雙向文字，以及新的字型屬性，如陰影。W3C 維護著 CSS2 建議。

CSS 2 級修訂版 1 或 CSS 2.1 修正了 CSS2 中的錯誤，刪除了支援較差的功能，並將已實施的瀏覽器擴充套件新增到規範中。它目前是候選建議。

CSS 3 級目前正在開發中。W3C 維護著一個 CSS3 進度報告。

CSS 語法和屬性

關於選擇器的部分已移至 CSS 程式設計/選擇器。
關於顏色的部分已移至 CSS 程式設計/顏色。
關於文字的部分已移至 CSS 程式設計/字型和文字。
關於邊框的部分已移至 CSS 程式設計/盒子模型。
關於定位的部分已移至 CSS 程式設計/定位。

以下部分包含一些最常見的 CSS 屬性列表。完整的列表可以在此處找到。在 XML 文件中使用 CSS 的語法與在 HTML 中的語法相同。不同之處在於您將 CSS 檔案連結到 XML 文件的方式。為此，您必須在 XML 文件的根元素之前編寫 <?xml-stylesheet href="X.css" type="text/css"?>，其中 X.css 當然是指 CSS 檔案的名稱。

如本章前面所述，CSS 是一組規則，用於確定文件中的元素將如何顯示。規則包含兩個部分：選擇器和一個或多個由大括號（花括號）包圍的宣告組

selector { declaration; ...}

選擇器通常是您要設定樣式的標籤。這是一個包含單個宣告的簡單規則的示例

h1 { color: red; }

結果：文件中的所有 h1 元素都以紅色文字顏色顯示。

通用語法

規則通常按以下方式定義

selector { declaration; ...}

宣告的格式如下

property: value;

請記住，一個規則中可以包含多個宣告。一個常見的錯誤是將冒號（用於分隔宣告的屬性和值）和分號（用於分隔宣告）混淆。選擇器選擇規則適用的元素，宣告設定所選元素不同屬性的值。

回到我們的示例

h1 { color: red; }

在我們的示例中

選擇器是元素 h1

宣告 color: red

屬性 color 獲取值 red

可以將多個宣告寫入單行或多行，因為空白會摺疊

h1 { color:red; background-color:white; }

或者

h1 {

color:red;

background-color:white;

}

有關 CSS 定義的屬性的詳細資訊，請參見 CSS 程式設計#CSS1 屬性。

總結

層疊樣式表 (CSS) 用於網頁，以定義儲存在 HTML 或 XML 中的資訊的檢視。雖然 XML 和 HTML 建立和保留文件的結構，但 CSS 用於定義文件中物件的顯示和放置以及其內容。所有這些資訊都儲存在一個單獨的檔案中，即 .css 檔案中。在 CSS 檔案中定義了文字大小、背景顏色、文字型別等。圖片和其他動畫的放置也定義在 css 檔案中。如果正確使用 CSS，它將使網頁更易於建立，更重要的是，更易於維護。因為您只需要更改 css 檔案即可使整個網站發生變化。

檔案：Csszengarden nocss.png

沒有 CSS 的 CSS Zen Garden

檔案：Csszengarden1 css.png

帶有 CSS 的 Zen Garden

參考資料和有用連結

CSS 屬性參考

參考資料

http://no.wikipedia.org/ - 維基的挪威語版本
http://en.wikipedia.org/wiki/Cascading_Style_Sheets

有用連結

W3C 有一個 CSS 驗證器，位於 http://jigsaw.w3.org/css-validator/
w3cs 關於 css 的頁面
HTMLDog CSS 初學者指南
CSS Zen Garden -- 看看 CSS 的可能性
層疊樣式表參考 -- L. Carlson，明尼蘇達大學德盧斯分校。
網頁設計更新 - 一個純文字電子郵件摘要新聞稿。它通常每週釋出一次，並有一個關於 CSS 的部分。所有網頁設計師和開發人員都歡迎加入。
- 層疊樣式表書籍

練習

練習 1

使用下面提供的 CSS 檔案，建立一個作為 XML 文件的書籍價格列表。<?xml version="1.0"?> Exercise1.css

<book> Lord of the rings</book> book{
  display: block;
  background-color: transparent;
  margin: 20px 10px 10px 200px;
}
<isbn>1.000.56439 </isbn> isbn{
  display: block;
  font: 12pt/15pt georgia, serif;
}
<title> The Two Towers </title> title {
  display: block;
  font: 14pt/18pt verdana, sans-serif;
}
<author> J.R.R. Tolkien </author> author {
  display: block;
  font: italic 12pt/15pt georgia, serif;
}
<publisher> Penguin </author> author {
  display: block;
  font: 12pt/15pt georgia, serif;
}
<price> 48 EUR </price> price{
  display: block;
  font: bold 12pt/15pt georgia, serif;
  color: #ff0000;
  background-color: transparent;
}

練習 2

建立一個個人主頁，介紹你自己。

頁面應該包含一個頁首、一個頁尾和一個作為連結列表的導航。

解決方案

CSS 挑戰

複製並貼上 HTML，然後接受挑戰，建立一個與圖片匹配的樣式表！