從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">主頁</a> <li> <a href="musings.html"> Musings </a> <li> <a href="town.html">我的城鎮</a> <li> <a href="links.html">鏈接</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;
margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;"> </style>
</head>
<body>
第一行說這是一個樣式表，它是用CSS編寫的（“text / css”）。第二行說我們為“body”元素添加樣式。第三行將文本的顏色設置為紫色，下一行將背景設置為一種黃綠色。
CSS中的樣式表由規則組成。每條規則有三個部分：
該選擇器（在本例中：“體”），它告訴文檔的哪些部分是由規則影響瀏覽器;
所述屬性規定了布局的方面被設置了什么（在該示例中，“顏色”和“背景顏色”均為屬性）;
和值（'purple'和'＃d8da3d'），它給出了style屬性的值。
該示例顯示可以組合規則。我們設置了兩個屬性，因此我們可以制定兩個單獨的規則：
body { color: purple }
body { margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">但由於這兩個規則都影響了身體，我們只寫了一次“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">
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;"> 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">
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">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">
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">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">
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">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;
margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">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">
</ HEAD>
這將告訴瀏覽器樣式表在名為“mystyle.css”的文件中找到，並且由於沒有提到目錄，瀏覽器將查找找到HTML文件的同一目錄。
如果您保存HTML文件並在瀏覽器中重新加載它，您應該看不到任何更改：頁面的樣式仍然相同，但現在樣式來自外部文件。
最后希望大家多多關注！