00:00
刚才我们简单认识一下CSS以及它的主要作用,那CS确实非常好用,到底我们CS写在我页面中的哪一个地方呢?哎,在这里面呢,接下来我就要给大家讲解一下,我们怎么去把我们的CS引入到我们的页面里面去,OK,这个呢,就可以按照我们的书写位置,把我们整个CSS呢分为三大类,并我们来看,其中呢,第一大类我们称之为行内式样式表,或者称为内联式,第二呢,我称为内部样式表,还有我们第三个我们称之为外部样式表,最后简单做一个总结好了,也就说哎,我们CS可以写到哪个位置呢?如果按照书写的位置,是不是可以写到三个地方呀?我们先看第一个好不好,哎,我们讲到行内式,就是我们说的内联式啊,好了,那行内式呢,就是因为说他写的时候呢,是因为直接写到我们标签内部的,所以说它,所以我们称之为行内式的,OK,那我们看一下可以这么来做到这打开我的sub LA,然后呢,在这里面呢,写上一个,比如说我用个H1。
01:00
好吧,一个标签,然后写上世纪佳缘,哎,不是我在这的啊,我也在这里等你思密达是吧?好,这样我是不是写了一个标题,好,业务记在浏览器中打开一下走,这时我们看到是不是经有了老师,我能不能现在把它改成一个颜色呢?哎,可以,那你要改变颜色,你只需要在这里面这么写啊,我们称之为行内样式表,或者是内联样式表,因为它就是在我们的标签内部来写,同学们注意,Listen它是这么写的,在he的标签内部打一个空格,然后呢,写上一个叫style style就是类型的意思,行内似的,然后呢,你在这里面可以给它写一个颜色,好,那么颜色这个单词应该认识吧?Color冒号在这写一个冒号,看明白了吗?Style呢,首建一个引号,引号完之后呢,里面写上我们的属性是我要改颜色,第二个呢,后边写上你颜色的值就行了。哎,在这里呢,前面咱们说啊,Pink老师说,Pink老师说OK pink老师谁呢?哎,我们揭开其中的第一个小秘密,Pink老师因为他非常喜欢pink色,所以说我们称之为pink老师啊,好的,那就是color maha pink,这时候呢,我们就给他改一种颜色,我们称为粉红色啊,Pink就是粉红色的意思,打开完之后我们刷新看效果啊,启动开浏览器,在页面中我轻轻的一刷新走,你会发现哦,果然是不是颜色发生了变化呀,这个呢,我们就称之为行内样式表,那行内样式标呢,首先是通过标签叫做style的属性来设置的,能到这里面去,你看style是不是相当于就是这个标签驱动的一个属性啊,在这里面再写上我们要的CSS的属性值,因为你要改什么属性,在这里面去写它的属性就OK了,这个呢我们就称之为我们的行内饰的啊,行内饰呢有自己的语法规范,首先前面呢是写标签名,在标签名的后面紧跟着style开头,这是一个属性。
02:58
等于,然后呢,一组引号里面写上我们想要的,你要改什么样式属性,就写样式属性和值就行了,那实际上任何H码标签呢,都拥有我们的四大属性啊,你都可以写,这就不像我们H码一样了,那么任何一个标签你都可以通过这种行内式的来去更改。
03:17
好的,那改完之后呢,我们打开完之后,CTRL加S保存一下之后就能看到效果了,比如说你觉得老师我觉得颜这个字体有点太小或者太大了,我能不能再更改一些呢?还是可以更改的,如果你想再改一下,你只需要在这后面敲一个空格,哎,然后呢再写啊,字体front是字体的意思,杠然后呢,Size是自号的意思。看好吗?就是字体的size号码,字体的号码是多大呢?在后面你要写上一个,比如说我写上一个18PXOK,再加一个分号结束。好,那需要我们注意一个小地方,就这样啊, fo side18PX表示我这个字号呢,是18像素,这个呢,我们后面呢会专门给大家来讲,在这儿咱们大家先用一下好吧,但是呢,一定要注意它是不能省略的,后面必须是18PX,所有的字号大小都要跟这个才可以的啊。
04:10
那我们会发现,哎,如果有多组属性值,哎,我又改了颜色,又改了大小,那中间是不是空格隔开啊,然后呢,每一个的后面结尾的时候呢,一定要用分号结尾,哎,用冒号隔开,用分号结尾,这是它的具体的语法规范,好改完之后呢,我们再保存一下,然后再启动开我们的浏览器,再刷新一下走,哎,果然是不是字号就变小了,这一个呢,就是我们用的这个行内样式表的一种写法,好那么我们简单的来注意一下啊,其实呢,Style就是标签的一个属性,然后你看在我们标签里面再写一组,这个是不是就是一个属性了,然后呢,我们的样式属性和值中间呢,是用我们这个冒号隔开的,当然我们这个呢,属性是指的是什么呀?样式,哎,样式这里面包含的是样式属性和值,然后结尾的话,如多组之间一定用分号结尾,这是要求我们都更改就行了,好了,那么它呢,你会发现就可以完成我们想要这个效果了,保存一下,我们看一看那是不是能够实。
05:10
片了,那我们拿一个我们前面从来没有做过的,比如说势力家眼捏也在这里,是不是青春不常在抓紧谈恋爱,我们想是不是也要给这一个标签,是不是改成一种粉红色呀,我们的pink色好的,那么我们改完pink色之后就能看到效果了,快点打开到我们刚才我们前面写的中国案例,那它是不是在一个H4里面包含的呀,我们想要给它改成一种粉红色,来同学们,我带大家再来复习一下它的写法是怎么写的嘞,首先找到我们这个H4,在里面敲一个空格,然后呢,写上一个叫做style的属性,然后以引号。包起来,然后在这里面写上我们想的颜色Co color,然后呢,冒号,还有我们的pink色,Pink色是我们以后啊,我们的御用色,哎,我们黄金的御用色了啊,以后咱们就是专门专属的颜色了,所以我们叫pink,写完之后我们再刷新看效果啊,打开浏览器在这里面走,哎,发现果然是不是变成我们想要的这个颜色了,好了,那这是这个,那我再给大家再讲一个,比如说你看我们这有个叫所在的地区,按道理北京思密达这两个字,字字的颜色应该像人家一样,是不是一种浅灰色更好看呀,打开你看人家小米是一个,它的颜色是不是稍微的浅那么一点点,不要一种纯黑色,那或者是呢,我们可以打开我们的淘宝,你看打开淘宝之后这里面,哎,这个迷你水枪是不是一种浅灰色,来改个颜色就OK了,好了,那么我们想能改吗?可以改,那你只需要到这里面去改成我们这一个啊,那首先第一部分是不是先找到我们那一个呀,这个是不是所在地区叫。
06:46
北京思密达是不是这个框框,这个文本框需要改变里面的颜色呀,那我就到我们的结构里面去找那个叫什么嘞,文本框我们称之为哎,所在地区是不是就找到这个input的北京思密达,要不要给它改颜色,要给谁改颜色,是不是找到这个标签,在这个标签的内部。
07:06
你写的前面也行,写在后面也可以啊,好,一般我们样式都是写到最后面,写一个style等于什么改颜色怎么写?来跟我一起来说,Co color冒号然OK啊,灰色gray。哎。好,这个叫green,这个green的意思是灰色的意思,哎,同学们千万不要写错了啊,嗯,这个叫什么呀?Guy是不是?哎,我们不要啊,Guy同性恋啊,我们叫grey对吧,Grey就好了,好,写完之后呢,我们再刷新一下我们的效果,OK,到这里面走你会发现,诶,果然你看下面这个颜色是一个黑色,而我上面这个呢,是不是变成一种灰色会更好看一些,好的,这个,那剩下的你就把里面这个再去改一改,把它改成我们想要的颜色,同样道理,那下面的地方,你比如说这个你可以改成一个绿色或者是蓝色都行啊,那么这个呢,就交给你们,好,我简单的把我们这个行内饰它这个来给大家总结一下,所谓的行内饰,也就说是我的样式到底可以写到哪里呢?我们第一个,哦,原来我的样式可以直接写到我标签的内部,所以说呢,它是在一行内写的,我们称之为行内样式表。
08:14
然后呢,它的写法呢,是以这style开头,那style呢,就是我们说的其中的一个叫做属性,就是H码的属性叫style,然后呢,引号包完之后呢,里边写的是我们的样式属性,这个是不是叫另外一个样式了,好,写完样式属性之后呢,他们如果有多组,哎,如果有多组,那肯定是用分号隔开,然你看第一组和第二组中间呢,用分号把它隔开就可以了,好,如果在属性和值中间呢,一定要注意,咱们在CS3里面没有等号,只有冒号把它们隔开,这是两点大家要注意的地方就行了,这个呢,我们称之为行内样式表,当然了,行内样式表大家一看就会有一个缺点,对吧?什么缺点呢?就是按道理是我们实现叫做结构和样式相分离呀。但是你会发现样式最终是不是还是写到我们的at码结构里面去了,它并没有很好的实现一种分离的一种效果,哎,那你看它并没有实现我们结构和样式相分离,这是它的一个缺点,那我们在实际工作中里面不会大量的运用,只是偶尔的用一次,但是要求大家呢,也能够把它记下来,好,这是给大家讲解的我们的行内样式表的写法。
我来说两句