01 10
創建CSS樣式表
與我們為HTML創建單獨的文本文件的方式相同，您將為CSS創建一個文本文件。 如果您需要此過程的視覺效果，請參閱第一個教程。 以下是在記事本中創建CSS樣式表的步驟：
- 在記事本中選擇“文件”>“新建”以獲取空白窗口
- 通過單擊文件<另存為...將文件另存為CSS
- 導航到硬盤上的my_website文件夾
- 將“另存為類型：”更改為“所有文件”
- 將您的文件命名為“styles.css”（不要使用引號）並單擊保存
02之10
將CSS樣式錶鍊接到您的HTML
一旦你的網站有了一個樣式表，你需要將它關聯到網頁本身。 要做到這一點，你使用鏈接標籤。 將以下鏈接標籤放置在pets.htm文檔的
標籤中的任意位置：03之10
修復頁邊距
當你為不同的瀏覽器編寫XHTML時，你會學到的一件事是，它們似乎都有不同的邊界和規則來顯示它們的顯示方式。 確保您的網站在大多數瀏覽器中看起來一樣的最佳方式是不允許邊距之類的內容默認為瀏覽器選項。
我更喜歡在左上角開始我的頁面，文本周圍沒有額外的填充或邊距。 即使我要填充內容，我也會將邊距設置為零，以便我以相同的空白頁面開始。 為此，請將以下代碼添加到styles.css文檔中：
html，body {
margin：0px;
padding：0px;
border：0px;
left：0px;
top：0px;
}
04年10月
更改頁面上的字體
字體通常是您想要在網頁上更改的第一件事。 網頁上的默認字體可能很難看，實際上是網頁瀏覽器本身，所以如果你沒有定義字體，你真的不知道你的頁面會是什麼樣子。
通常，您可以更改段落的字體，有時也可以更改整個文檔本身的字體。 對於本網站，我們將在頁眉和段落級別定義字體。 將以下內容添加到您的styles.css文檔中：
p，li {
字體：1em Arial，Helvetica，sans-serif;
}
h1 {
字體：2em Arial，Helvetica，sans-serif;
}
h2 {
字體：1.5em Arial，Helvetica，sans-serif;
}
h3 {
字體：1.25em Arial，Helvetica，sans-serif;
}
我以1em作為段落和列表項的基本尺寸，然後用它來為我的標題設置尺寸。 我不希望使用比h4更深的標題，但是如果您打算也想要設計它的樣式。
10的10
讓你的鏈接更有趣
對於未訪問鏈接和訪問鏈接，鏈接的默認顏色分別為藍色和紫色。 雖然這是標準的，但它可能不適合您的網頁的顏色方案，所以讓我們改變它。 在您的styles.css文件中，添加以下內容：
一條鏈接 {
font-family：Arial，Helvetica，sans-serif;
顏色：＃FF9900;
文字修飾：下劃線;
}
a：visited {
顏色：＃FFCC66;
}
a：懸停{
背景：#FFFFCC;
font-weight：bold;
}
我設置了三種鏈接樣式，a：鏈接作為默認值，a：在訪問時訪問，更改顏色和a：懸停。 使用：懸停我有鏈接獲取背景顏色，並大膽強調它是一個鏈接被點擊。
06年10月
設計導航部分的樣式
由於我們首先在HTML中放置了導航（id =“nav”）部分，我們先來設置它。 我們需要指出它應該有多寬，並在右邊放寬一點，以便正文不會碰到它。 我還在它周圍放置了一個邊框。
將以下CSS添加到您的styles.css文檔中：
#nav {
width：225px;
margin-right：15px;
邊框：中等實心＃000000;
}
#nav li {
list-style：none;
}
.footer {
font-size：.75em;
明確：兩者;
寬度：100％;
text-align：center;
}
列表樣式屬性在導航部分中設置列表以使其沒有項目符號或數字，並且.footer將版權部分設置得更小並且在該部分中居中。
07的10
定位主要部分
通過絕對定位你的主要部分，你可以確定它將保持你想要它留在你的網頁上的地方。 我製作了800像素的寬屏來容納更大的顯示器，但是如果您有更小的顯示器，您可能想要縮小顯示器的尺寸。
將下列內容放入styles.css文檔中：
#main {
寬度：800px;
top：0px;
位置：絕對;
left：250px;
}
08年10月
造型您的段落
由於我已經在上面設置了段落字體，所以我想給每個段落增加一些額外的“踢”，讓它更加突出。 我通過在頂部放置一個邊框來突出顯示該段落，而不僅僅是一個圖像。
將下列內容放入styles.css文檔中：
.topline {
邊框頂部：厚實體＃FFCC00;
}
我決定將它作為一個名為“topline”的類來完成，而不是僅僅以這種方式定義所有段落。 這樣，如果我決定我想要一個沒有頂部黃線的段落，我可以簡單地在段落標記中省略class =“topline”，並且它不會有頂部邊框。
09年10月
造型圖像
圖像通常在它們周圍有一個邊框，除非圖像是鏈接，否則這並不總是可見的，但我喜歡在CSS樣式表中有一個自動關閉邊框的類。 對於這個樣式表，我創建了“noborder”類，並且文檔中的大部分圖像都是這個類的一部分。
這些圖像的其他特殊部分是它們在頁面上的位置。 我希望他們成為他們所在段落的一部分，而不使用表格來對齊它們。 最簡單的方法是使用float CSS屬性。
將下列內容放入styles.css文檔中：
#main img {
向左飄浮;
margin-right：5px;
margin-bottom：15px;
}
。無邊界 {
border：0px none;
}
正如你所看到的，在圖像上也設置了邊距屬性，以確保它們不會與段落中旁邊的浮動文本砸碎。
10 10
現在看看你的完成頁面
保存完CSS後，您可以在Web瀏覽器中重新加載pets.htm頁面。 您的頁面應該與此圖片中顯示的頁麵類似，圖片對齊並且導航頁面左側正確放置。
對於本網站的所有內部頁面，請遵循相同的步驟。 您希望在導航中為每個頁面設置一個頁面。