標籤：建立 相同 編輯 日期 soft 示範 public 更新 商業
對於這個教程，我建議你只使用最簡單的工具。例如：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頁面的單詞。
“ul”是一個每個條目都有一個超連結的列表。這會作為我們的“網站導覽菜單”串連到我們（超連結）網站的其它頁面。想必，我們網站的所有頁面都有一個類似的菜單。
“h1”和“p”元素形成這個頁面獨特的內容，而底部的簽名（“address”）也是和網站上所有的頁面是類似的。
注意，我沒有關閉“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檔案，它讓相同的樣
第二步，添加一些顏色
你可能看到一些白色背景裡的黑色文本，但它是取決於瀏覽器如何配置的。所以，我們能做的讓頁面更加時新的一件簡單的事情就是添加一些顏色。（讓瀏覽器開著，我們之後會再用到它。）
我們從嵌在HTML檔案裡的樣式表開始。然後，我們會把HTML和CSS放進單獨的檔案裡。單獨的檔案很好，因為相對於複合的HTML檔案，它讓相同的樣式表使用起來更簡單：你只需要編寫樣式表一遍。但是對於該步驟，我們僅僅保持所有的內容在一個檔案裡。
我們需要添加一個<style>元素到HTML檔案中。樣式表會在此元素裡。所以回到編輯器視窗，再在HTML檔案的抬頭部分添加下面的五行。要添加的行用紅色的顯示出來了。
<！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裡的樣式表是由規則群組成。每條規則有三個部分：
選取器（在樣本裡：“body”），告訴瀏覽器文檔的哪個部分受規則影響了；
屬性（在樣本裡：‘color‘‘和‘background-color‘都是屬性），規定了布局的什麼方面被設定了；
還有值（‘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在形狀上是很相似的，又如果沒有這些運作，瀏覽器會選擇任何其它無襯線的字型。
html運用以及工具
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
