00:00
好,我们开始来上课,那么今天呢,我们开始来走进我们CSS的世界,那么首先呢,我们先来了解一下我们CSS啊,CSS叫什么呢?叫做成叠样式量对吧?那么全拼是由这三个单词来去拼接的对吧?层叠样式表啊,那么它它主要作用干嘛呢?就是用来增强控制网页样式,并且与什么呀,并且允许样式信息与网页内容进行分离的一种标记性语言啊,而且CS也一样,不需要编译,可以由浏览器直接什么样解释啊,这就CSS啊,那好了,那咱们来看,他说是增强网页样式,并且允许样式信息与网页内容分离对吗?那我们就来看一下,先来看一下它这个个性啊,那在这里边我们新建一个HT文件,比如说这里面零一啊叫做CSS的作用。作用对吧,在没学csi之前,比如说我想改变一个这个页面的这个字体,那我可以通过什么呢?通过一个已经被舍弃的标签对不对,我们通过一个叫做放标签啊,我们可以去实现操作一个字体啊,叫做F。
01:03
Fort啊,结束的FT,你看当我写完以后,在这里边它是什么,它是直接拉黑的,拉不拉了一条暂助线的,对吧,那这里边比如说我写一下叫什么呢?叫做这个我是。文本内容。好了,那咱们来看啊,就看页面普通效果。有这样的一个效果对吧,那么我想改变它,我想改变它自己颜色怎么办?我说可以直接在这个字体标签里面设置它的属性对吧,然后设置,比如说我让它红色。红色对吧,那比如说我想改变自己大小呢,那是不是通过size属性对吧,比如设置一,那你看这个字就很小很小,看到了吧?哎,如果我设置为五。周里你看字是不是变大了对吧,那再来五入分为七。走,你是不是也变大了对吧,那我还想要再大呢,还想要再大,这个时候比如说我设置为什么为70。周里有大有变化吗?没有吧,哎,也就是说它所支持的最大字体就是什么?就是七对吧?哎,这是一个倍数啊,它是按倍数来的,这就是这么一个七啊,那么支持到期我想要再大还能大吗?不能了,没错吧,而且你想想页面中不可能就这么一个标签对吧?哎,也不可能说也不可能就这么几个,改改它的这些属性对吧?那你像如果一旦内容很多的情况下啊,肯定微微微微一旦很多很多的话,那这个时候你来看我的这些样式信息与我的内容是不是都在一起了。
02:30
对不对,这样看起来是不是就比较难看呢?那你看如果我单纯的就是一个普通的标签啊,叫做什么呢,叫做。融资教育。融资交易好了,然后你看这就是一个P标签对不对?单纯标签什么属性都没有,那么接下来咱们在这一块我想去改变它,S spyle,我通过CSS,比如说找到皮标签,然后干嘛呢?放到size先看啊,我能不能能增强样式ss SE,刚才我们看了放字体大小,最大是七是七七是多少我们也不知道对不对,那好了,比如现在这里边我给他固定了50像素。
03:03
诶,我要50像素的字体啊,那现在咱们来看刷新。看我的这个融资教育是不是直接是放大的,对吧,我说50像素满足不了我,我要100像素。走,你是不是又变大了对吧,或者100像素我也满足不了,我要什么,我要100毫米。那你看这个数走你。来吧,往下拉吧,看是不是又大了,这是不是已经在增强网页样式信息了,对吧?哎,这是第一点,好了,那咱们给它缩小,我说小小点啊,十毫米吧。来,那么接下来干嘛呢?比如说我这里边还要给他设置字体颜色对吧,Co Co color,比如说我给他设置什么呢?设置一个pink粉色。这个时候我们再来看。刷新哎,字体颜色也变化了,对吧,那我要想给他设置背景颜色呢。比如说我再给它设置个背景颜色BKGR-Co背景颜色啊,背景颜色变成PP紫色来,这个时候你看。刷新是不是紫色了对吧?哎,紫色要是配它的话,可能不是太好看,我换一个什么呢?换一个九号FFF啊白色。
04:07
自己变白了对吧,那一样,这个时候你看如果我页面代码有很多刷新刷新复制复制复制复制,你看始终是不是都是标签跟内容标签和内容对不对,没有这些过多的样式属性嘛,那这样看起来,这个代码看起来是不是就比较好看一些,比较清晰啊对吧,那你看我刷新整个的关系都是变的。看到了吗?哎,所以CSS的作用你看,第一我可以干嘛呢?用它增强往年样式对不对?第二呢,我还能让让这个这个样式信息与什么与这些代码进行分离,没错吧?哎,这就是咱们CSS的好处啊,那么一个是用来增强网页样式,第二个是样式信息与内容分离的这么一种标记性语言啊,那么CSS的基本语法有哪些呢?咱们来看csi分别有什么有选择符、属性以及属性取值组成啊,那么选择符是什么?刚才我是不是用P标签去写的,那这个P就是选择符,也就是说我要选择所有的P标签对吧?然后接下来呢,设置它的颜色对吧,Color对吧,这就是我们的属性,那颜色值呢,就是yellow green,这是颜色值对吧?也就是属性取值,也就是说CSS有什么由这个选择器对吧?属性以及属性取值来组成,那你看这里边我是不是一样选择器对吧?属性及属性取值对吧?那么属性跟属性值之间用什么分割,用冒号分割对吧?那么多个属性之间用什么分割,用分号来分割对吧?
05:30
这就是咱们CSS的基本语法啊,你看CS大小写也不敏感啊,但是推荐使用什么小写,然后属性和值之间用什么用冒号分开,多个属性之间用什么用分号来分开啊,这就是咱们CS的基本语法,另外csi里边也可以书写什么注释,对吧?那注册的好处在咱们讲一条码我就已经说过了,对吧?比如说现在我不想让它背景颜色变紫色了,那OK,我给它注释掉,不行,不能注射它啊,我要背着这个这个字颜色,不想让它变成白色了,我给它注射掉,对吧?你看是不是直接以星线斜线星开始,以星斜线结束啊,那这个时候咱们来看,我再来刷新我的字体颜色,是不是变成黑色又回到原来了。
06:07
对不对。哎,这就是什么,这就是咱们的这个注释啊,但在CSS注释里边有一个特点,什么特点呢?比如说我整个样式都不想要了,那我从这块儿开始注释,对吧,一直是不是到这结束。对吧,那现在你看对于编辑器里边,它的这个就已经没样式,就已经没有颜色,就已经没有变化了,对不对,那现在你看我来刷新页面啊,来刷新。最后耳的这个背景颜色它还给我支持,还能给我识别,看到了吗?哎,背景颜色还能识别对不对?但实际上这里边是不是都是我要注释的,哎,所以我们在编写csi注释的时候,大家一定要记住啊,注释是以线线星开始,找到离他最近的新形象结束,后面的内容他就不管了,明白吧?所以你要想把整个都注释,那中间就不能再出现它了,对吧?这个时候你看我再来刷新。是不是都是注释掉的,对不对,哎,所以在我们使用注释的时候,大家一定要去注意一个问题啊。
07:00
要注意的是。在。CSS中啊,注释不能包含。对吧,因为什么呀,以这个因为。乙。斜线星。开始。开始啊,会找到离自己最近的星斜线。结束。结束对吧,所以注释中不能再包含注释啊,这就是咱们CSS的注释啊,那好了,那注释我们了解了以后,我们再来看,我们可以放置CSS的几种方式,对吧?那么第一种方式其实我们已经接触到了,我是在哪放置,我是不是在这个页面中放置的,对不对?那么还能怎么放置呢?比如说在这里边我单独找一个啊。算了,在这吧,Div,我给个div啊div标签,然后这里面写一个叫做什么呢?叫做这个在工作中学习对吧?在学习中工作好了,那么现在我们来看,在这里边一样啊,我们再来刷新这个页面,这里边有个div了,对吧,我怎么样去可以去设置它csi样式呢?在这里边我可以通过style标签T。
08:14
Le style标签style属性啊style属性直接来设置csi样子,比如说我想让它的字体颜色对吧,变什么变成这个WH白色对吧,然后再来,比如说背景颜色变成什么呢?变成不要pink super紫色对吧,然后呢,放的杠size,我说它100像素。诶好了,那现在你再来看这个时候找你有没有变化,是不是也有啊对不对,哎,但是这种样式呢,它用起来比较灵活对不对,他想在哪个标签里边用,你就直接去写就行了,比如说这里边style标签对吧,我给他一个什么,给他一个这个BA back,然后。杠C。来一个什么呢?来个这个阿Q。对吧,这里边我们也给它补全啊,叫杠C好了,那现在你来看啊。
09:01
刷新是不是这一行变了,哎,是不是比较灵活,我在哪块用,我是不是就在哪块,但是我这么用是不是就失去了样式表的一个特点,什么特点,是不是样式信息与代码分离的这个特点啊,对不对?咱们CR的主要作用就有两个对吧?第一个作用干嘛呀?第一个作用增强我的样式信息,第二作用呢,就是允许样式信息与这个内容分离,那我如果用这种方式直接在标签里面写style,这种方式是不是就是。失去了这个特点对不对?样子进去与内容是不是就没有分离啊?对吧?哎,这就是咱们第一种放入CS样子,也叫做什么呢?内联样式表,也叫做行内引用,那么内联样式表比其他方法更加灵活,但是需要和内容,需要和展示的内容干嘛呀混在一起,那么内联样式表会失去样式表的优点,什么优点,就是刚才我们说的这个优点,对不对啊,这是第一种放置CSS是样式叫什么呢?内联样式,那么第二种呢,叫做内嵌样式,也叫做内部引用,什么意思呢?就是在这里面,你看我在hi的标签里面放了一个什么style标签,对吧?在这个style标签里边去写一个样式,就是刚才我们这样的一个结构,对吧?我在这里边找到所有的P标签,然后呢,我让所有的P标签的比如说放到刚。
10:10
变成50像素对吧?这叫什么呢?这就叫内部引用的样式,那这个时候再来刷新,你看所有P标签的文字是不是都变大了,看到了吧?哎,这就是咱们的这个内部样式表,那么内部样式表一般什么时候用呢?适用于一个HTM文档具有独一无二的样式时候,也就是说当我设置了这个样子,这个样子只供我当前H文档使用,那这个时候我就可以在这里边去设置,对不对?当然你也可以考虑干嘛我在这里边每一个都加style,每一个都加style,那这样的话是不是就比较浪费?能明白什么意思啊,那你要想改,你看是不是就是代对吧,等于什么等于方的杠size设置为50像素,那你说的每一个都加才才能变化,哎,所以这个时候就不适用于用行的样子,就比较适用于什么内部引用了啊,直接找到这个元素,然后干嘛呀,找到这个标签以后给他批量进行设置了对不对。诶,这是第二种方式啊,那再来看第三种函式,叫做外联样子表,也叫做外部引用,干嘛呢?它是通过link标签对吧?然后设置这三个属性来去引用的,那么其中第一个属性re ell之前我也讲过,对吧?Rel干嘛呢?表示当前文档与被连接文档的关系,什么关系呢?叫做样式表的关系对吧?然后typeb呢,表示被连接文档的类型,这个类型指的是mime类型啊,那咱CSS就test-CSS对吧,然后最后CSS文件地址啊,那现在咱们来看在这里边。
11:33
比如说我想去引入一个文件,对吧,引入一个CS文件,那这个时候直接通过另一个方式来引入啊,然后have地址,然后还有一个什么,还有一个这个type。类型,类型呢是我们的case-CSS这是一个单标签对吧?然后iel呢是style c的样子表,然后地址在哪呢?比如说当前目录有个style.css这个文件,但这个当前目录有吗?还没有,我需要在这里边新建一个CSS的文件,叫做t style好了,这是不是有个style了?那么有了它以后,在这里边,比如我找的body标签,我让body标签的背景颜色变成什么,变成一个这个。
12:10
呃,是这个颜色吧,啊变成这个颜色,那现在咱们来看,只要是它们两个关联成功,那我一刷新我包的标签,是不是就是我浏览器的窗口,这个窗口里边所有的被是不是都变成。叫什么粉色对吧,不是粉色,是粉色来刷新。是不是都变成粉色了,整个这个窗口是不是都变成粉色了,看到了吧,嗨,那也代表着什么,我这个样式表是不是就连接成功了。没错吧,哎,那什么时候用它呢?我们推荐使用这种方式啊,为什么?这里边咱们来看外部样式表引用了这个外界的CS3文件,一般浏览器都有一个缓存的功能,所以用户不用每次都下载此CSS文件,并且外部引用对于内部和内联来说高效的是干嘛节省带宽,外部引用也是W3D推荐使用的标准啊,那么其他这些东西现在我们不懂,标记先记,怎么记先看好了啊。
13:00
使用外接的CS文件,这个我们已经看到了,对吧,能理解,那么在这里边呢,外部引用是W3C推荐的使用标准,也就是他官方推荐使用的,对吧?那为什么推荐使用呢?因为在这里边有解释,但这个解释现在我们还不懂,对吧?你看一般浏览器都有个缓存的功能,什么叫缓存呢?就是这个意思。啊,缓存就是帮我们暂时的存储啊,临时存储,比如说当前页面我从头大家执行对吧,执行一一次以后,我再刷新页面是不是还要执行,再刷新是不是还要执行,对不对,那好,那比如说我们加了缓存以后,那么它可能就不会再去请求某些东西了,就是直接显示了啊,不需要在浏览器再帮我们编译解析了,就是这个意思啊,就好比拿我们代码来说,你看。在这里边啊,你看当我立刻执行到这个代码,它浏览器执行页面代码可能是从上到下执行的,对不对,那么当执行到立的时候,他会发现干嘛,我是不是要去引入一个文件,对吧?那他就会去下载这个文件好了,那么当第二次再来执行这个图,那么他已之前已经下载过,因为有缓存嘛,帮我们临时存储了,对不对,那他已经下载过了,所以他就不再下载了。
14:02
就是这个意思对吧,这个时候他就干嘛,你看我已经下载一次了,第二次再来刷新时是不下载了,不下载是不是节省了带宽对吧,那只要一下载我是不是还要跑流量对吧?所以说这里边说浏览器一般都有缓存的功能,所以用户不用每次都下载只CSS文件,并且外部引用相对于内联和内嵌来说高效率是干嘛接种带宽,因为它只下载了一次,对不对,那你如果我都写到这种内部内部的样式的话,那你想浏览器执行,只要执行这个页面,是不是这些东西都会执行一遍,只要执行页面是不是这些东西都会执行一遍,而我通过这种方式呢?是不是他只要下载一次是不是就可以了。哎,就是这个意思啊,所以在我布局页面的时候,推荐使用这种方式啊,推荐使用这种方式,这就是咱们的这种。啊,三种这个连接csi样式方式,第一种什么呀,行内的,第二种是内部的啊,第三种呢,是我们的外联的啊,通过内个标签进行外联的,那么它这里边还有一种是干嘛?是我通过style标签里边也可以进行外联看到吗?但这种呢,只作为了解级别就可以了啊它是在什么?在当前CSS里面可以再次连接CSS样式,对吧?你看时代标签里面是不是可以直接写CS的样式啊对不对,那在这三样里面是不是又连了个C文件啊,就是这个意思啊,咱们来看在这里边,那同样比如说我把它注册掉了啊,注册掉以后,现在我们来刷新页面。
15:19
是不是没有背景颜色了,对吧,那在这块我们来。给他一个sle再加一个对吧,或者我不加了啊,我把它不加了,因为上面我已经有了,我就没必要加了,对吧,直接在这里边我通过什么ADD。去引入,引入谁呢?引入当前目录style加CSS好了,那现在我们来看我的背景颜色能不能变化。嗯哼。当前目录。直接艾putd。刷新来你看好使吗?都不好使对吧,这个文件都没有被我引入来,为什么啊,为什么我把它拿走拿出来啊,拿出来以后咱们看我单独来个style标签,在这个style标签里边我不设置任何样子,刚才这个style标签里边我是不是设置样子了,对吧?然后在这里边at。
16:17
然后引入文件在哪呢?当前当前目录以image啊不对,当前目录style CSS对吧,那好了,引入完以后,现在我们再来看。变不变,这回是不是就变了,哎,也就是说我们要想用这个CSS,用这个style去引入的话,那这里边不能再去加其他的代码了,对不对,来注释一下啊,如果使用import。也弱。文件啊,那么。在。Style标签中。不能再加入其他样式代码啊,其他样式代码啊,那么一样啊,这种方式呢,作为了解级别就可以了啊,那么我们常用的还是使用另一个方式进行外联啊好了那。
17:09
连接样式表我们会了,接下来还有一个问题什么呢?就是一样多重样式表的叠加啊,咱们看我这里面有三种连接对吧?有这个内部的有什么呀?有这个外联的还有什么,还有这个。行内的那么三种样式表的叠加,如果都设置了样式,他听谁的呢?对吧,以谁的为主呢?比如说咱们就是来看啊这里边嗯。就看这个吧,啊,融资教育这个找到这个P标签对吧,这个批标签呢,我给他设置了一个什么,设置了一个这么个东西,那咱换一个吧,嗯,我再来一个,再来一个什么呢?再来一个磁盘标签吧,磁盘标签叫行内元素对不对,哎,这里边我们给它来一个什么呢?来一个叫做。我。就是我看自己都上火好了,那这里边有一个内容了,对吧,那接下来咱们比如说在这里边直接style标签,我来设置,设什么呢?设置size为50像素好了,那现在咱们来看啊,在这里面刷新。
18:07
我就是我看自己的效果变了吧,哎,变了那没问题,那么再来看,那如果说我在这个style标签里边啊,在这块我来更改的样子,找到谁啊,找到SPA标签对吗?找到磁盘标签以后,给他放的杠size变成多少,变成100PX来你来看刷新。有变化吗?没有吧,哎,没有变化,那也就是说听谁的,是不是听我这个行内样子的了。诶哪去了,在这呢,对吧,我给他往上拿啊,拿到最上面来。方便我们来调试。这个东西呢,我们也给他注册掉了啊,注册掉不要了,然后我们以它为例啊,用link来引入啊,好了,现在你再看咱们来看再来刷新啊,在这最上面呢,我就是把他自己都上火对吧。哎,好了,那它没有变换,那它没有变换的话一样,这里边我再给他个HR啊,让他换个行。按照水平线啊好了,那接下来咱们再来看,我在这里面改变它的字体颜色呢,比如说在这个SPA这里面,我们给它一个什么,给它一个c y color为红色,红色不行了啊,给它来个绿色吧,GR Ren,绿色来这个时候我们再来看刷新,你看字色对吧,但是注意字体大小有变化吗?没有对不对,也就是说如果我们通过内部样式设置了一个样式,然后在行内里边有的相同的样式,它以谁为主,是不是以行内为主对不对?那再来看,那如果说我们在link里面再进行设置啊,在找到style这里边,这里边一样还是找到SPA,我在link里边还是设置放down size200小数来看可不可以。
19:36
可以吗?不行,没变化对吧。好,改变它的颜色呢,比如说在这里边来个c color变成什么呢?变成一个黄色吧,Yellow。黄色来看能不能变。你诶这回能变了,看到了吧,然后再往下来呢,还有什么呢,还有一个这个,比如给个背景颜色来,就让color为什么颜色为这个紫色来,你看走你诶背景变成紫色了,看到了吧,哎,那么也就是说在这里边,目前我们看到多种样式板叠加。
20:06
除了行内以外的行内是不是最优先级最高的,那剩下的谁是不是就是以link为主,对吗?但实际上是这样的,不是啊,实际上是什么样的,你看如果我把link切换,切换到这个style的上面啊,也就是说它先连着link再用的style,这个时候你看它的这个字体的颜色啊,来刷新颜色有变化吗?不是黄色吧,是不是变成绿色了,绿色是谁设置了,绿色是不是它来设置了?对不对,哎,所以说也就多重样式表叠加,它遵循的一个什么原则,一个就近原则,谁离我的内容最近,它就就没了,那你看这个是不是离内容永远都是最近的。没错吧,哎,然后再往上呢,CD内容近是不是他离内容是最近的,所以听他的对不对,有了不同的听他的,那再往上呢,他离内容是不是最远的对不对?哎,所以什么它的原级是不是最低了,对吧,实际上是什么样,实际上是这样的,当我正常加载页面。
21:00
加载页面这里面设置了三个样式对不对,分别设置什么?设置了背景,设置了字体大小,还设置字体颜色,设置这三个对吧?那没问题,它确实设置成功了,但是代码再往下执行,这里边是不是又找到什么,又重新设置了,哎,重新设置什么?设置它的字体为50,它的这个颜色为绿色了。对吧,那这时候是不是就是有背景,有字体大小也有颜色了,对吧,那么再往下来的时候,在这里边我又改变了什么,又改变了诶。这啊,又改变成一个大小,那最后大小是不是变成50了对吧?那字改变大小,那字的颜色呢,是不是依然是绿色,然后背景依然什么,是不是就依然是这个紫色,所以最终我们是看到了这个效果,对吧?所以这里面大家要明白啊,依照后定义的优先,所以优先级最高的是内联样式表,然后连入的外部样式和内部样式表之间是最后定义的优先,对不对,也就是说谁离我的内容最近是谁优先呢?能理解吧,哎,这就是咱们的这个。啊,叫做多重样式表的叠加啊,那OK,那现在我们对于CSS已做了基本的了解对吧?我们知道如何去连接一个CS文件对吧?哎,去编写CS样式,也知道CSS的基本语法分别有什么,有选择器对吧?属性以及属性取值组成了,那剩下我们是不是要学习这一组了,对不对,也就是说我们要知道都有哪些选择符,是学选择符的目的干嘛?是不是就是快速定位到我要选择的内容啊对不对?然后接下来都能去设置哪些属性,以及属性取值是什么,是不是我们对CSS就掌握了?哎,那OK,这节课我们。
我来说两句