網頁設計CSS教程：第2部分
在第1部分中，我們使用CSS創建了一個帶有左側導航的經典雙列布局，只有少數類型的HTML標簽。第1部分介紹了該頁面的代碼，并解釋了我們將要使用的HTML標記。本周我將介紹到目前為止我們使用的HTML代碼和CSS。
你可以看看頁面應該看起來像這里：CSS示例頁面
我們的網頁到目前為止非常簡單。正如您可能已經知道的那樣，用戶在瀏覽網頁時看到的所有內容（文本，圖像，Flash等）都是用<body>和</ body>標記之間的HTML標記的。
在這種情況下，我們有這個：
< 體 >
< DIV ID = “導航” >
< H2 >主導航< / H2 >
< / DIV >
< DIV ID = “centerDoc” >
< H1 >主標題< / H1 >
< p >
< / p >
< / div >
< / body >
注意：
您應該創建自己的基本HTML頁面，以便您可以像我一樣跟隨并構建頁面。
在上面的代碼中，我們看到我們有兩個主要部分，每個部分都包含在<div>標簽內。正如您在本教程的第1部分中學到的，<div>標簽旨在用于在文檔中創建“分割”，換句話說就是創建一個容器。
我們已經創建了兩個這樣的容器，并給每個容器一個唯一的ID：
< div id = “navigation” >
...
< div id = “centerDoc” >
您會注意到，該頁面的全部內容都包含在這兩個主要頁面部門之一中。所以第一個問題是：HTML頁面中ID的規則是什么，為什么我們使用它們并將它們分配給像DIV這樣的頁面元素？
1.首先，您可以將ID分配給任何HTML標簽。所以我也可以給一個<p>標簽分配一個ID。
2.頁面中的ID只能使用一次。也就是說，任何一個頁面上的任何兩個元素都不應該具有相同的ID。ID的意思是唯一標識一個頁面元素。所以在上面的例子中，我們知道只有一個ID為'navigation'的頁面元素，只有一個ID為'centerDoc'的頁面元素。我喜歡使用與您交談的ID名稱，這非常清楚我們在上面創建的每個部門正在發生什么。
3. HTML頁面元素（標簽）上的ID在CSS中使用。我們可以在CSS代碼中使用ID來通過引用元素的ID來改變元素的外觀，位置，甚至行為。
在<div>標簽中，我們使用標題標簽（<h1>和<h2>）來設置標題。我將解釋本教程的第1部分中的標題標記。
最后，我有一些<p>標簽，當然我插入組成這個簡單頁面的文本。
現在我要跳轉到附加到HTML頁面的CSS文件。我們用這行代碼在<head> </ head>標簽之間附上CSS文檔：
< head >
< link href = “myCSS.css” rel = “stylesheet” type = “text / css” >
< / head >
就像一個正常的頁面鏈接，我們有一個“href”屬性 - 這次指向一個CSS文檔，它包含了所有我們的CSS代碼，因為它鏈接到它，所以會影響這個頁面。這不是將CSS代碼關聯到頁面的唯一方式（還有其他幾種方法），但是我們將把它留給另一篇文章。所以在上面的鏈接中，我們用這個名字命名CSS文件名：'href =“myCSS.css”'，我們告訴瀏覽器鏈接到一個具有以下屬性的CSS頁面：'type =“text / css”'。這里最重要的是鏈接指向名為“myCSS.css”的CSS文件，
所以現在我們已經把樣式表鏈接到文檔了，讓我們來看一些CSS代碼。代碼的第一部分“樣式”是我們之前討論的唯一ID：
#navigation {
position ： absolute ;
z-index ： 10 ;
width ： 210px ;
height ： 600px ;
保證金： 0 ;
margin-top ： 0px ;
border-right ： 1px solid ＃C6EC8C ;
font-weight ： 正常;
}
#centerDoc {
position ： absolute ;
z-index ： 15 ;
padding ： 0 0 20px 20px ; / *右上方左下角* /
margin-top ： 50px ;
margin-left ： 235px ;
}
這里有很多，所以我們現在只關注幾個要素。在上面的元素中，我們有兩個選擇器（'#navigation'和'#centerDoc'），每個ID一個，每個選擇器后面跟著大括號：{}。在大括號之間，我們列出了指定應用于選擇器的樣式的“屬性”。所以這里是CSS選擇器的代碼，刪除了它的所有內容（它的屬性）：
#navigation {
/ *看起來沒有CSS規則！* /
}
#centerDoc {
/ *看起來沒有CSS規則！* /
}
我只是插入文本：'/ *看看沒有CSS規則！* /'來顯示你的CSS代碼通常在哪里。所以現在你可以看到大括號之間的任何東西都是CSS或者包中的一部分，通常被稱為屬性。
在我們上面的例子中，你可以看到有一些文本出現在大括號之前。該文本給選擇器一個名字。所以在這種情況下，我們有兩個選擇器名稱和兩個選擇器：#centerDoc和#navigation。那為什么我們在文字前面加上＃號？為什么我們不能簡單地稱之為“centerDoc”和“導航”？
像HTML和編程一樣，某些地方的某些文本具有特殊的含義，告訴系統做一些特定的事情。在這種情況下，只要在CSS選擇器的名稱前面有一個＃符號，我們就說這個選擇器是一種特殊的選擇器，稱為“ID”選擇器。ID選擇器有什么特別之處？該類型的選擇器只能應用于HTML頁面中的一個元素。聽起來很熟悉？
所以，現在你們那些不在電腦上睡覺的人看到，我們有一個CSS ID選擇器，用于每個有一個ID的HTML div，并且它們具有相同的對應名稱。所以CSS選擇器#centerDoc適用于div：“<div id =”centerDoc“>”，你知道了嗎？無論選擇哪種CSS規則/樣式編碼到我們的ID選擇器中，都會改變相應div內顯示的內容。所以對于id為“導航”的div，我們有這些CSS規則：
#navigation {
position ： absolute ;
z-index ： 10 ;
width ： 210px ;
height ： 600px ;
保證金： 0 ;
margin-top ： 0px ;
border-right ： 1px solid ＃C6EC8C ;
font-weight ： 正常;
}
注意在底部，我們說所有的文本都有一個字體權重為'normal'的屬性：
font-weight ： 正常;
我們可以簡單地說，我們希望所有的文本都出現在div（帶ID的導航欄div）中，而不是 - 然后這個屬性看起來像這樣：
font-weight ： bold ;
但是我離題了，我已經在CSS的前一篇文章中詳細介紹了CSS。本教程是關于創建一個易于使用的頁面模板，所以我將指出使這個工作的2個主要元素。
在我們的頁面，導航div坐在左邊，它有一個邊界...為什么？它有一個很好的淺綠色1像素的邊框，因為我在CSS中設置：
border-right ： 1px solid ＃C6EC8C ;
很自我解釋，不是嗎？我會建議改變邊框的顏色和改變邊框的像素厚度，看看它是怎么樣的。
為什么導航位于頁面左側，而centerDoc位于頁面的右側？那么首先要看的是導航選擇器中的這一行：
位置： 絕對;
這告訴瀏覽器只是把這個div放在頁面上。這是過分簡化了這個問題，但對于我們的目的，這個工作現在。
真正的魔術是centerDoc的CSS代碼：
#centerDoc {
position ： absolute ;
z-index ： 15 ;
padding ： 0 0 20px 20px ; / *右上方左下角* /
margin-top ： 50px ;
margin-left ： 235px ;
}
該行：
margin-left ： 235px ;
告訴瀏覽器在ID為“centerDoc”的div左邊插入235px（像素）的邊距。這推動了這個div，為div的“導航”騰出了空間。或者在這種情況下，只需創建一個不錯的左側欄。
在確定邊距之前，我們已經設置了一個叫做“padding”的東西，它聽起來像：包裹在我們的元素（標簽）周圍的空間。
CSS具有盒子模型的這個特征和概念，實質上是一個包裝HTML元素的框。這個盒子模型包括：填充，邊距，邊框和實際內容。這使我們能夠在元素和空間元素之間放置與其他元素相關的邊界。從內到外都是這樣排列的：
內容 - >填充 - >邊框 - >邊距
所以在我們的情況下，我們的<div>標簽之間的任何東西都是“內容”。緊接著是填充。然后是邊界，最后是邊界。邊距和填充可能看起來像是一樣的東西，但是如果您仔細考慮，可以看到如何在邊界（填充）之前以及邊界（邊距）之后控制空間，這實際上可以影響您的布局。
在這個例子中，你會注意到導航div在頁面上比centerDoc div高。這不是因為它們在HTML中出現的順序，因為它們通常沒有CSS，而是因為我為每個選擇器設置的邊距設置; 為centerDoc我把頂邊距設置為50px：
margin-top ： 50px ;
而對于導航div我把它設置為：
margin-top ： 0px ;
這將其頂部邊距設置為0像素，因此它會比centerDoc div高50個像素。我建議你將導航div的位置放在HTML中的中心文檔div下面，看看它是否改變了任何東西，你會看到div在實際的HTML代碼中出現的位置與它的顯示方式無關給用戶現在已經使用了CSS定位。另一個嘗試是玩CSS值，看看會發生什么，改變填充，改變邊距等。
我們將在第3部分結束對CSS的討論。
1.第一個<body>標簽頂部顯示的HTML對于頁面非常重要，但實際上并不直接與頁面中出現的內容有關（從用戶的角度來看），所以我不會在這篇文章中討論它。