00:00
刚才咱们说把一个CSS呢,写到了一个标签的里面,这种写法呢,我们称之为行内样式表,那除了CSS可以写到这里之外,还可不可以写到其他的地方呢?哎,那答案肯定是可以的,可以放到哪个地方呢?哎,可以放到另外的一个地方,是放到到我们的he与杠he之间,那这种写法呢,我们称之为内部样式表,好,我们看一下内部样式表也称之为内嵌样式表,它的写法呢,是不再是写到行标签内部了,而是写到了一个he的头部标签之中,能在这里面看,我这呢,新建了一个文件,它是写到了hide与杠hi的中间,一般我们习惯性的是在杠ha的上方写成一个这么一个东西。当然了,同样道理,你不能直接写我们的CSS,首先我们先用一组标签把它们包起来,叫做style,好,写完之后呢,我按回撤会生成了这么一组标签,这个标签也不要慌,同学们跟我来看一看。
01:00
首先style这个咱们不陌生,刚才咱们写行内式的时候,是不是也有这个东西,哎,只不过是个属性,现在呢,它变成了一组标签,相当于就是告诉别人是做了一组声明,同志们注意看了啊,这个style-style中间写的所有的代码都叫CSS,是不是相当于做了一个CSS的标签呀?好了,那么它不等于test-CSS type类型,Test文本CSS,那不用说了,是不是就是一个文本的CSS类型,那也就告诉我们这一组讲的就是CSS了。好了,那在这里面写上我们想要的CSS就可以了,这是首先说了,是不是位置已经发生了变化,是写到了氦与杠ha的中间,那里边我们应该再怎么写呢?哎,它也有自己的规范,给我来看它的写法的要求,写完之后呢,第一个跟选择器,然后呢,下面再给我们的属性和值,这个呢,我们不陌生,刚才行内式都反复用过了,关键是它有一个这个是不是叫选择器的概念,选择器简单理解就是选择谁。
02:04
听懂了,同学们选择谁,也就说你要给谁改样式就选择谁,把那个标签写上,其实选择器你这儿就是来干什么呀,哎,选择的标签哎,这么来记会更好一些,我是给你做了一个小注释,好,那比如说我要做这么一种效果,我刚才呢,这个页面里面内容,我提前做好的内容比较多啊,给你展示一下,看一看,能这是这个页面内容,我想干什么呢?我想把忆江南唐白居易这一个给他换一个颜色。那我想给它换成,比如说改成这种效果是不是一江南唐白居易变成一种绿色,那你想变绿色应该怎么办呢?还是刚才我说的第一个是不是叫选择器啊,选择器就是选择谁,哪个标签在哪个标签呢?你看忆江南唐白居易是不是放到了一组H2标签之中啊,那简单了,你只需要在这轻轻的写上H2就可以了,好,敲一个空格,跟上一组花括号,这是我们的一个语法规范,H2就是选择器把HR给选择出来了,你选择谁就写谁就行了,就是选标签。第二个呢,你想改什么呢?改颜色,那就是还是跟我们一样,Color改成冒号空格,然后呢,改一个绿色,Green是绿色的意思,这样我们就给它改了一个颜色,改完之后呢,我们保存一下,刷新一下,看看能不能出来打开我们这一个刷新一遍走,诶果然是不是变成了一种绿色啊。
03:27
那我还想给它更改的稍微的小一点,那也可以,没问题也可以给他改,那同样道理呢,你在它的下面啊,敲回车,我们喜欢竖着写啊,一定要竖着写,在后面写成一个front-size这个呢我们也写过,然后呢,改成一个十啊,我改成个20PX,别忘了跟这个PX单位哦,哎,改完之后同学们再给我来看变没变,你变你变你变怎么样,是不是已经变小了,也变绿了。哎,这这个这个标题变绿了对吧,好的,那这样的话,我们这个就给它更改完毕了。那除了这个之外呢,还可以改吗?你比如说这儿,你看作者介绍,注释,还有品评,他们通通的都是给的是一个紫色,那我就可以把他们选取出来,是不是直接给个颜色就行了,这个就类似于我们班的同学,我想找某个同学起来帮我回答一些问题,那我肯定第一步是不是先点你的名字啊,先把你选出来,你才能回答我的问题,这是选出来的过程,这就是选择器的价值。好了,那么他们这四三个都是H4 H4 H4都是H4,那么我就可以在这里面去写了,注意我要给谁改颜色,哎,H4改什么色?
04:40
跟上一组花括号里面跟上我们的color改成purple purple是紫色的意思,我们又选了一个颜色purple OK,那么改完紫色之后,我再打开浏览器,我们刷新看效果啊,走,哎,果然是不是所有的H4都变成了紫色,哎,这时候同学会发现呀,这个比刚才行内是要好好多了呀,如果你要是用刚才的行内式去写,是不是需要这个要写个样式,这个写个样式多费劲呢,你要是用我们的内部样式表在上面,一句话,是不是就可以把所有的H4都改了一个颜色呢?
05:15
哎,You are very clever,你回答的是正确的,确实是这样子,这个比刚才是不是选择的面会更大了一些。好受此启发,我们想,诶,老师,这个页面里面所有的这个字好像都是蓝色呢,哎,是的,确实它们都是蓝色,那么它们是有哪个标签包含着呢?我们看,哦,原来他们都是P放到了P标签之中,那同样道理,我们可以把所有的P都选出来,改个颜色吧。哎,放个屁没什么大不了嘛,是吧,放个屁标签来改个颜色,Co color改什么色呢?绿色啊,蓝色,蓝色是blue,哎,这是我们的蓝色,当然这个蓝可能比较丑啊,好,我们后面再教给大家,改完之后呢,我们刷新走,哎,是不是果然所有的P都通了一个蓝色啊,当然看起来有点耀眼啊,好,不要慌啊,我们放上它就行了,那这样的话,我们就是内部样式表它这种写法。
06:10
好了,我们刚才已经教教给大家了,这种内部样式表的使用,我简单的给大家来做一个总结,首先我们的CSS不仅仅是可以直接写到我们一个标签的内部行内式的写法,还可以写到哪个地方呢?是放到了height与杠hide标签之中,这种写法呢,我们称之为内部样式表。这种样式表比刚才要好很多,因为它已经能够初步的实现了。结构与样式相分离,哎,同学们,你们有没有发现呀,下面是不是只有我们的标签,是不是只有结构啊?而我们所有的CS的样式是不是全部都放到上面去了呀?对不对,是不是结构和样式相分离的一种效果,是的,Yes啊,这种好,那么再来一个需要我们注意的一个问题,其实呢,理论上它可以放到HTM文档中的任何一个地方,按道理啊,理论上比如说这一个代码呢,你放到哪个地方都行,比如说我可以放到我的包底里面中的任何一个位置,你放过来我刷新页面,你看结果是不会有任何变化的,哎,但是呢,我们一般不会这么写,你看我们说结构就只有结构啊,所以我们都喜欢给它放到了上面,给它们和结构分开就行了。
07:26
那理论上只是理论上我们习惯性的,是我们通俗性的,不会随便乱放,都是写到he表现之中第一点。好,第二点呢,就是它不等于T-CSS在HTL5中是可以省略的,那也就是说打开往我们这个代码里面去,你看咱们写的这个文档是不是HTL5的文档,哎,是的,第一天我们学就告诉大家,我们现在学的是HL5文档,那么那你这句话就可以把它删掉了。不带的是吧,带着反而还还麻烦我们省略,省略完之后结果是一模一样,好吧,哎,那句话可以省略,我相信你也愿意去省掉它。
08:03
第三个它只能控制当前的页面,这个呢,我们要注意一下啊,所谓的当前页面,也就是说是你看。我写的这个HR是不是只对于当前这个页面它有个效果,你如果这儿呢,再有个HR它管用吗?就不管用了,在不同页面里面是不起效果,所以说它只管我们当前的页面,那这个内部样式表,我们总结完之后会发现,诶,它确实比刚才要灵活了一些,就比如说我们前面有一个问题很困扰,我们打开之后您看啊,这是我们上一课做的世纪佳缘的在浏览,其实打开我们会发现,诶,咱们前面说过,他们之间的距离是不是太矮了,也说距离太近了,能不能把距离调高一点呢?前面我说了,你前面别调,千万别调,等CS学完之后再调,好现在我实现我承诺的时候了,哎,我来实现我的承诺啊,那么我想把所有的行是不是高度给高一点就行了,那用以前的方法都很麻烦,而用了它就会更简单了,我们全当再复习了一遍,好,那我想把所有的高度,所有的行行是不是叫TR呀改高一些,那我用我们的内部样式表,首先找到he与杠,Hi中间在前面啊,刚前面写上一个什么呀,哎,Style就可以了,我们说了后面的句话是可以省略的,咱们就不写了。
09:19
都那么style已经写完毕了,在里面写我想要的一个效果,一般我们习惯啊,开播键缩进去,那我是不是让我所有的行高啊行高度改高一点就行了,所以说呢,我写一个行是什么呀,TR是不是选的T就是TR了,把谁选出来,然后呢,改高,我相信这个单词你不陌生,Height是高度的意思,我这儿呢,改个40,我随便写了一个,记住在我们CS里面,数字后面一般情况下都是要跟一个单位的,那我们这个呢,都是以PX表示像素,在这大家先暂且记住,后面我们会专门介绍好,那么高度改完40之后,我们再看一看,打开它啊,注意看变化,我F5刷新。
10:00
走一个怎么样,比这刚才是不是要漂亮了许多,看起来不那么小气了,不那么抠门了,哎,最起码他们之间距离有了,显得很大气一点,哎,这个确实非常好用,这就是我们讲的内部样式表,它的使用方式就是在我们上面去声明样式。在下面呢,只有结构初步实现了,我们的什么呀?结构与样式相分离,但呢,并没有很彻底。因为我们的最终的这一个CSS是不是还是在HTML页面里面写着的呢?OK,那能不能彻底分离呢?哎,那同学们先思考一下。
我来说两句