原始版本: http://www.w3.org/Style/Examples/011/firstcss.en.html

翻譯： web practice

聲明：原始版本（英文版）是唯一的官方版本。中文（繁體）版本是根據W3C網站上的文件翻譯的，可能存在某些錯誤。翻譯不保證譯文完全準確。請您自己承擔風險。


CSS 教程
從 HTML + CSS開始

Contents

這個簡短的教程是提供給想要開始使用CSS的，又以前從來沒有編寫過CSS樣式表的人。

它沒有太多的介紹CSS，僅僅介紹瞭如何創建一個HTML文件、一個CSS文件，又如何讓它們一起工作。之後，你可以參考其它教程裡的任何一個，再來給HTML和CSS文件添加更多功能。或者你可以切換到使用專用的HTML 或 CSS 編輯器，幫助你設置複雜的網站。

在教程的最後，你會製作出一個HTML文件，如下所示：

[Link to the final HTML page]

生成的HTML頁面，有顏色和佈局，都是使用CSS製作的。

請注意，我並沒有說這是好看的。☺

Alert! Advanced: 像這樣的區段都是可自選的。示例中包含了HTML和CSS代碼一些額外的說明。標記“alert!” 在開端表明這是比文本中其它的更高級的素材。

第一步：編寫HTML

對於這個教程，我建議你只使用最簡單的工具。例如：Notepad（在windows裡），TextEdit （在Mac上）或是KEdit （在KDE裡）就可以了。一旦你了解這個原理，你就會想要切換到更高級的工具，甚至是商業程序，如Style Master，Dreamweaver或GoLive。但對於你的第一個CSS樣式表，最好不要因為使用太多的高級功能而分心。

不要使用文字處理器，如Microsoft Word或OpenOffice。它們通常製作出網絡瀏覽器不能讀取文件。 對於HTML和CSS，我們需要簡單的純文本文件.

第一步打開你的文本編輯器（Notepad，TextEdit，KEdit，或是任何你喜歡的文本編輯器），在一個空的窗口開始，輸入以下的內容： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>我的第一個樣式頁面</title>
</head>

<body>

<!-- 目錄 -->
<ul class="navbar">
  <li><a href="index.html">首頁</a>
  <li><a href="musings.html">連接1</a>
  <li><a href="town.html">連接2</a>
  <li><a href="links.html">連接3</a>
</ul>

<!-- 主要內容 -->

<h1>我的第一個樣式頁面</h1>

<p>歡迎來到我的樣式頁面!

<p>這裡沒有圖片, 但至少有CSS樣式. 有連接, 但只是為了舉例和演示, 並不能帶你到任何地方…

<p>這只是個例子, 好像沒什麼好寫.

<!-- 簽名和日期 -->

<address>2004年4月5日製作</address>

</body>
</html>

事實上，你不需要輸入它：你可以從這個網頁複製並粘貼進編輯器。

（如果你在Mac 上使用TextEdit，不要忘記告訴TextEdit文本確實是純文本，通過轉到格式菜單並選擇“Make plain text”。)

Alert! Advanced: 上面HTML文件的第一行告訴瀏覽器HTML的類型（DOCTYPE 意思是文檔類型）。在這個案例中，它是HTML 4.01 版本。

在<和>裡的單詞叫標籤，像你看能到的，這文檔包含<html> 和 </html> 標籤。在<head> 和</head> 間有一個位置是給沒有顯示在屏幕上各個種類的信息的。目前為止，它包含文檔的標題，但之後我們也會在這裡加上CSS樣式表。

<body>是實際文檔文本所在之處。原則上，除了在<!-- 和-->裡作為對它們本身註解的內容不會顯示，這裡的所有內容都會被顯示。瀏覽器會忽略它。

在該示例中的標籤， <ul> 介紹了一個“無次序列表”，例如：條目沒有編號的列表。 <li> 是“列表條目”的開始。<p> 是“段”。還有<a> 是創建超鏈接的“錨点”。

the HTML source shown inside KEdit

編輯器展示了HTML源。

Alert! Advanced:如果你想知道在<…>裡的名字是什麼意思,一個好的開始地方是著手從HTML開始。但是只有一些關於我們示例HTML頁面的單詞。

注意，我沒有關閉“li”和“p”元素。在HTML裡（但不是在XHTML 裡），允許忽略</li>和</p>標籤，這就是我在這裡做的，為了使得文本稍微容易讀一點。但是你可以加上它們，如果你喜歡的話。

讓我們假設這是要成為一個有許多類似頁面的網站上的一個頁面。對當前網頁來說很普通，此頁面有一個菜單，在超鏈接站點，一些獨特的內容和簽名上鍊接到其它頁面上去。

現在從文件菜單裡選定“另存為……”，導入你想把它放入的一個目錄/文件夾裡（桌面也可以），再把文件存為“mypage.html”。先不要關掉編輯器，我們還會需要它。

（如果你在Mac OS X 10.4 前的版本上使用TextEdit，你會看到一個選項“不要附加保存.txt 擴展名”的存盤對話框。選定那個選項，因為名字“mypage.html”已經包含了一個擴展名。更新的版本的TextEdit會讓.html自動擴展。）

接下來，在瀏覽器裡打開文件。你可以按照下面的做：用你的文件管理器（Windows Explorer，Finder或Konqueror ）找到文件，再點擊或雙擊“mypage.html”文件。它就會在你默認的網絡瀏覽器裡打開。 （如果不可以，就打開你的瀏覽器，把文件拖進來。）

像你看到的那樣，頁面看起來非常沉悶……

第二步，添加一些顏色

你可能看到一些白色背景裡的黑色文本，但它是取決於瀏覽器如何配置的。所以，我們能做的讓頁面更加時新的一件簡單的事情就是添加一些顏色。（讓瀏覽器開著，我們之後會再用到它。）

我們從嵌在HTML 文件裡的樣式表開始。然後，我們會把HTML和CSS 放進單獨的文件裡。單獨的文件很好，因為相對於復合的HTML文件，它讓相同的樣式表使用起來更簡單：你只需要編寫樣式表一遍。但是對於該步驟，我們僅僅保持所有的內容在一個文件裡。

我們需要添加一個<style>元素到HTML文件中。樣式表會在此元素裡。所以回到編輯器窗口，再在HTML文件的抬頭部分添加下面的五行。要添加的行用紅色的顯示出來了。 (lines 5 to 9) 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>我的第一個樣式頁面</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]

第一行說的是，這是一個樣式表，並且它是用CSS (“text/css”)編寫的。第二行說的是，我們為“body” 元素添加了樣式。第三行設定了文本的顏色是紫色，還有接下来一行設定了背景是一種泛綠的黃色。

Alert! Advanced:CSS裡的樣式表是由規則組成。每條規則有三個部分：

  1. 選擇器（在示例裡：“body”），告訴瀏覽器文檔的哪個部分受規則影響了；
  2. 屬性（在示例裡：'color''和'background-color'都是屬性），規定了佈局的什麼方面被設置了；
  3. 還有值（'purple'和'#d8da3d' ）給出了樣式屬性的值。

我們要設置兩個屬性，因此我們要做兩個單獨的規則： 

body { color: purple }
body { background-color: #d8da3d }

但是因為兩個規則都都會影響主體，我們只要輸入一次“body ”，再把屬性和值放在一起。更多的選項，請看第2章Lie & Bos。

主體元素的背景也就是整個文檔的背景。我們沒有把任何明確的背景給任何其它的元素（p，li，address…… ），所以默認它們會沒有（或，會是透明的）。 'color '屬性設置body 元素文本的顏色，但是主體內的其它元素都要沿襲那種顏色，除非明確的覆蓋。 （我們之後會添加其它顏色。）

現在保存文件（從菜單裡選用“保存”）再回到瀏覽窗口。如果你按“刷新”鍵，顯示就會從“沉悶”的頁面變成有色彩（雖然還是相當沉悶）的頁面。除了頂端的鏈接列表，文本應該是帶有泛綠的黃色背景的紫色文本。

Screenshot of the colored page in Konqueror

一個瀏覽器在添加了一些顏色後是如何顯示頁面的。

Alert! Advanced: 在CSS裡顏色有多種方法來規定。此示例展示了它們的兩種方法：通過名稱（“purple” ）和通過十六進制代碼（“#d8da3d” ）。顏色的名稱大約有140種，而十六進制代碼有超過16，000，000種顏色。 添加一種樣式表解釋了更多關於代碼的詳情。

第三步：添加字體

另外一件容易做的事情是，為頁面多種元素的字體製造一些區別。因此讓我們設置文本為“Georgia” 字體，但除了h1 標題，我們會用“Helvetica”。

在網上，你不能確定你的讀者電腦上用的是什麼字體，所以，我們也添加一些替代方案：如果沒有Georgia，Times New Roman 或Times 也可以，如果所有的都不行，瀏覽器會使用任何襯線字體。如果Helvetica 缺失，Geneva，Arial 和sunSans-Regular在形狀上是很相似的，又如果沒有這些運作，瀏覽器會選擇任何其它無襯線的字體。

瀏覽器在文本里添加了以下的行： (lines 7-8 and 11-13) 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>我的第一個樣式頁面</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

如果你再次保存文件和在瀏覽器裡按“刷新”，現在標題和其它文本就會有不同的字體。

Screenshot with fonts added

現在主要的文本有一個和標題不同的字體。

第六步：添加水平線

接下來添加的樣式表是用來把文本跟底端簽名分開的一個水平線規則。我們會使用'border-top'在<address>元素上面來添加點線 (lines 34-37)： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>我的第一個樣式頁面</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]

現在我們的樣式完成了。接下來，讓我們看看如何把樣式表放進單獨的文件裡，如此以來其它的頁面能分享同樣的樣式。

第七步：把樣式表放進單獨的文件裡

我們現在有一個嵌入了樣式表的HTML 文件。但是如果我們的網站發展了，我們肯定會要許多頁面分享相同的樣式。有一個比複製樣式表到每個頁面更好的辦法：如果我們把樣式表放進單獨的文件，所有的頁面都可以指向它。

要製作樣式表文件，我們需要創建另一個空文本文件。你可以從編輯器裡的文件菜單裡選擇“New” 來創建一個空的窗口。（如果你使用TextEdit ，不要忘記還是要使用格式菜單让它成為純文本。）

接下來，從HTML 文件中剪切在<style>元素裡的任何內容，再粘貼進新窗口。不要復制<style>和</style> 本身。它們屬於HTML ，不屬於CSS。在新的編輯器窗口，現在你應該有完整的樣式表： 

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

從文件目錄裡選擇“另存為……”，確保與mypage.html 文件在同一個目錄/文件夾裡，再把樣式表存為“mystyle.css”。

現在回到HTML 代碼的窗口。移除從<style>標籤開始到包括</style>標籤的所有內容，再用<link>元素替換它，如下 (line 5)： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>我的第一個樣式頁面</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

這會告訴瀏覽器在文件中找到叫“mystyle.css”的樣式表，又因為沒有目錄提到，瀏覽器就會在找到HTML 文件的同一個的目錄裡尋找。

如果你保存HTML 文件，然後在瀏覽器裡刷新它，你應該看不到變化：頁面是相同的樣式，但是現在樣式來自於一個外部文件。

Final result of styling

最後的結果。

接下來的步驟是把它們兩個mypage.html 和mystyle.css 放到你的網站上。 （你可能要先稍微改變他們……）但是如何做到這一點就取決於你的網絡服務供應商。

進一步閱讀

CSS介紹，見第2章Lie&Bos，或是Dave Raggett的CSS介绍.

其它信息，包括更多的教程，在學習 CSS頁面都能找到。

CSS Valid CSS!Valid HTML 4.0!

Bert Bos, CSS contact
Created 5 Apr 2004. Last updated $Date: 2009/10/07 08:18:21 $ GMT