20.尚硅谷_HTML&CSS基础_外部样式表.avi原创

接下来呢，我们来接着上午那个CSS来说，上午的这个CSS呢，我们介绍两种样式表，一个是我们这个，嗯，内联样式，还有一个是我们这个，诶我们这个叫做一个内部样式表啊，这种我们叫一个内部样式表，那我们说了现在这两种呢，哎，这样啊，我把它呢，CTRLCCTRLV，我复制一个来一个这个DEMO07啊，DEMO06啊DEMO06来我这块编辑打开它来，诶那这些呢，我们先留着啊，那这个呢，我们叫做一个内联样式，而这个呢，我们叫做一个这个内部样式表，内部样式表那我们说了内部样式表有一个特点，内部样式表它只能对我们当前这个页面起作用，上午呢，给大家留那么一个问题，什么问题呢？我说了，我希望这个样式它可以干嘛呢？在不同的页面里都可以起作用，比如说在我这个DEMO05里能用，在我这个DEMO06里嘛呢也能用，那我现在看现在能不能用啊，诶其实现在也可以用了。

那只不过我是什么呀，我是在DEMO05里边写了一个，然后是不是又在这个DEMO06里边写了一个，诶，我相当于写了这个两个，那这一块写两个就有点麻烦了，还是那个问题，那我们说了这东西方不方便复用啊，其实理论上讲它其实不算复用，我是写了什么呀，我是写了两遍吧，诶，那我现在希望的是什么呢？我希望的是写一个样式，在不同的页面里可以同时去使用，那我们来说了，那这个样式我还能不能写到这儿了。诶，那必然是不能了，所以把它住了，住了以后呢，我这一打开，咱们来看一下。诶是不是没有任何效果了，哎，没有任何效果了，那不能写到这儿，我要把它写到哪呢？诶来我CTRLC复制，我来说一下我们可以干嘛呢？我可以还可以啊，还可以将什么呢？还可以，还可以将我们这个样式表编写到我们这个外部的这个CSS文件中啊外部的CS文件中，什么叫外部的CS文件，来我在这儿右建新建一个文本文件，你叫什么呢？T style，点一个CS style点一个这个CSS，那这个呢，就是我们所说的一个什么呀，外部的一个呀，CS文件我可以干嘛呢？直接来编辑一下它把我们刚才那个样式原不动的给复制到我们这个什么呀，style.css里，诶那我这复制完了，那我们先说一个问题，那我这写完了，你说对我这个零有用吗？

诶，我们来试试啊，来一刷新走你，诶我们发现什么这块是不是没有任何的变化呀？诶为啥没用啊，我这新辛苦写完了，为什么没用啊，那注意了，现在我们来看我们这个DEMO06，还有我这个style.css这两个文件，它们之间有关系吗？没有关系嘛，现在是两个文件嘛，诶他们之间没有任何的关系，所以我如果想希望style.css这个样式表里面的内容可以对我这个DEMO06起作用，那我需要干嘛呀？我是不是需要把这个点CSS这个文件引入到我的这个DEMO06里啊？诶，那我们来看看怎么引入。

诶还可以将样式表编写到web的CSS文件中，然后什么呢？我们来说一下，然后通过我们一个什么呀，通过我们这个link标签来干嘛呢？诶来将我们这个诶外部的这个CS文件干嘛呢？诶CSS文件引入到我们这个当前页面中，那这样什么呢？这样外部文件诶中的这个CSS样式表将会应用到我们这个当前页面中啊当前页面中，所以我这块来一个这个。

Link，诶叫做一个link标签，注意它是一个字结束标签，它里边有这么一个值，叫做一个rel re是一个固定值，叫做一个style，一个het style sheet，还有一个type叫做什么呢？等于一个T斜杠CSS，注意这两个值是固定值，你就给它记住就行了，不用多说了啊，固定值记住行了，然后还有一个属性，我们说这还差什么呀，那你要引入外部文件，你要引入哪个外部文件，你是不是得告诉我们浏览器啊，所以这里边还需要一个叫做什么呢？叫做一个HRA，这个HRA指向的是什么呢？我们外部文件的这个地址，这里边直接写一个相对路径就可以了，那我们来看现在我们这个DEMO06和style点4SS是不是在同一个目录下啊，所以我这个h drive怎么写呢？直接来一个style，点一个CSS，诶这样我们来说就OK了，好，我们这一块来看一下效果，诶，如果我这个。

文件成功引入，那应该我这个红色字体，还有这个大小，是不是应该应用上了呀？诶我们来看看效果，直接一刷新走你诶是不是应用上了呀？诶那是不是那个样式表的样式啊，会不会是缓存呀，来这样我不用红色了，我来什么呢？来一个GR green，来咱们再看一刷新走，你是不是变成绿色了，那证明是不是确实我们这个样式表起作用了，哎，起作用了啊哎，那这是我们说写到我们这个外部的这个样式表里，那我们说了写在外部样式表里，它有什么好处呢？诶我们来说将我们这个CSS样式一编写到哪呢？统一编写到我们这个外部的这个样式表中干嘛呢？进一步，诶这不是进一步了，叫什么呀，叫完全使我们的这个结构和这个表现分离。怎么叫完全分离啊，在。

在它是不是都在两个文件里边了，这种分离方式是不是比我们这个更彻底啊，这个你是不是还能写到内部呀，哎，还写到内部啊，所以这叫什么呀，完全使结构表现和，哎结构和表现分离可以使什么呢？可以使我们这个样式表可以什么呀，在不同的页面中干嘛呀，使用怎么在不同页面中使用，谁想用，你用一个link是不是给他。引入就OK了呀，诶使用link给它引入就OK了，什么呢？诶最大限度的使我们这个样式可以什么呀？可以进行复用啊，可以进行复用，而且这里边不仅仅是可以复用，还有一个最大的特点叫什么呢？将我们这个样式统一写在我们这个样式表中，诶那我们说然后通过我们这个link标签引入，那我们说这是可以干嘛呢？诶可以利用什么呀？利用我们这个浏览器的一个缓存叫什么呢？加快我们这个什么呀，用户访问的一个速度，提高了我们这个用户体验啊，提高我们用户体验，诶这句话可能有些同学有点听不懂了，诶怎么就用缓存了，缓存又是什么玩意儿呢？那咱们举个例子，什么叫缓存？诶那我们会知道，当我们去上网，去访问一个网页的时候，当我们第一次访问的时候，这个网页它的加载速度往往会有一点。

啊，慢，为什么会有点慢呢？因为我第一次访问这个东西，对于我们来说是全新的，我要一点一点去加载吧，但是注意了，当你在第二次加载的时候，那我们说了，你会发现速度比第一次要快得多，为什么呀，因为我们已经访问过这个网站了，那我们网站里边这些图片啊，这些样式啊，这些GS文件等等一系列东西，实际上我们都已经加载过了，那这些已经加载过的东西，浏览器它不需要干嘛了，不需要重新加载，而是直接使用什么呀，缓存就可以了啊，而是直接使用缓存就可以了，所以这样可以提高我们的一个访问速度，那我们说了，我写一个外部的CSS文件，就怎么就提高访问速度呢？举个例子，现在假设我们有ABC3个页面啊，这是我们这个A，这是我们这个B，这是我们这个C，他们现在呢，都使用一个共同的一个CS文件，然后通过这个link编号给他干嘛呀，引入了咱们假设当我这个A，我用户先访问的是我这个A网页那。

注意啊，这时候访问A网页是不是第一次访问呀，那这时候他干嘛呀，他会去主动发请求去加载我们这个CS文件，那这时候呢，可能会稍微的要慢一点啊，慢一点点，那好，那接下来用户在访问这个B网站，但是注意了B网页啊，但是注意了B网页它和A网页引入的是什么呀，是同一个CSS文件，那问题来了，我问题了，这时候浏览器还用不用重新去加载这个文件了，诶那必然是什么呀，必然是不用了，为什么呀？因为他访问A网页的时候是不是已经加载过了呀，那访问B网页的时候他就不用再加载了，包括C网页是不是也不用加载了，那假如有D网页，它也使用这个CS，是不是同样也不用加载了呀？那这样我们说了，我是不是只需要加载一次，其他的所有网页是不是都不用加载了呀，诶所以说从这一个角度上，它也提高了我们用户访问一个速度，那提高了用户访问的速度呢，也就是提高了我们那什么呀，用户体验，所以什么呢，所以在。

在开发中，哎，我们什么呢？我们最推荐使用的这个方式，就是我们这什么呀，诶外部的这个CSS文件啊，这个是我们这个最推荐的一种方式，而这种内部样式表呢，我们也可以去用啊，也可以用，最不推荐的是谁呢？是我们的这个内联样式啊，是我们这个内联样式，好，那这个是我们说的这个叫做一个外部的样式表，我们先停一下。