我们已经学习了CSS的基本语法，现在，让我们基于这些知识来创建网站。随着我们讲解的深入，我们将学习更多选择器，属性和值。 上节课。我们只是临时添加例子用于介绍css，现在，让我们删除掉之前创建的样式代码。 接下来，我们来创建一个独立的样式表文件。因此，我们将通过：文件=》新建，来创建一个新文件。然后保存，我们将它称为main.css，并且把它放在我们之前创建的css文件夹中 ： 那么， 在我们开始在main.css中编写代码之前，我们要确保将它被添加到我们的HTML文件中。所以，这将非常类似于我们以前写的CSS代码。我只需要复制normalize.css行，并粘贴到它下面，然后把名字改为main.css：

<head>
<meta charset = "utf-8" ><title>bangge | oxoxwork</title><link rel="stylesheet" href="css/normalize.css">
              <link rel="stylesheet" href="css/main.css">
<style>

我们保存下。这里，由于CSS的层叠的特性，我们的main.css放在normalize.css之后。这样的话，如果遇到相同的选择器，它就会覆盖的内容。如果没有遇到相同的，那么，它还是会保持normalize.css的内容，这正是我们想要的。 现在让我们跳转到我们的main.css。这里为了确保我们的CSS被正确包括，所以我们尝试加一个变化。这里我选择body元素，然后将背景颜色更改为橙色。所以，我将输入background-color并将其更改为orange： 

body{       background-color:orange;}

如果我们保存文件并刷新我们的预览，您可以看到整个页面的背景已更改为橙色： 所以我们就可以确实main.css已经正确地包含在我们的HTML文件中。 现在，我不想让我的body背景颜色为橙色，我们按下Ctrl + A，然后把这段代码都删掉。 假如现在，我想删除在我们的链接上的下划线，我不想看到有下划线的链接。所以我要选择我们页面上的所有anchor元素，我将键入属性text-decoration并将其设置为none： 

a{       text-decoration:none;}

如果我保存，回到浏览器，并刷新。 你会看到，我们的背景颜色改为默认的白色，并且在我们的链接上不再有任何下划线。 接下来，让我们开始组织我们的布局。我们需要添加一些标记，用来包装我们的内容的主要部分。为了做到这一点，我们首先要切换到我们的HTML文件，然后，创建一个叫做div的元素，div是一个没有任何语义元素。实际上，它是我们封装或划分一组元素的一种方式。让我们在header元素之后打开我们的div，在我们的header和section之间，我们将键入div： 

<div>
<header>

然后我们将在我们的footer和body之间关闭这个div标签。 

</footer>
       </div>

这里需要缩进div里面的所有代码。这将有助于保持我们的代码可读性，而且不影响代码的功能。 在实际的网站中，页面上肯定有很多个div，所以我们需要根据它的功能更具体地识别这个div。所以我们打开div标签，在这里，我要键入一个空格，然后我将添加一个id属来标识它。我们把id命名为wrapper，所以这个id属性将唯一标识div元素。 

<body>
       <div id="wrapper">
<header>

所以现在如果我们保存并切换到我们的main.css，我们可以输入#号，后面的id的名称。wrapper，然后我们可以使用花括号： 

a{
text-decoration:none;} 
#wrapper{}

这里就可以为我们刚刚创建的div元素定义样式了。 更多精彩内容尽在视频中！