HTML+CSS编写静态网站-13 包含外部css样式

来源：互联网发布：sql 镜像服务器编辑：程序博客网时间：2024/05/17 13:41
视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015到目前为止，我们已经为主页创建了大部分内容。现在，我们开始使用样式。这节课，我们将学习如何分离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样式。更多精彩内容尽在视频中！本文固定链接：http://www.oxox.work/web/html-css/external-css/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/external-css/
阅读全文
0 0