從HTML + CSS開始的CSS教程
這個簡短的教程适用于那些想要開始使用CSS并且之前從未編寫過CSS樣式表的人。
它沒有解釋很多CSS。它隻是解釋了如何建立HTML檔案，CSS檔案以及如何使它們協同工作。之後，您可以閱讀任何其他教程，以便為HTML和CSS檔案添加更多功能。或者您可以切換到使用專用的HTML或CSS編輯器，這可以幫助您設定複雜的網站。
在本教程結束時，您将建立一個如下所示的HTML檔案：
生成的HTML頁面，顔色和布局都使用CSS完成。
請注意，我并不認為這很漂亮☺
看起來像這樣的部分是可選的。它們包含示例中HTML和CSS代碼的一些額外說明。開頭的“警告！”标志表示這是比其他文本更進階的材料。
第1步：編寫HTML
在本教程中，我建議您隻使用最簡單的工具。例如，記事本（在Windows下），TextEdit（在Mac上）或KEdit（在KDE下）都可以。一旦了解了這些原則，您可能希望切換到更進階的工具，甚至是商業程式，例如Style Master，Dreamweaver或GoLive。但是對于您的第一個CSS樣式表，最好不要被太多進階功能分散注意力。
不要使用Word處理器，例如Microsoft Word或OpenOffice。它們通常會生成Web浏覽器無法讀取的檔案。對于HTML和CSS，我們需要簡單的純文字檔案。
第1步是打開文本編輯器（記事本，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" target="_blank" rel="external nofollow" >首頁</a> <li> <a href="musings.html" target="_blank" rel="external nofollow" > Musings </a> <li> <a href="town.html" target="_blank" rel="external nofollow" >我的城鎮</a> <li> <a href="links.html" target="_blank" rel="external nofollow" >連結</a></ UL><！ - 主要内容 - ><h1>我的第一個樣式頁面</ h1><p>歡迎來到我的風格頁面！<p>它沒有圖像，但至少它有風格。它有連結，即使他們不去任何地方＆hellip;<p>這裡應該有更多，但我不知道什麼呢<！ - 在頁面上簽名并注明日期，這是唯一有禮貌的！ - ><位址> 2004年4月5日制作<br> 我自己。</ address></ BODY></ HTML>
實際上，您不必鍵入它：您可以将其從此Web頁面複制并粘貼到編輯器中。
（如果您在Mac上使用TextEdit，請不要忘記告訴TextEdit文本是純文字，方法是轉到“格式”菜單并選擇“生成純文字”。）
上面HTML檔案的第一行告訴浏覽器這是什麼類型的HTML（DOCTYPE表示DOCument TYPE）。在這種情況下，它是HTML版本4.01。
<和>中的單詞稱為标記，如您所見，文檔包含在<html>和</ html>标記中。在<head>和</ head>之間，螢幕上沒有顯示各種資訊的空間。到目前為止，它包含文檔的标題，但稍後我們也将添加CSS樣式表。
<body>是文檔的實際文本所在的位置。原則上，除了<！ - 和 - >中的文本之外，其中的所有内容都将被顯示，該文本用作對我們自己的評論。浏覽器會忽略它。
在示例中的标簽中，<ul>引入了“無序清單”，即，項目未編号的清單。<li>是“清單項”的開頭。<p>是“段落”。<a>是“錨點”，它是建立超連結的原因。
KEdit編輯器顯示HTML源代碼。
如果你想知道<...>中的名字是什麼意思，一個好的起點是HTML入門。但隻是關于我們的示例HTML頁面的結構的幾句話。
“ul”是一個清單，每個項目有一個超連結。這将作為我們的“網站導航菜單”，連結到我們（假設的）網站的其他頁面。據推測，我們網站上的所有頁面都有類似的菜單。
“h1”和“p”元素構成此頁面的唯一内容，而底部的簽名（“位址”）将在網站的所有頁面上再次相似。
請注意，我沒有關閉“li”和“p”元素。在HTML中（但不是在XHTML中），允許省略</ li>和</ p>标簽（我在這裡做），使文本更容易閱讀。但如果您願意，可以添加它們。
我們假設這将是一個具有幾個類似頁面的網站的一頁。對于目前網頁來說，這個網頁有一個連結到假設網站上其他頁面的菜單，一些獨特的内容和一個簽名。
現在從“檔案”菜單中選擇“另存為...”，導航到要放置它的目錄/檔案夾（桌面很好）并将檔案另存為“mypage.html”。不要關閉編輯器，我們将再次需要它。
（如果您在版本10.4之前在Mac OS X上使用TextEdit，您将看到一個選項不要在“另存為”對話框中附加.txt擴充名。選擇該選項，因為名稱“mypage.html”已包含擴充名。較新版本的TextEdit會自動注意.html擴充名。）
接下來，在浏覽器中打開該檔案。您可以按如下方式執行此操作：使用檔案管理器（Windows資料總管，Finder或Konqueror）查找檔案，然後單擊或輕按兩下“mypage.html”檔案。它應該在您的預設Web浏覽器中打開。（如果沒有，請打開浏覽器并将檔案拖到其中。）
正如你所看到的，頁面看起來很無聊......
第2步：添加一些顔色
您可能在白色背景上看到一些黑色文本，但這取決于浏覽器的配置方式。是以，我們可以做的一件容易的事情就是增加一些顔色。（保持浏覽器打開，我們稍後會再次使用它。）
我們将從HTML檔案中嵌入的樣式表開始。稍後，我們将把HTML和CSS放在單獨的檔案中。單獨的檔案很好，因為它可以更容易地為多個HTML檔案使用相同的樣式表：您隻需要編寫樣式表一次。但是對于這一步，我們隻将所有内容儲存在一個檔案中。
我們需要在HTML檔案中添加一個<style>元素。樣式表将位于該元素内。是以，傳回編輯器視窗并在HTML檔案的head部分添加以下五行。要添加的行以紅色顯示。
My first styled page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
第一行說這是一個樣式表，它是用CSS編寫的（“text / css”）。第二行說我們為“body”元素添加樣式。第三行将文本的顔色設定為紫色，下一行将背景設定為一種黃綠色。
CSS中的樣式表由規則組成。每條規則有三個部分：
該選擇器（在本例中：“體”），它告訴文檔的哪些部分是由規則影響浏覽器;
所述屬性規定了布局的方面被設定了什麼（在該示例中，“顔色”和“背景顔色”均為屬性）;
和值（'purple'和'＃d8da3d'），它給出了style屬性的值。
該示例顯示可以組合規則。我們設定了兩個屬性，是以我們可以制定兩個單獨的規則：
body { color: purple }
body { background-color: #d8da3d }
但由于這兩個規則都影響了身體，我們隻寫了一次“body”并将屬性和值放在一起。
body元素的背景也将是整個文檔的背景。我們沒有給任何其他元素（p，li，address ...）任何明确的背景，是以預設情況下它們沒有（或者：将是透明的）。'color'屬性設定body元素的文本顔色，但body中的所有其他元素都繼承該顔色，除非顯式覆寫。（我們稍後會添加一些其他顔色。）
現在儲存此檔案（使用“檔案”菜單中的“儲存”）并傳回浏覽器視窗。如果按“重新加載”按鈕，顯示應從“無聊”頁面變為彩色（但仍然相當無聊）頁面。除了頂部的連結清單，文本現在應該是紫色的黃色背景。
現在，一個浏覽器如何顯示已添加某些顔色的頁面。
可以通過多種方式在CSS中指定顔色。此示例顯示了其中兩個：按名稱（“purple”）和十六進制代碼（“＃d8da3d”）。大約有140種顔色名稱，十六進制代碼允許超過1600萬種顔色。添加一絲風格可以解釋這些代碼的更多資訊。
第3步：添加字型
另一件容易做的事情是在頁面的各種元素的字型中做出一些區分。是以，讓我們将文本設定為“Georgia”字型，除了h1标題，我們将給出“Helvetica”。
在網絡上，你永遠無法确定你的讀者在他們的計算機上有什麼字型，是以我們也添加了一些替代品：如果格魯吉亞不可用，Times New Roman或Times也沒關系，如果所有其他方法都失敗了，浏覽器可能會使用任何其他字型與襯線。如果沒有Helvetica，則Geneva，Arial和SunSans-Regular的形狀非常相似，如果這些都不起作用，浏覽器可以選擇任何其他無襯線的字型。
在文本編輯器中添加以下行：
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一個樣式頁面</title>
<link rel="stylesheet" href="mystyle.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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>
如果再次儲存檔案并在浏覽器中按“重新加載”，則标題和其他文本現在應該有不同的字型。
現在主文本的字型與标題不同。
第4步：添加導航欄
HTML頁面頂部的清單旨在成為導航菜單。許多網站在頁面的頂部或側面都有某種菜單，這個頁面也應該有一個。我們将它放在左側，因為這比頂部更有趣......
該菜單已在HTML頁面中。它是頂部的<ul>清單。它中的連結不起作用，因為到目前為止我們的“網站”隻包含一個頁面，但現在并不重要。在一個真實的網站上，當然不應該有任何斷開的連結。
是以我們需要将清單向左移動并将文本的其餘部分向右移動一點，以便為它騰出空間。我們使用的CSS屬性是'padding-left'（移動正文）和'position'，'left'和'top'（移動菜單）。
還有其他方法可以做到這一點。如果您在學習CSS頁面上查找“列”或“布局” ，您将找到幾個可立即運作的模闆。但是這個可以用于我們的目的。
在編輯器視窗中，将以下行添加到HTML檔案中：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一個樣式頁面</title>
<link rel="stylesheet" href="mystyle.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
如果再次儲存檔案并在浏覽器中重新加載，則現在應該具有主文本左側的連結清單。那已經看起來更有趣了，不是嗎？
主要文本已移至右側，連結清單現在位于其左側，而不是上方。
'position：absolute'表示ul元素的位置與文檔中之前或之後的任何文本無關，而'left'和'top'表示該位置是什麼。在這種情況下，從頂部開始2em，從視窗左側開始1em。
'2em'表示目前字型大小的2倍。例如，如果菜單顯示為12點的字型，那麼'2em'是24點。'em'是CSS中非常有用的單元，因為它可以自動适應閱讀器碰巧使用的字型。大多數浏覽器都有一個用于增加或減少字型大小的菜單：您可以嘗試它并看到菜單随着字型的增加而增加，如果我們使用像素大小而不是這樣的話。
第5步：設定連結樣式
導航菜單仍然看起來像一個清單，而不是菜單。讓我們為它添加一些風格。我們将删除清單項目符号并将項目移動到項目符号所在的左側。我們還将為每個項目提供自己的白色背景和黑色方塊。（為什麼？沒有特别的原因，隻因為我們可以。）
我們還沒有說明連結的顔色應該是什麼，是以我們也要添加：藍色表示使用者尚未看到的連結，紫色表示已通路的連結：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一個樣式頁面</title>
<link rel="stylesheet" href="mystyle.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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 }
</style>
</head>
傳統上，浏覽器顯示帶有下劃線和顔色的超連結。通常，顔色類似于我們在此處指定的顔色：藍色表示您尚未通路過的頁面（或很久以前通路過的頁面），紫色表示您已經看過的頁面。
在HTML中，使用<a>元素建立超連結，是以要指定顔色，我們需要為“a”添加樣式規則。為了區分通路連結和未通路連結，CSS提供了兩個“僞類”（：link和：visited）。它們被稱為“僞類”，以将它們與直接出現在HTML中的類屬性區分開來，例如， class="navbar"在我們的示例中。
第6步：添加水準線
樣式表的最後一個添加是一個水準規則，用于将文本與底部的簽名分開。我們将使用'border-top'在<address>元素上方添加一條虛線：
<<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一個樣式頁面</title>
<link rel="stylesheet" href="mystyle.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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>
現在我們的風格很完整。接下來，讓我們看一下如何将樣式表放在單獨的檔案中，以便其他頁面可以共享相同的樣式。
第7步：将樣式表放在單獨的檔案中
我們現在有一個帶有嵌入式樣式表的HTML檔案。但是如果我們的網站增長，我們可能希望許多頁面共享相同的樣式。有一種比将樣式表複制到每個頁面更好的方法：如果我們将樣式表放在單獨的檔案中，所有頁面都可以指向它。
要制作樣式表檔案，我們需要建立另一個空文本檔案。您可以從編輯器的“檔案”菜單中選擇“建立”，以建立一個空視窗。（如果您使用的是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>元素，如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一個樣式頁面</title>
<link rel="stylesheet" href="mystyle.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
</ HEAD>
這将告訴浏覽器樣式表在名為“mystyle.css”的檔案中找到，并且由于沒有提到目錄，浏覽器将查找找到HTML檔案的同一目錄。
如果您儲存HTML檔案并在浏覽器中重新加載它，您應該看不到任何更改：頁面的樣式仍然相同，但現在樣式來自外部檔案。
最後希望大家多多關注！