网页设计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对于页面非常重要，但实际上并不直接与页面中出现的内容有关（从用户的角度来看），所以我不会在这篇文章中讨论它。