CSS 教學 從 HTML + CSS開始
本文主要參考: http://www.w3.org/Style/Examples/011/firstcss.en.html
這個簡短的教學提供給那些想要學習CSS，卻從來沒有使用過CSS樣式的學習者，這個教學沒有太多的CSS介紹，僅僅介紹如何建立一個HTML文件加上一個CSS樣式文件，以及學習如何讓它們整合在一起。
在這個教學之後，你可以進一步地找一些教學及資料，給未來的網頁加上更多的HTML和CSS文件。
在未來，你可以使用專用的HTML 或 CSS 編輯器，幫助你設計複雜的網站。
在完成這個學習的最後，你將會製作出如下的一個HTML文件：
這個網頁只是為了學習網頁的建立與樣式的設定，不是一個完整有設計感的網頁，要多看一些好的設計，找一些富有設計感的模版來學習建置網頁。
【第一步：撰寫HTML】
在這個教學，我們只使用最簡單的文字編輯工具，例如，在Ｗindows裡的Notepad (記事本)，在Mac上的TextEdit ，或是在KDE裏的KEdit。我們的目的是要了解網頁背後的運作基礎與原理，一旦建立了相關概念，就可以進階到更高級的工具，如Style Master，Dreamweaver或GoLive。
目前，學習你的第一個CSS樣式時，不要因為使用太多的進階功能而分心。
第一步打開你的文字編輯器，在一個空的窗口開始，輸入以下的內容：
儲存時，請以文字的方式進行存檔(整個教學完成後會有數個檔案)：
注意一：當你使用記事本儲存檔案時，若最後的副檔名是txt，請將其去掉，網頁檔案的副檔名為htm或html。
注意二：在開始進行這個學習時，請在目錄建一個目錄用來儲存所有的檔案，以我為例，我在D槽中建了一個myWebPage目錄。
上面HTML文件的第一行宣告HTML的類型（DOCTYPE 意思是文件類型）。在這個案例中，它是HTML 4.01 版本。
在<和>裡的單詞叫標籤，像你看能到的，這文件包含<html> 和 </html> 標籤，表示一個html文件的開始與結束。
<head> 和</head>為html文件的檔頭定義標籤，目前，它包含了這個html文件的標題，之後我們會在這裡加上CSS樣式設定。
<body>是文件文本，原則上，<!-- 和-->為html文件的註解。
<ul>標籤是“無序列表”，意謂沒有編號的列表。 <li> 是“列表項目”。
<p> 是“文字段落”。
<a> 是超連結。
注意：HTML不難，不過就是一組標籤的定義，同學可以在網路找到許多的html教學，例：HTML 簡介與應用。
注意，本案例並沒下“li”和“p”結束元素，在HTML裡（但不是在XHTML 裡），允許忽略</li>和</p>標籤，只是為了使得文本稍微容易閱讀一點，你可以加上它們，如果你喜歡的話。
現在從檔案選單裡將這個html文件儲存為index.html，先不要關掉記事本編輯器，我們還會需要它。
接下來，我們使用瀏覽器裡打開“index.html”文件。
目前頁面看起來非常單調，沒有任何的設計元素……
【第二步：為網頁加些色彩】
我們從內嵌在HTML 文件裡的樣式開始，之後，我們會把CSS樣式 放進獨立的文件裡，獨立的css文件是一個比較好的作法，對比於混合CSS的HTML文件，它讓相同的樣式使用起來更簡單，你只需要編寫樣式一遍，就可以讓所有的HTML文件來使用CSS樣式。
CSS樣式是透過添加一個<style>元素在HTML文件的表頭中，加入下面的五行來定義<body>區塊的前景與背景顏色。
注意：在CSS裡顏色有多種方法來規定。此案例展示了它們的兩種方法：色彩名稱（“purple” ）和色彩十六進制編碼（“#d8da3d” ）。色彩的名稱大約有140種，而十六進制代碼有超過16，000，000種顏色。我們可以到底下網頁去取得顏色名稱與編碼
【第四步：加上一個導覽列】
在HTML 頁面頂部的列表是為了建立一個導覽選單。許多網站有些目錄分類在頂部或是在頁面的邊上，我們把它放在左邊。
導覽選單已經定義在HTML 頁面裡，就是一開始在頂部的<ul>列表，目前連結尚未完整，我們的“網站”到現在為止只有一個頁面，之後我們要把所有連結對應的網頁加上來。
我們要把列表移到左邊去，然後把其它的內文稍微右移，來調整整個網頁的空間，我們要使用的CSS屬性'padding-left'（移動文本主體）和'position'、'left '和'top'（移動選單）。
還有其它的方法來做到這一點，例如：“column”或“layout” 。
參考：
在這個編輯器窗口，在HTML文件裡添加以下的行：
主要本文被移到了右邊，現在鏈接列表在它的左邊，而不是在頂部了。
注意：'position: absolute'說明ul 元素的定位獨立於或早或晚在文件中出現的任何文本，而''left'和'top'標明了在什麼位置。在這個情況中，從視窗頂部起2em，左邊起1em。
‘2em’表示2倍當前字體的大小。例如，如果選單用一個12點的字體顯示，那麼2em就是24點。 em在CSS裡是非常有用的一個單位，因為它能自動適應讀者可能使用的字體。許多瀏覽器有一個加大或是減少字體大小的選單：你可以試一試，看看當字體加大了選單如何在大小方面加大，如果我們換做使用一個像素大小，情況就不會是這樣了。
【第五步：設計超連結樣式】
導覽選單依然看起來只像個列表，而不像選單。讓我們給它添加一些樣式。我們會移除列表項目符號，再把項目移到左邊，項目符號的位置。我們還會給每個項目它們自己的白色背景和黑色框框。（為什麼？沒有特殊的原因，只是因為我們能夠這樣做。）
我們也沒有說明鏈接的顏色應該是什麼，所以，讓我們也加上：藍色顯示用戶沒有看過的鏈接，紫色顯示已經訪問過的鏈接：
【第六步：加上一個水平線】
接下來添加的樣式是用來把文本跟底端簽名分開的一個水平線規則。我們會使用'border-top'在<address>元素上面來添加一條線：
【第七步：將樣式設定放在另一個獨立的檔案】
我們現在有一個嵌入樣式CSS的HTML 文件，只是如果我們的網站發展了，我們肯定會要許多頁面分享相同的樣式，有一個比複製樣式表到每個頁面更好的辦法：我們把樣式放進單獨的文件，使用所有的頁面都可以參考它。
要製作樣式表文件，我們需要建立另一個空的文件，從HTML 文件中複製在<style>元素裡的內容，記得不要複製<style>和</style>這2個標籤，它們屬於HTML ，不屬於CSS。在新的記事本應該有完整的樣式：
文件必須確保與index.html文件在同一個目錄裡，上面的樣式檔案儲存為“mystyle.css”。
現在回到編輯indexl.html的HTML記事本視窗，移除從<style>標籤開始到包括</style>標籤的所有內容，再用<link>元素替換它，如下：
這個網頁只是為了學習網頁的建立與樣式的設定，不是一個完整有設計感的網頁，要多看一些好的設計，找一些富有設計感的模版來學習建置網頁。
【第一步：撰寫HTML】
在這個教學，我們只使用最簡單的文字編輯工具，例如，在Ｗindows裡的Notepad (記事本)，在Mac上的TextEdit ，或是在KDE裏的KEdit。我們的目的是要了解網頁背後的運作基礎與原理，一旦建立了相關概念，就可以進階到更高級的工具，如Style Master，Dreamweaver或GoLive。
目前，學習你的第一個CSS樣式時，不要因為使用太多的進階功能而分心。
第一步打開你的文字編輯器，在一個空的窗口開始，輸入以下的內容：
<!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">我思我在</a>
<li><a href="town.html">我的家鄉</a>
<li><a href="links.html">連接</a>
</ul>
<!-- 主要內容 -->
<h1>我的第一個樣式頁面</h1>
<p>歡迎來到我的樣式頁面!
<p>這個網頁沒有圖片, 不過至少有CSS樣式、有超連結, 只是沒有所有的網頁元素…
<p>這個網頁應該有更多的HTML元素，只是現在，我不知道要給你們什麼…
<address>
弘光科技大學 資訊管理系 <br>
臺中市臺灣大道1段100號
</address>
</body>
</html>
你直接從複製(copy)上面的內容，並以貼上(paste)的方式，將資料填入編輯器中：
儲存時，請以文字的方式進行存檔(整個教學完成後會有數個檔案)：
注意一：當你使用記事本儲存檔案時，若最後的副檔名是txt，請將其去掉，網頁檔案的副檔名為htm或html。
注意二：在開始進行這個學習時，請在目錄建一個目錄用來儲存所有的檔案，以我為例，我在D槽中建了一個myWebPage目錄。
上面HTML文件的第一行宣告HTML的類型（DOCTYPE 意思是文件類型）。在這個案例中，它是HTML 4.01 版本。
在<和>裡的單詞叫標籤，像你看能到的，這文件包含<html> 和 </html> 標籤，表示一個html文件的開始與結束。
<head> 和</head>為html文件的檔頭定義標籤，目前，它包含了這個html文件的標題，之後我們會在這裡加上CSS樣式設定。
<body>是文件文本，原則上，<!-- 和-->為html文件的註解。
<ul>標籤是“無序列表”，意謂沒有編號的列表。 <li> 是“列表項目”。
<p> 是“文字段落”。
<a> 是超連結。
注意：HTML不難，不過就是一組標籤的定義，同學可以在網路找到許多的html教學，例：HTML 簡介與應用。
注意，本案例並沒下“li”和“p”結束元素，在HTML裡（但不是在XHTML 裡），允許忽略</li>和</p>標籤，只是為了使得文本稍微容易閱讀一點，你可以加上它們，如果你喜歡的話。
現在從檔案選單裡將這個html文件儲存為index.html，先不要關掉記事本編輯器，我們還會需要它。
接下來，我們使用瀏覽器裡打開“index.html”文件。
目前頁面看起來非常單調，沒有任何的設計元素……
【第二步：為網頁加些色彩】
我們從內嵌在HTML 文件裡的樣式開始，之後，我們會把CSS樣式 放進獨立的文件裡，獨立的css文件是一個比較好的作法，對比於混合CSS的HTML文件，它讓相同的樣式使用起來更簡單，你只需要編寫樣式一遍，就可以讓所有的HTML文件來使用CSS樣式。
CSS樣式是透過添加一個<style>元素在HTML文件的表頭中，加入下面的五行來定義<body>區塊的前景與背景顏色。
<!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>
第一行說的是，這是一個樣式表，並且它是用CSS (“text/css”)編寫的。第二行說的是，我們為“body” 元素添加了樣式。第三行設定了文本的顏色是紫色，接下来一行設定了背景是一種帶綠的黃色。
注意：CSS樣式的撰寫規則如下，每條規則有三個部分：
- 選擇器（在案例裡：“body”），告訴瀏覽器HTML文件的哪個部分受規則影響了；
- 屬性（在示案裡：'color''和'background-color'都是屬性），規定了佈局的什麼方面被設置了；
- 值（'purple'和'#d8da3d' ）給出了樣式屬性的值。
body { color: purple }
body { background-color: #d8da3d }
現在儲存文件，回到瀏覽器，按下“更新”鍵，觀察網頁變化情形，網頁應該有了色彩。除了頂端的連接列表，網頁文件應該是帶有泛綠的黃色背景的紫色文件。
注意：在CSS裡顏色有多種方法來規定。此案例展示了它們的兩種方法：色彩名稱（“purple” ）和色彩十六進制編碼（“#d8da3d” ）。色彩的名稱大約有140種，而十六進制代碼有超過16，000，000種顏色。我們可以到底下網頁去取得顏色名稱與編碼
- 顏色名稱：HTML Color Names
- 顏色編碼：HTML Color Picker
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;}
</style>
</head>
<body>
以下略
再次儲存文件，並在瀏覽器按“更新”，現在網頁的字體已經擺脫不好看的細明體了。
【第四步：加上一個導覽列】
在HTML 頁面頂部的列表是為了建立一個導覽選單。許多網站有些目錄分類在頂部或是在頁面的邊上，我們把它放在左邊。
導覽選單已經定義在HTML 頁面裡，就是一開始在頂部的<ul>列表，目前連結尚未完整，我們的“網站”到現在為止只有一個頁面，之後我們要把所有連結對應的網頁加上來。
我們要把列表移到左邊去，然後把其它的內文稍微右移，來調整整個網頁的空間，我們要使用的CSS屬性'padding-left'（移動文本主體）和'position'、'left '和'top'（移動選單）。
還有其它的方法來做到這一點，例如：“column”或“layout” 。
參考：
在這個編輯器窗口，在HTML文件裡添加以下的行：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;}
</style>
</head>
<body>
以下略
如果你再次保存文件，在瀏覽器裡刷新它，你現在就可以得到主要文本左邊的鏈接列表了。已經看起來更加有意思了，是不是？
主要本文被移到了右邊，現在鏈接列表在它的左邊，而不是在頂部了。
注意：'position: absolute'說明ul 元素的定位獨立於或早或晚在文件中出現的任何文本，而''left'和'top'標明了在什麼位置。在這個情況中，從視窗頂部起2em，左邊起1em。
‘2em’表示2倍當前字體的大小。例如，如果選單用一個12點的字體顯示，那麼2em就是24點。 em在CSS裡是非常有用的一個單位，因為它能自動適應讀者可能使用的字體。許多瀏覽器有一個加大或是減少字體大小的選單：你可以試一試，看看當字體加大了選單如何在大小方面加大，如果我們換做使用一個像素大小，情況就不會是這樣了。
【第五步：設計超連結樣式】
導覽選單依然看起來只像個列表，而不像選單。讓我們給它添加一些樣式。我們會移除列表項目符號，再把項目移到左邊，項目符號的位置。我們還會給每個項目它們自己的白色背景和黑色框框。（為什麼？沒有特殊的原因，只是因為我們能夠這樣做。）
我們也沒有說明鏈接的顏色應該是什麼，所以，讓我們也加上：藍色顯示用戶沒有看過的鏈接，紫色顯示已經訪問過的鏈接：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;}
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
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 }
</style>
</head>
<body>
以下略
注意：按慣例來說，瀏覽器用下標線和顏色來顯示超鏈接。通常，使用類似我們在這裡規定的顏色：藍色顯示你還沒有訪問過的鏈接頁面（或是很久之前訪問過的），紫色顯示你已經看過的。
在HTML 裡，超鏈接是用<a>元素創建的，所以要規定顏色，我們需要添加“a”的樣式規則。為了區分已經訪問過的和沒有訪問過的鏈接，CSS提供了兩個“假類”(:link 和:visited) 。它們稱為“假類 pseudo-classes”以區別那些類別的屬性，在我們的案例裡，指定ul的類別屬性：class= “navbar”。
【第六步：加上一個水平線】
接下來添加的樣式是用來把文本跟底端簽名分開的一個水平線規則。我們會使用'border-top'在<address>元素上面來添加一條線：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-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: 'cwTeXHei', 'Noto Sans TC', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", 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>
以下略
現在我們的樣式完成了。接下來，讓我們看看如何把樣式表放進單獨的文件裡，如此以來其它的頁面能分享同樣的樣式。
【第七步：將樣式設定放在另一個獨立的檔案】
我們現在有一個嵌入樣式CSS的HTML 文件，只是如果我們的網站發展了，我們肯定會要許多頁面分享相同的樣式，有一個比複製樣式表到每個頁面更好的辦法：我們把樣式放進單獨的文件，使用所有的頁面都可以參考它。
要製作樣式表文件，我們需要建立另一個空的文件，從HTML 文件中複製在<style>元素裡的內容，記得不要複製<style>和</style>這2個標籤，它們屬於HTML ，不屬於CSS。在新的記事本應該有完整的樣式：
文件必須確保與index.html文件在同一個目錄裡，上面的樣式檔案儲存為“mystyle.css”。
現在回到編輯indexl.html的HTML記事本視窗，移除從<style>標籤開始到包括</style>標籤的所有內容，再用<link>元素替換它，如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>我的第一個樣式頁面</title> <link rel="stylesheet" href="mystyle.css"> </head> 以下略這會告訴瀏覽器在目錄中找到叫“mystyle.css”的樣式表。 【第八步：產生所有的連結檔案】 接下來，請產生底下三個網頁，好讓導覽連結能夠正確地切換到各個網頁：
- musings.html
- town.html
- links.html
- 自行架站，在家或在學校或在機關或在…
- 我的學生可以由我提供網站空間。
- 免費的虛擬主機 (virtual host)，比較容易，可參考各家提出的方式，將網站上傳到申請的免費虛擬空間。
- 虛擬伺服器 (virtual private server)
- google 雲端主機
