00:00
好，我们接着来看啊，刚刚我们介绍了一下CSS，并且第一次使用了一个我们CSS来设置样式啊，注意这个就算是CSS了啊，这个东西其实也非常的简单啊，非常简单，那接下来呢，我们来看一下啊这种方式，呃，其实这种方式我们叫内联样式或者行内样式，这种方式我们在开发的时候，实际上是我们不推荐使用的啊，不推荐使用的为什么不推荐使用啊，这里边我们来看一下啊，我直接写一个P标签，写什么呢？诶写一个今天天气真不错，真不错，我写这么一句话，这一保存我们来看现在我这个今天天气真不错，这句话有没有用上，红色字体，60像素的大大大小有没有用上，哎，并没有用上这个效果，为什么？哎，为什么？很简单，因为我们的这个style标签是写到这个P标签里的，有没有写到这里边没有，那如果你希望这个里边也是一个红色的字体，也是一个60像素，那你得怎么办？哎，你得接着写style标签，我们来一个color，来一个red，再来一个fo，一个size，哎，Fo fo size，然后size来什么呢？来一个60像素，再来一个分号，这个时候它是不是才有这个效果呀？哎，才有这个效果，那如果我前面还有一个呢，我再写一个是吧？哎，落落霞与孤鹜齐飞。
01:34
诶，秋水共长天一色，我写这么一个，这东西有没有影响，没有影响，那这个时候我要让它也是红色，也是60像素，我是不是得把这堆字儿在这儿，我还得再。复制一遍呀，哎，我要有三个，你得复制三遍，我有四个得复制四遍，我有100个呢，那你得复制100遍，哎，所以这里边我们来说一下它所存在的一个问题，使用我们这个内联样式啊，内联样式我们的什么呢？哎，我们的样式，哎只能什么呢？只能对一个标签生效啊，只能对个标签生效，如果什么呢？哎，如果希望我们这个影响到什么呢？到多个元素，我们必须什么呢？诶必须在每一个元中都什么呢？诶都复制一下啊，都复制一遍，当然我们还会有一些其他的解决方案，对吧？但是他现在来看的话，我们还必须得这么做，对吧？必须得都得复制一遍，但是注意，这个其实也不算是什么大问题啊，不算什么大问题，复制就复制呗，是吧，我就爱复制粘贴CTRLCCTR。
02:47
CTRLCCTRL特别特别快，对吧，就复制呗，但是呢。哪比较麻烦呢，我复制无所谓，复制一遍，复制十遍，复制1万遍都无所谓，因为这是有数的，但是我们网页写完了是不是就就不变了，不是写完了我们是不是可能要维护啊好，现在假如说这个样式，我现在复制了1万遍，诶假如说。
03:12
有一天我不想用红色了，我想用黄色了，我不想用60了，我想用55了，那这时候你怎么办？你复制1万遍，那你改的时候你就得改1万遍，你复制一千一亿遍，你改的时候就得改1亿遍，那这个时候我们维护起来是不就得很麻烦，哎很麻烦，并且诶当样式发生我们这个变化时啊，发生变化时，我们还有什么呢？我们必须要一个一个的什么呀，修改，诶非常的什么呀，非常的。不方便，所以我们这个行内样式主要一个缺点就是不方便们的一个维护啊，不方便我们的一个维护，当然它还有一个缺点，还有一些缺点，对吧，还有一个最主要的缺点，我们这还没有说这个东西我们需要在后边再说啊，后边再说，但是总之就是一句话，哎，就是一句话，注意开发时诶开发时绝对诶绝对不要使用我们的内联样式啊，绝对不要使用内联样式，一定注意绝对绝对绝对绝对不要使用内联样式，哎，因为我们说了，你的HTML就是什么HTMMR就负责结构，我们的CSS就负责表现，你们两个是不是各干各的事啊，那现在你看我是不是等于又把这个CSS直接和A码写到一起了，哎，以这时候它俩的关系又够近了，越近，他俩离得越近，我们维护起来就越麻烦。所以最好是什么？最好是？
04:48
你这俩离得越远越好，对吧，越越好，那这个东西啊，开发时绝对不要使用啊，绝对不要使用啊，但是我们测试的时候无所谓了，但是开发的时候就不要用，哎，那你不让用，不让用不用呗，不让用用啥呀？哎，那接着我们来说第二种方式，第二种方式我们就往上挪了，其实这种方式产生的主要问题就是我的样式是写到了标签的里边，标签的属性里，标签属性里，那我们怎么去解决这个问题呢？所以这里边我们来说第二种方式。
05:21
第二种方式我们干嘛呢？哎，我们将我们这个样式编写到我们这什么呢？编写到这个hi的中的style标签里啊，Style签里什么意思？Hide中的style标签里，那你就不用废话了，你直接在hi里创建一个这个sta就完事了，也就是说干嘛呢？我在这里边我专门创建了一个标签，这个标签里边专门用来写样式，我可以把所有的样式全都写到这个位置啊，所有的样式全都写到这个位置，这样我样式统一写到一起。第一点是不是就方便和维护啊，我想改样式直接去这儿改，我就不用再去页面里找了，对吧？这是第一点，第二点在这儿其实还会有一个更方便的，我在这里边我可以同时为多个标签来设置样式，而且只需要设置一次，我就可以让多个标签去受到影响，那改的时候也好改，写的时候也好写，就是。
06:21
各种好呗，啊各种好，那现在其实这儿的语法跟这儿的语法是一样的，你可以直接把这东西给它粘过来，CTRLCCTRLV直接粘过来行不行呢？哎，肯定是不行的啊，肯定是不行的，为什么这么写不行，你想一下这个东西虽然算是CSS，但是之前我这个东西写到哪了，写到的是标签里边了，那OK，我知道了，我这个样式就对这个标签生效，对别的标签是不是没用啊，哎，就没用，但是如果你把它写这儿来，那它写这了，那问题来了，这玩意儿。对谁生效啊？是给谁设置的？是给PE标签设置的，还是给H1标签设置的，这是不是看不出来呀？哎，这看不出来，所以在我们死带标签里写样式的时候，我们先要写一个东西，这个东西叫什么呢？叫做CSS的选择器，比如说我就可以直接写一个P，这个P表什么呢？这个P就表示P元素，然后后边紧跟着一个大块，这表示什么呢？我就要给这个P元素来设置样式了，你可以把给P元素设置的所有样式全都写到这个大块里边，比如说color，那这个时候语法就跟这个style的语法一样了，如果给它设置一个颜色，比如说我直接来一个color color来什么呢？来一个yellow，你看这个字儿是不是就变成黄色了啊，黄色有点不太清楚是吧，我们换换一个不，这意保存这个字就变成绿色了，哎，变成绿了，所以注意了，这个P表什么意思，表示页面里的所有P元素后边样式是。
07:59
一样的啊，所有素，那它跟我们之前那个比有什么好处，之前那个我只影响一个，那现在看着我这再加一个。
08:08
我把这复制一下啊，CTRLCCTRLV，那注意了，我问你了，这个里边的文字变变颜色，诶我们粘过来一看，变变颜色，也变颜色，为什么？因为我这儿设置的是一个P元素，是给所有的P元素都设置背景颜色啊，所有的P元素都设置这颜色，同理，你说我这样再设置一个大小，也是直接来一个放size，我们来一个50像素，这时候一保存所有的P元素就都变了，这这不管你几个，你有十个就十个变，你有100个就100个变，你有1万个就1万个变，写一个影响1万个，比我刚才那个复制1万变是不是要强，强太多了，哎，强太多了啊，所以注意这也是一种写法，但是一般情况下这么写的话会比较不方便阅读，所以我们写的时候一般会格式化一下，也就说我会每一个样式在一行这个大块呢，我们就直接写到这个外边啊，写到外边我们会有这种格式写，相对来说会比较的整洁一些啊，比较方便阅读一些。
09:08
好，那这个是我们说的一个第二种方式，第二种方式我们叫什么呢。叫做一个内部样式表啊，将样式编写到hide中的style标签里，然后什么呢？然后通过我们这个CSS选择器，哎选择器来选中元素，哎来选中元素并为其哎并为其设置各种样式，它的好处是什么呢？我们可以诶同时什么呢？我们可以同时为多个标签设置样式，并且什么呢？并且修改时诶修改时只需要什么呀，只需要修改一处哎即可全部应用啊即可全部应用，这个就是我们说的第二种方式，叫做一个内部样式表，说白了它的好处就是什么？哎，这样式我写外边来了，我没写标签里边，等于我把我的CSS和HTL给它分开了，一个在这一个那。
10:15
这两个是不是就离得比较远了，分开以后的好处就是我这写一个，我是不是通过选择器来选中这个元素的，哎，我写一个所有的P元素就都有这样式了，写一个就干嘛了，哎，就好几个都能都能用上，也就是说我们这个样式更方便什么呢？叫做一个重复使用啊，重复使用，所以啊来说一下我们的内部样式表，哎，更加什么呢？哎，方便对我们这个样式进行什么呢？进行复用啊，进行重复使用啊，进行重复使用是这么一个东西，那好，那接下来我们接着往下说，这种方式是一个比较好的方式，或者说至少它比我们那个内联样式要好得多啊，要好得多，但是它会不会有别的问题呢？
11:04
假如说我在这儿啊，我想新建一个文件，我叫一个零二啊，刚待会儿我们来讲要讲这个CSS一个语法了，哎，CS语法点一个HTM2，我先创建这么一个文件，那这个时候呢，现在来看，那比如说啊这个样式P标签颜色是绿色，自家小是50，我在这个页面里。我也想用。我也想用，那我怎么办呢？那现在来讲，你就得把它CTRLCCTRLV，你是不是得给它粘过来让他用啊，哎，粘过来才能用，也就是说我们的这个内部样式表，它也会有什么，它也会有问题，有问题有什么问题，哎我们的什么呢？内部样式表只能什么呢？哎，只能对一个网页起作用啊，只能为对一个网页起作用，所以什么呢？诶它，诶里边的这个样式不能什么呢？不能跨页面进行复用啊，不能跨页面进行复用，所以就意味着我现在这个OK的确是能重复使用了，但是重复使用是有前提的，就是你得在当前页面啊，你得在当前页面，你想在别的页面用，对不起，能不能用。
12:28
不能好，那现在哎呀，出现问题我们就解决问题呗，那现在我希望我这个样式啊，我先给他住了，我现在希望这个样式不仅仅可以在我们的。这个页面有还可以在什么呢？在别的页面中也可以使用，那怎么办呢？哎，那这个时候我们就要说到我们的第三种方式，第三种方式，第三种方式我们叫做一个外部样式表，很显然你希望你希望这个样式在网页范围内复用，你就不能把它写到标签里是吧？写标签里只对标签起作用，如果在网页范围内，你就要写到这个标签的外边，写到style里面啊，那现在我希望在什么呢？在网页多个网页当中使用，那很明显这个东西能不能写到网页里了，不能写网页里，你只要写网页里，那就意味着这个样式只对当前网页生效，所以一定要写到网页的外边，那问题就来了，网页的外边往哪写呀？哎，所以我们可以什么呢？可以将我们这个CSS样式，诶编写到什么呢？编写到一个外部的。
13:41
呃，CSS文件中，所以非常简单，我只需要在这儿新建一个文件，比如说我起个名叫做一个style.css名叫什么不重要啊，名叫什么不重要，扩展名必须得是CSS啊，扩展名必须得CSS好，那现在我们就创建好了这么一个CS文件，那接下来我就可以直接干什么呢？我把这个样式啊，我给你写这儿来，直接来一个P标签，P标签呢，Y别外啊，我们直接来一个color color我们来一什么呢？Color，我们来一个tomato啊，西红柿的颜色是吧？我再来一个放size，放size来一个这个100个像素，你看这写起来跟style维里的语法是一模一样的啊，是一模一样的，但是很显然现在这个样式在我的这个零一这个页面里有没有起作用，哎，一定注意它现在并没有起作用。
14:41
为什么？因为现在我的样式是写到了CSS文件里，而我的网页是零一_CS简介，这两个文件有没有产生关联，没有关系，这俩人是不是一点关系都没有啊？所以我们还需要做件事儿，可以将4S样式编写到一个外部的4S的文件中，然后然后通过我们的link标签来引入我们这个外部的CS文件，所以这个时候你必须把这个外部文件和我们的网页建立起联系，就像我们往网页里引入一个图片一样，而这块就不用img标签了，而用的是谁呢？我们叫做一个link标签啊，叫做一个link啊，Link标签你看你整完了，它的格式是固定的，它有一个属性叫re rel的值叫做style sheet style shitet，就叫做样式表style，样式sheet表style shitet。
15:41
叫做一个样式表，而这个re EF指定的是我们那个样式表的一个路径，那我现在是不是想引入star.css呀，这个文件是不是和我网页在同一个文件夹呀，所以直接写就完事了啊，点鞋盖style写style.css或者你直接写点CSS一样的啊，一样的，你会发现这一样是是用上了，哎，你看就变成了一个西红西红柿的颜色，对吧，西红柿的颜色，并且大小变成了100个像素，我调整一下，我调小点，我来一个50吧，50这字是不是就小了，哎，就小了，这个是我们说的一个外部样式表，那它有什么好处？
16:21
刚才我们说了我们的那些样式，这种样式内部样式表只能在我们页面里复用，那现在外部样式表有什么好处，它可以在我们整个网页，就是所有网页当中复用，为什么？因为它不是写在网页里的，而是什么写到外边，通过link引入到网页里的，也就意味着谁想用，你引入一下是不是就行了，哎，你想用这个样式，你直接引入，OK，这个东西对你就会生效了啊，所以就这么一个东西，所以这里面注意，然后通过link标签引入外部文件，那注意了它的好处，我们说了外部样式表。
17:03
外部样式表需要什么呢？需要通过我们这个link标签进行什么呢？进行引入，那这样意味着什么呢？哎，这样意味着只要想使用什么呢？使用这些样式的这个网页都可以对其什么呢？对其进行引用啊，意味着只要想使用这些样式的网页都可以进行引用。十哎，我们的样式可以什么呢？可以在我们这个不同的诶页面之间进行复用啊，又进一步提升它的复用程度啊，不仅仅是在我当前页面，甚至我已经可以跨页面复用了啊，在两个网页中都可以去同时使用这些样式。
18:03
啊，这个是我们的一个外部样式表，那这个是我们开发中，这是我们一个最推荐的一个使用方式，或者我们可以叫做一个最佳的一个实践啊，最佳实践，这是我们最佳的一个使用方式，我们开发中一般都使用这种方式啊，一般都使用这种方式，所以这个时候两种方一共是三种方式啊，一个是我们这个行内样式表，开发中绝对不用啊，就这内联样式是吧，开发中绝对不用，而我们的内部样式表相对来说用的也没有那么多，它至少不会大范围使用，一般情况下都是外部样式表啊，外部样式表但是我们在学习阶段是吧，因为内部的比较方便，所以我们一般用内部的去演示，但是开发的时候一般都是我们的外部样式表啊，它属于最佳实践啊，最佳实践好，那接着往下我们再来说，这个东西还没说完啊，还没说完，外部样式表还有一个特点注意了，我们将我们的样式编写到我们。
19:03
我们这个外部的CSS文件中，我们可以什么呢？我们可以最大限度的使用到什么呢？使用到我们这个浏览器的一个缓存机制，诶，就没有什么最大限度了啊，就是可以使用到我们这个浏览器的缓存机制，从而加快我们这个什么呢？网页的一个加载速度，哎，提高我们这个用户的一个体验，这个概念很简单啊，很简单，但是主要你可能对这个缓存机制不太了解，说一下你肯定见过，我们会发现，其实当我们通过浏览器去访问一个网站的时候，当我第一次去访问这个网站，往往访问的速度会比较比较慢，可能要花费好好几秒钟这个网页才能加载出来，甚至一下还加载不全，可能图片可能还要加载一会儿，对吧，然而呢，当我访。
20:03
访问过一次以后，我第二次再访问，有时候那网站嗖的一下就出来了，没有任何卡顿，那这是为什么？这是为什么？因为我们之前提到过这个问题，网站在加载的时候，它除了加载网页本身以外，它是不是还要加载它的一些外部资源呀，图片啊，音频呀，视频呀，包括我们的外部CS文件，它是不是都属于外部资源呀？哎，那为什么第一次卖，第一次卖是因为我浏览器以前没有访问过这个网站，没有访问过这个网站，我就没有对这网站进行一个记录，而浏览器它会有一个特点，当我访问过这个网站以后，比如说这个网站里边有个图片叫1.ppt，当我访问过这个图片以后，我会将这个图片暂时存到我浏览器的内存里面，也就是说我先把这图片存到本地存起来了，存了一个副本，然后在我第二次访问的时候，由于这个图片。
21:03
就是访问过了，访问过以后，这个时候第二次访问我就不再重新向服务器发送请求，而是加载保存到我浏览器当中的那个副本，那么想想从本地加载，还有一个是从服务器加载，哪个快呀？哎，很明显是从服务从本地加载更快一些，所以第二次访问会比第一次访问快，为什么？就是因为这些外部资源被缓存了，缓存以后访问就快，懂那意思吧，那同理我们的外部C文件也是一样，那现在什么情况呢？我有三个网页，ABC3个网页，如果我用的是内部样式表，这样式表写到自己里边，那这时候注意了，他俩，他们三个之间有没有关系，没有任何关系，你访问A跟你访问B跟你访问C1毛钱关系也没有，因为他们都是互相独立的，A有A的内部样式表，B有B的内部样式表，C是不是有C的内部样式表？所以它们是相互独立的。但是如。
22:03
如果我写的是一个外部的文件，那会什么情况？还是ABCABC他们同时引用了我的一个style.css同时引用了style.css那这个时候有什么好处？好，假如说现在我访问了A，访问A可能是我第一次访问，那A里边是不是引用了style.css啊？哎，那这个时候A就需要去加载，加载当然对A来说没有任何影响，就该怎么加载怎么加载就完事了。好，A访问完了，然后接下来我要访问谁呢？访问B了，注意了，B里边也引入了载SS，那这个文件我在访问B的时候还用不用重新加载了。不需要了，为什么？因为A是不是已经对这个文件加载过了，A加载完了，浏览器就会自动缓存，缓存完了，那么B只需要从缓存里去读取，是不是就OK了，哎，就不需要再去重新加载了，所以这个时候访问B访问C的时候速度都会有一个提升，那这就是我们说的一个缓存机制，能理解吗？诶，总之用我们的这个外部样式表访问速度会快一些啊，会快一些啊嗯，那这个是我们说的这么几种啊，第一种我们的内联样式不推荐使用，开发的时候可以用一下啊，啊不，不是开发时候不能用，测试我们学习的时候可以用一下，开发的时候绝对不能用啊。第二种方式，内部样式表我们也可以用，但是呢，真正大规模使用的还是我们外部样式表，开发中的十有八九都是外部样式。好，我们这节课先说这么多，自己尝试着把这两种方式再试试。第一种方式刚才已该试过了。
23:46
对吧，再把第二种方式，第二二种方式都尝试着去写一下，我们来评一下。
我来说两句