尚硅谷前端基础 (27)

好，那么关于我们这个HTML的内容呢，我们暂时先告一段落，当然并不意味着说我们现在的HTML就都讲完了，实际上还有一部分标签吧，我们还没说，呃，首先呢，有一部分我就不打算再一个一个介绍了，因为其实你会发现就这种，尤其是这种语义化标签，没什么好说的啊，你需要的时候自己去找一下就行了啊，你需要用什么啊，你需要这个东西自己去查一下就行了，因为我现在即使都给你过一遍，你也记不住，甚至包括我自己，我我自己都记不住，因为有一些标签确实用的并不是那么多啊，并不是那么多，所以了解一下行了，然后的话，常用的标签基本上都介绍完了，还差两大类，我们还没有说，一个是我们的这个。Table表格，还有一个是我们这个form表单，这两大类，我没说我打算把这个东西放到后边再说，为什么呢？因为现在说完了以后，其实也只是把这些标签给它过一遍，那我希望等我们讲完这个CSS，诶，再讲完这个标签，然后讲完的同时呢，我就可以用这些标签来做一些效果，所以接下来我们就直接进入到我们的第二块内容。

啊，我们的这个我直接在这儿呢，我直接新建一个文件夹，新建文件夹我们叫做一个零二，我就我们就开始正式的进入到我们这个CSS了，诶等于之前那个01IN introduce，其实就算是我们的课程的介绍，还有一个HTML相关内容，而我们这个零二这个文件夹里就都是我们这个CS相关的了，那在讲它之前呢，我们还是先做一件事儿，因为我们之前用我们这个Z有这个文档里边的话，实际上它并不包含我们这个CSS，所以这里边我们来把CS一起装一下，怎么装，还是tooth available，在这还是需要刷新一下，你看今天刷新就比较的顺畅，所以你用的时候啊，你用的是不好用的话，就可以换一天是吧，改一天或者换一段时间再用，因为有的时候网络可能不太好，直接搜索一下CSS或者C的话，位置也比较靠上，你直接找一下CS3是不是在这里啊，哎，我们直接选择我们这个download。

呃，当log在它下载过程当中的这文档可能稍微有点大，下载速度稍微有点慢，那正好我们要说一下，我们都知道现在我们学的这个HTML，它叫做一个HTM5HTML5，而我们学的这个CSS呢，它叫做一个CSS3，那这个玩意儿是什么意思？哎，那其实也很简单，HTML5就表示的是HTML的第五个版本，而4SS3呢，就表示4SS一个第三个版本，那最简单的理解你就可以直接这么理解是吧，一个是第五个版本，一个是第三个版本，但是实际上你注意了，呃，关于我们WCC里边的一个设定的话，其实现在目前来讲，基本上可以认为HTML5它会是我们HTM2的一个最终版本，也就是说HT2应该不会再出什么六啊，出什么七啊八这样版本，呃，按照目前的设想来说是这样的，就是说为什么不出新版本呢？因为现在就基本上所有的网页，所有的HL都统称为N。

五如果以后再更新，我就直接往这个HTL5HTML5里去更新，而不再去添加一些新版本了，所以基本上以后应该都会叫M点五，所以它不会更新了啊。而CS3呢就更奇特了，CS3呢是一个大的一个一个东西，说的是我们这个结构表现行为里边这个表现，CSS用来设置我们这个样式的，那CSS3呢，我们可以理解成是CSS的第三个版本，但是实际上严格来讲这个名字它并不并不准确，因为我们CSS里边的各个的样式，它实际上是按这个模去分配的，比如说有什么呀，哎，有这种盒子模型的模块啊，有这种布局的模块，可能有这种字体的模块，有背景的模块，每一个包括什么弹性核的模块，也就是说CSS里边的各个标准，它实际上是分成了一个一个模块，而每一个模块都可能有它的版本，比如说A。

模块它的版本可能现在是一，而B模块呢，版本可能是五，诶C模块版本可能是三啊，D模块版本可能是一个四，也就是说不同的模块版本可能是不一样的，所以在这里边CSS3它只是一个统称，简单理解你可以理解成是CSS的一个第三个版本，但是就具体的某一个模块而言，它可能高于三，也可也可能是低于三，那和H5一样，CSS3基本上也是一个固定名了，以后应该不会再出现什么456了啊，当然这块还得看W33的一个规定，但是暂时来看是这种情况，所以其实我们在去学前端，或者我们再去说前端的过程当中，你是说HTM或者说H天猫五，其实在我们这看来是一样的，你说CSS，或者说CSS3在这儿来说，看起来也是一样的，因为都是一个东西，因为本来你用。

的就是N点五，用的就是3S3，所以这个名字上啊，不用去纠结啊，不用去纠结，好我们来看一下下载进度啊，下载了这么半天才下载到了百分之诶40多，50%多的样子是吧，我们让他先下着啊，先下着来，我们在这儿呢，一边写一边说我来新建一个文件啊，我们叫做一个零一，我们的第一个叫做一个CSS的一个简介。CSS一个简介啊，点一个HTM，还是先写一个页面，那在这里边呢，我们直接来写个注释，我们来介绍一下啊，我们的一个CSSCSS是一个是一个什么东西，我们说了我们一个网页分成三个部分，我们再回顾一下啊，网页分成我们这个三个部分，注意这三个部分是由我们W3的去规定的，哪三个部分，一个叫做结构，一个叫做表现，还有一个叫做行为，结构我们使用的是我们HTL这个语言，表现我们使用的是我们这个CSS，而我们行为使用的是我们这个javascriptscript，也就是说我们网页分成这么三部分，那我们之前学的是第一个部分叫做一个结构，也就是我们的那个HTML啊，整体的大体的知识我们已经过了一遍，就说完了，不再多说它了。而光。

要有结构，其实我们会发现我们用HTML写的那个网页，那个网页其实写完了它，它并不好看，无论我们是引图片也好，还是引视频引音频好，印完那个网页，它整个的布局也好，整个的一个颜色也好，它并不是那么的好看，为什么？因为我们之前写in时候，我们都没有去给它设置样式，而我们所看到那些样式啊，你像H1那么大个是吧，H2那么点，H6就就最小了，那这个时候为什么会有那些样式，因为那些样式都是浏览器自动带的样式，那浏览器自动带的样式，它不可能把这个样式给你设置的多么的花里胡哨的，对吧？因为它即使设置特别好看，也可能并不能满足我们的需求，以浏览器其实会有默认样式，但是那些默认样式都不能满足我们的需求，所以这个时候我们就需要自己来控制我们页面中这些标签啊，H1呀长什么样，H2长什么样，我们的这个P标签长什么样，我们这个span长什么样。

这个时候我们是不是需要去对这些东西进行修改呀？哎，我要改变我们这个页面中这个元素的一个样式，那这个技术手段就属于表现，所以你记住了，所有外在显示出来的东西都属于表现，你所看到的字体，字体颜色，字体大小，这些包括背景，包括图片大小，这些东西通通都属于表现，而只要是表现，就应该用我们的这个CSS来控制，所以一定要记住HDM的结构，CSS负责表签，所以CSS我们中文叫做一个层叠，层叠样式表，哎，层叠样式表样式我们很好理解，什么叫样式，哎，样式我希望H1，诶是红色的，我希望H2是绿色的，我希望H1的字大一点，我希望H2的字小一点，这是不是就属于样式啊？哎，我们通过样式来修改，来设置我们每一个。

签它长什么样子叫一个样式，那什么叫样式表呢？哎，一说样式表那就很很典型了，对吧？样式表什么叫样式表，也就是说表那是不是只有一个样式，哎一说表一定是包含了很多个样式啊，一定是包含很多个样式，所以样式表就是一个样式的列表，我们通过这个表来给我们这个元素来设置样式，但是其实这儿会有一个比较不好理解的东西，叫做层叠，层叠什么叫层叠呢？啊层叠层叠你要注意啊，这个层叠就有点像什么呢？哎，你再去做这个网页的时候，当然我们看到一个网页，你随便打开一个网页，我们看到的这个网页它是一个平面的效果，比如说打开一个京东，你看到这个网页，它实际上是一个平面的网页，对吧？它是一个平面，像一张纸一样，但是你要知道实际上啊，实际上我们这个网页它是一个立体的结构，它是一个分层的结构，有点像什么呢？有点像。

我们吃那个蛋糕，它底边有一层，中间有一层，上边还有一层，它可能有很多很多层，它是一层压着一层，但是同学说，老师你这不瞪了眼胡说吗？我这看的就是一个平面，诶，确实就是一个平面，为什么是一个平面？因为现在我们看这个蛋糕，或者说看这个网页，我们是从上往下看我们是什么，我们是在俯视这个网页，所以对我们来说，我们看到的就是一个层面，我就是一个平面，我们没有办法看出它那个层次结构，所以这个时候你要知道我们的网页是一个多层的一个结构，我们通过CSS可以分别为每一层去设置样式，给第一层设置完了，给第二层设置完了，给第三层设置完了，我可以为每一层设置样式，但是我们看到的始终都是最上边那层啊，最上边那层就好像现在我们这个这个女生化妆一样，是吧，化妆你要先诶洗脸对吧，哎洗脸然后脸上你要擦什么，哎，隔离。

对吧，擦完隔离你要什么擦什么粉底，擦完粉底你要擦这什么什么什么什么什么眼影，什么腮红是吧，我也不懂，大概这么一个，也就是说我们在化妆的时候，脸上是不是还是一层一层的呢？哎，画左一层右一层，但是对于我们来说，我们看到的纸是什么，只是最上边那层，里边的层我们是看不到的，网页也是一样，我们可以为每一层来设置样式，但是我们最终看的只是什么，只是最上面那层，所以叫做一个层叠样式表啊，我们来看一下我们这个文档也装完了CSS直接点过来，它的图标就是一个这个CSS3的一个图标，那这个就是我们CSS的这么一个，这么一个文档，它里边会写的比较的详细，所以待会儿你做的时候也先尝试着去把这个文档去去装一下，然后里边去包含很多的这些这些信息啊，那接下来还是说到我们这话题，那这里面我们层叠样式表，我简单说一下啊，我们简单说一下把东。

这个关掉。什么叫层叠样表，哎层叠样表我们说了，我们网页实际上它是一个什么呢？哎，是一个这个多层的结构啊，多层结构，总之你就把你的网页想象成是一个3D的一个立体结构就完事了，那通过我们这个CSS可以什么呢？可以诶分别为我们这个网页的每一个这个层，诶来设置我们这个样式啊，可以为网页的每一层来设置样式，而最终什么呢？而最终我们能看到的什么呢？诶我们能看到的只是诶网页的什么呢？网页的这个最上边一层啊，最上面一层啊，所以注意网页是一层一层啊，先建立起这个思想啊，建立起这个思想，那总之啊，总而言之，言而总之，哎总之就是一句话，我们这个CSS可以什么呢？诶可用来。

哎，设置我们这个网页中的元，网页中元素的样式啊，它就是用来设置网页中元素的样式，说白了CSS是用来给我们的网页来。化妆的，诶，你网页这个字多大，这字是什么颜色，设置什么背景，都是CS说了算，好我们不废话了，我们直接来演示一下，那在这里啊，那既然要演示，我们先写个东西吧，我写一个P标签啊，还是写哎，少小离家老大回，乡音无改鬓毛催啊，写这么一句话，然后我们直接给它运行一下。

好，运行出来以后，那现在我们既然要说到CSS了，我们就先说第一个问题，那我要想用CSS，那我是不是要改变文字的样式，哎，比如说我想把这个字改成一个红色，或者我想把这字改大一点，那这块我要怎么写，但是之前我们说了，我们可以用那个放标签，但是放标签并不是一个比较好的方式，所以这个时候我们就来通过CSS来影响一下这个文字的一个样式，所以在这儿我们直接来创建一个，我们来说什么呢？哎，我们来使用CSS来修改元素样式，使用我们这个CSS来修改我们元素的一个样式，哎，主要就是元素里边的文字。

怎么改，我们先说第一种方式，第一种方式，第一种方式我们叫什么呢？哎，我们叫使用我们这个，哎使用我们直接在什么呢？在我们标签内部啊，在标签内部我们通过什么呢？通过这个style属性来设置我们元素的一个样式啊，所以怎么写，你可以直接在P标签里边添加一个属性，注意属性只能写到开始标签里，不要往结束标里写啊，所以在开始标里边我们直接写了一个style标签，这个标签的作用就是来给我们的元素设置样式的，Style就是样式的意思是吧，Style就是样式意思就表示给我们元素这样式，那这个样式它只会对P元素生效，那在这个值这怎么写属性很简单，Style等于什么玩意儿，我们需要给它一个值，而这个值就是我们所谓的CSS啊，值就是所谓的CSS那。

那我们这来说一下，现在比如说我就想把这个字设置成一个红色，要怎么设置那这个样式的名字，这个CS的样式的名字叫做color color什么意思叫做一个颜色啊，你注意了，CSS样式也是一个名直对结构，一个样式名对应一个样式值，Color就是一个样式名后边我是不是得写值啊，注意名字和值之间使用冒号连接，所以color后边我要写一个冒号，冒号后边就可以跟着我们这个元素一个值，我直接来一个red，那这个就是一个名字，这个就是一个值，然后名和值之间使用分号结尾，那这个就是一个CS的样式color冒号red表示把文字的颜色设置为红色啊，设置为红色，我们这儿来看，其实你已经看到了，这个字是不是就变成红色了，哎，变成红色了啊，所以结构很简单，子弹属性，属性后边的值是一个样式。

样式，然后样式名冒号对应一个样式值，不要忘了以分号结尾，那color就是一个样式，那我是不是只能写一个，当然不是，比如说我还想设置一个字体大小，字体大小怎么设置，我们叫做一个fo size，方size，比如说我写一个我希望它干嘛呢？让一让他来一个20个像素，这时候你来看这字是不是就大了，哎，你觉得20个像素不够大，你还想让它再大一点，比如我来一什么呢？来一个30像素，字是不是又大了？哎，字又大了啊，所以方size这个是样式名，这个是样式值，同样用冒号连接，然后我忘了写一个分号结尾，效果是一样的，对吧，我带大家我写一个六式是不是就更大了？哎，所以这个时候我们这个就是我们的第一种方式，设置三样式，这种方式我们叫什么呢？叫做内联样式，哎，内联样式或者可以或者也可以叫做行内样式啊，行内样式都行啊，行内。

那这个是我们设置样式一种方式，其实用起来非常简单，但是你注意了，现在这一块的位置，Style的属性值，这个位置它的语法就属于CSS的语法了，啊，就属于CS语法了，好，这个就是我们CSS，总之一句话，通过CSS可以去影响我们页面中元素的样式，也就是说元素外在展现出的一个效果。哎，当然这还只是第一种方式，但是我们先不着急，自己先来尝试着去写一下，待会儿我们再介绍一下其他的方式，我们先停一下。