到目前为止,我们已经为主页创建了大部分内容。现在,我们开始使用样式。 这节课,我们将学习如何分离CSS和HTML文件,然后将它们连接在一起。 首先,我们来到oxoxwork文件夹中创建一个CSS的新文件夹: 然后,来到我们的网站上,找到这篇文章,把里面的css文件下载下来,解压缩后,将它添加到我们刚刚创建的css文件夹中。 现在,但让我们打开这个normalize.css。如果我向下拉滚动条,你会发现它是一个很长的文件,有很多代码。这是一个特殊的CSS文件,它将重置默认的浏览器样式。比如说,它会让标题的字体大于段落,让项目符号列表具有项目符号,等等。 实际上,从一个浏览器到另一个浏览器的这些默认样式之间会存在一些不同。所以,在我们添加自己的样式之前,我们要使用normalize.css来消除这些差异。 现在。我们需要将这个css文件包含到我们的HTML文件中,以便浏览器知道这个文件存在,就像我们以前包含我们的图片一样。 因此,让我们来看看index.html,来到head中。不是header,所以不要混淆。现在,在我们的title下面,我将使用所谓的link元素。它和a标签不同,它不是用来链接到另一个页面上。它实际上只是链接到其他文件,以便我们的网页知道其它的文件是存在的。所以,我要在我的link元素中键入属性rel。对应的属性值是stylesheet。然后类似于a标签,我们将使用href属性,我们将键入相对文件路径css / normalize.css:

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

类似于我们以前看到的其他元素,这个链接元素是自闭合。它具有rel属性,rel代表relation的意思,也就是关系的意思,它描述当前文档和链接文档之间的关系。在这种情况下,链接的文档是一个stylesheet,也就是样式表。 接下来,是超链接引用属性,这里引用到的是我们刚刚添加的normalize.css文件。现在,让我们保存。并打开index.html。正如你可以看到的,还没有真正的变化。一些东西有点不同,比如说,我们的无序列表前面那个黑点消失了。这就是如何引用自定义样式表的内容,接下来。我们很快就会进入自定义CSS样式。 更多精彩内容尽在视频中!