網頁設計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對于頁面非常重要,但實際上并不直接與頁面中出現的內容有關(從用戶的角度來看),所以我不會在這篇文章中討論它。