视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015
我们已经学习了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：
然后我们将在我们的footer和body之间关闭这个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元素定义样式了。
更多精彩内容尽在视频中！
本文固定链接：
http://www.oxox.work/web/html-css/div/ | 虚幻大学查看原文：
http://www.oxox.work/web/html-css/div/
7994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
