00:00
刚才咱们留了一个小的思考题,如何实现我们的结构与样式完全分离呢?也就是说我们理想中的状态结构是只有结构样式呢,就只有样式第二个,那我们如何实现我们CSS的样式共享呢?咱们好多好多的样式呢,都是相同的,我们有没有必要每次都要重新写一次呢?哎,但是这两个问题呢,我们会引申出下面一个知识点,就是我们要说的外部样式表,或者叫做外联式样式表,这种样式表呢,能够很很好的解决了我们想要的这两个问题,那这种样式表呢,也是我们最为重要的一种样式表,咱们后面呢,做的综合案例都是以它为知识点来做的。好,这一种写法呢,打破了我们前面的一种常规,它呢就是说是需要我们单门新建一个叫CSS的一个文件,这个文件呢专门存放CSS的,也就是说把我所有CSS呢全部拿出去了,然后呢再把它引到我的页面里面去,好的,那么我给大家来演示一下它到底怎么来做,这个很重要,打开完之后,这是我们今天要新建的这个案例,我在这里面右击我新建一个文件夹啊,这个文件夹呢,我们叫零四杠,然后呢,我们叫做外部样式表,好了,那我是不是新建了一个。
01:13
文件夹呀,在这里面呢,我们要怎么做呢?首先第一部分我们是这么来做的,打开完之后,首先我们CTRL加S我这个啊,打开完这个我们叫做这个还是零四杠,然后这个呢,是外部样式表,我建的这个。样式表示点HTL的是一个HTL文件,能给我来看,这是不一个HTL文件呀,里边呢,我随便写上一个啊,比如说我这呢,就写了一个H3,我写了一个H3标签里面写上来呀,是吧。啊。快活呀啊。反正有大把时间,OK,我是不是写在这么一段话,好写完毕之后呢,我再次新建啊,原来我们的CSS是写到了这个里面,或者写的杠的里面,但是你的CSS怎么写,是不是都是出现了我在这个at Mr里面了,只要你出现在我的at Mr里面就没有完全分离,那这次换了一个思路怎么办呢?我在CTRL加N新建一个CTRL加S,保存一个保存,为什么呢?这次呢,我保存了一个叫做我起了个名字叫style样式,点CSS哦,你会发现我们是不是第一次新建了另外的一个文件,它的后缀名呢,就叫做CSS,说明它就是一个CSS文件,好写完之后呢,我们直接点保存,那这就我们新建了一个叫做CSS的一个文件,建完毕之后呢,里面只需要写CSS就可以了,那写什么呢?你看我这个是不是有个叫H3,那我想呢,把它呢改一个颜色,现在你看它是没有颜色的,在浏览器中打开走,你看。
02:46
是不是没有颜色,那我想的给他改一个颜色,那我们就说它的写法注意了啊,他在CS色里面去直接写样式就行了,你要给哪一个标签改颜色,H3对不对,然后里面写变什么呢?变成我们最喜欢的拼色,好,那这样的话,我们的H3就给它写完颜色了。
03:06
看到了吗?好,CTRL加一保存完毕之后,诶,那我们这个页面会有效果吗?它肯定没有。对不对,那我们虽然已经实现了什么样样式结构写结构,样式写样式,但是呢,他俩呢,就好比是牛王和织女一样,他两个呢,还并没有认识呢,他俩还没有认识。哎,我们此时需要月老一条线把他们连起来,是不是这个意思啊,你看这个里面有H3,它需要样式,而这个呢,有样式需要给H码啊,但是呢,我怎么给他们建立一种联系,联系或者叫做连接呢?哎,此时我们就需要用到了,我们这个叫外部量式表中有一个叫做链接标签的,我们称之为link link它就是一个链接的意思,而且它是一个单标签,发现了吗?它是一个标单标签啊好,那我们来写一下,它是怎么来写的,到结构里面去啊,一定是谁需要呀,是不是HTML,是不是需要这个CSS?所以说HTL要引用写在哪个地方呢?还是老规矩,写到我们的head和杠head中间,我们一般习惯性的写到了杠head的上面,先括号,然后呢,输入一个link敲回车,好,此时会生成real这个啊,还有type这个,这个很面熟,还有呢,告诉我们这个real这个style呢,就是说它的意思告诉我们什么呢,就是定义当前文档与背。
04:26
练到间的关系,这儿呢,需要指定我们的style sheet。表示我们链接的文档是一个样式文件,也就是告诉我们我们要引入的是不是一个我们的CSS的一个样式文件啊,Style样式sheet就是表样式表的意思,好了,那么her这个我们是不是想到了谁,是不是想到了我们的链接也有个her路径是哪个地方,它已在哪个地方呢?注意路径的问题啊,在这里面它是不是直接可以调用这style.css就可以了,所以说呢,它来自于哪个地方呢?来自于我们的style.css就行了,那这就是我们的链接了。
05:00
这句话的目的就是给我们的HTML和我们的CSS是不是建立了一种联系呀,哎,那我给你记下来啊,这句话就是给HTML文件和CSS文件建立了一种联系,联系OK,这就是要我们这句话的意思,Link好,建完毕之后呢,我们再打开看效果啊,然后走,哎,果然是不是能实现我们这种效果了,这个就是外部样式表,它的使用规范,好,那么在这里面呢,我简单的带给大家呢,做一种总结,那我们的外部样式表是真正的能够实现我们第一个是不是结构与样式相分离呀,为什么呢?因为我们发现我们这么建好之后,整个H里面没有一句CSS代码。是还是不是是不是的呀,这个条码里面没有一句CSS,而我们所有的CSS都是新建了一个CS的文件,把它们放到了这里面来了。哎,这是我们的CSS全部在这个CS里文件里面去写的,那这个文件里面你写的时候一定要注意,不像以前了啊,什么style开头不需要,不需要style标签了,能懂吗?CSS就可以了,好写完毕之后呢,但是呢,H码文件和CSS它是两个单独的文件,必须跟他们建立了一种联系,或者说把CSS文件引入到链接到我们H码页面里面来,就是用了这句话。
06:24
那这句话呢,里面有三句代码,其中呢,第一个呢叫real star,这个呢是必须要写的,就告诉我们,我们引入那个文件是个CSS文件,第二个这个呢,是不是也是老规矩,是不是告诉了我们另外的一个,呃,也是我们说我们的类型是属于CSS的,但是这句话我们说过是不是可以省略的呀,在HL5里面可以省略,你可以删掉都没问题啊好,那再来有一个呢,就是her等于它这个呢,就告诉我们你引入的是哪个CS的文件呀,可能CS文件有很多,那你就告诉人家哦,我引的是starting CSS就可以了,那这句话我们必须要写上,而且这句话是写到hi于杠hi中间。
07:02
这是我们说的他这种写法。
我来说两句