19.尚硅谷_HTML&CSS基础_css简介.avi原创

我们呢，开始来上课，那刚才包括咱们之前一天左右的时间们简单的介绍了一下这个HTML，那接下来呢，我们开始来学习这个CSSCSS我们说了，也就是我们这个结构表现行为里边的那个表现，诶那我们来说什么叫表现呢？那么会发现实际上像我们，诶像我们之前做的这个练习，你打开我们来看效果，那像这个呢，是一个纯HT2的一个页面，我们发现这个页面其实整体来说看起来呢，它并不是那么的这个美观，那所谓的表现呢，指的就是我们要给我们的这什么呀，给我们这个页面啊，我这个字体呢，我想改一个什么呀，样式我想改一个这个诶大小改一个颜色，我想给我这个网页加一个背景，那注意什么叫表现，凡是我们直接能看到的东西，自己的大小，图片的大小，背景颜色，背景图片等等，所有外在的东西，全都叫什么呀，全都叫做表现啊。我们。

结构表现行为里边这个表现，那表现这个东西呢，就是由我们的这个CSS来负责的，那我们来看看这个CSS它到底是什么啊，我们说CSS的名字叫做什么呢？叫做一个caskding style，一个sheets，叫做一个什么呢？层叠样式表，诶那我们先来看一下这个名字，我们先来看什么呢？样式，诶，那什么叫样式啊，诶那比如说我现在想设置我们这个页面的一个样式，比如说我想干嘛呀，我想设置一个自己的一个大小，我想设置一个这个文字的一个颜色，我想设置整个网页的一个背景，这些东西全都叫什么呀？全都叫样式啊，这些东西全都叫样式，那好了，那有什么叫样式表呢？那我说了，我将多个样式写到一个表里，那这个表是不是叫样式表啊？呃，所以一旦说了样式表了，就意味着我们这个样式应该是有什么呀，应该是有。多个的啊，应该是有多个的，诶，那其实呢，样式表还都算好理解，那还有一个不太好理解的叫什么呢？叫。

层叠，诶那我们来说说什么叫做层叠样式表啊，什么叫做层叠样式表，那我们说呢，所谓的层叠，诶那这块你就要发挥一下你的想象力了，那实际上我们的网页呢，它不是一个单层的结构，你要把我们这个网页想象成是一个什么呀，是一个多层的结构，它是一层一层的这个摞起来的一层去盖着一层啊所以叫什么呀，层叠一层去叠着一层，那而我们所看到的是什么呀？只是网银的这个最上边那一层，下边那层干嘛呀，都被上边那个层次所给它盖住了，诶那同学说了，诶老师啊，那我这看到一个这个页面我也没有看出来它是一个多层结构呀，我们看到的是不是就是一个平面啊，诶所以注意我们网页它实际上是多层的，但是我们看出的效果呢，它只是一个什么呀，平面我们能看到只是网页的最上边那一层，诶那问题来了，同学就说了，诶那这个东西空口无凭啊，诶那你既然说是多层次的，我能不能。

看到这个层次呢，诶那可以，那你要想看这个之前呢，我们需要给我们这个火狐浏览器装这么一个插件，我们来看一下，这一块呢，在我这个笔记里都给你们提供了，诶有这么一个插件直接诶叫做一个TT直接拖到这个，拖到我们这个火狐览器一撒手，然后给你提示一个安装，你就点击安装就行了，我这块由于已经装过了，我就点取消了啊这个安装方式呢，和我们的这个fire bug是一样的，所以呢，装起来也比较简单，你自己感兴趣就去装一下，装完了以后它有什么效果呢？诶它有一个比较神奇的效果可以干嘛呢？可以让我们看到我们这个网页的一个这个3D视图，诶我们来怎么看，装好了以后，直接按照你的outt来看这工具有一个叫做web开发者来看这个是不是我们那个T呀，刚才刚刚装好的这个插件，你点来走你。诶，稍微等一下诶，你会发现当你点完了以后，你这个网页的样子是不是变了呀？诶，那我们这一块就可以通过鼠标去拖动这个网页了，诶说白了，我们这个工具就是把我们这个网页转换成了一个3D视图，你来看我们这个网页，刚才看着是不是还是一个平面呢？现在你来看一层，两层，三层，四层，五层、六层，这个层次关系是不是出来了呀，你看下边虽然有这么多层，但是这么多层我们实际上看得见，看不见，哎，对，我们是看不见的，我们能看的只是它表面的那一层啊，所以注意什么叫层叠样式表，它是由什么呀？由一层去盖着一层，我们能看到只什么呀，只是最上边的一层啊，这就是一个层叠的这么一个概念啊，层叠这么一个概念，好，那这一块呢，是我们简单装这么一个插件，但是注意啊，我们这个T的演示呢，它只是一个什么呀，只是一个参考啊，只是一个参考，实际开发中的意义呢，并不是很大啊，只是作为一个这个。

的参考，所以你要注意什么叫层叠样式表，我们的网页是什么呀？它是一个一层一层的一个什么呀，结构啊，一层一层结构4SM可以用来为网页创建样式表，通过样式表可以对网页进行装饰，那所谓层叠呢，可以将整个网页想象成是一个什么呀，一层一层的结构，层次高的将会覆盖我们这个层次低的啊，而用通过我们这个CSS呢，就可以分别为网页的各个层次设置样式啊设置样式好，那这里边咱们废话不多说，直接来写个小的DEMO来，我把上我把刚才写的那个DEMO04啊复制一个改一名，我们叫一个DEMO05，然后右键选中我们来编辑一下它，那这里边呢，我们把这些没用的呀都给它去掉，我们主要来说我们今天要说的这个内容，那这个呢，改一个名，我不叫超链接了，嗯，我叫一个就叫一个我们这个CSS，那为了测试这个样式，我这里边儿呢，先写这么一个P标签，P标签里边我们来写一。

一句，诶写一句话，写一个什么呢？写一首这个古诗吧，来一个锄禾日当午，诶再来一个这个汗滴禾下土啊，汗滴三下土，诶咱们就写这么一句，诶比较简单，然后现在呢，我们来打开这个页面，我这一点开我们发现什么了，这个文字是不是就是默认的一个效果呀？诶默认一个大小，默认的一个颜色，诶说起来呢，其实呢，它也不算是好看，那现在我想让这个文字变得好看一点，要怎么办呀？诶假如说我就想让这个文字变一个红色，那我们之前可以是不是给这文字加一个放到标签啊，但是我们说了，我们说了HTMMR是负责这个结构的表现，实际上都是应该交给我们这个CSS去负责的，所以那个fund标签我们是不推荐使用的，好，那问题就来了，那我不用放标签，我怎么能通过这个CSS来设置这个文字的样式，那这块就用到了我们的什么呀，我们的这个样式样式表了，那第一个问题就是我。

那这个样式表我要写到哪儿啊？诶，那我们就来说一下第一个啊，我们这个样式表，CSS这个样式表可以写到很多的位置，那第一个位置可以干嘛呢？我们可以将我们这个CSS样式编写到我们这个元素的这个style属性当中啊，元素的style属性当中再说一遍，什么叫元素，我们说了元素就是标签，标签就是什么呀元素，所以现在我们要想可以把这个CSS样式编写到我们这个元素的style属性当中，那问题就来了，我编写到哪个元素啊，我是编写到body里呢，我还是编写到我们的这个P配条里呢？诶，那我们说了，当然是谁呀，P标签，为什么呀？因为我们现在想给的是P里边这个文字去设置样式，所以这个东西你写到玻璃里管用吗？哎呀，不管用，所以这块注意啊，你给谁设置就写在谁的里边，所以这里边儿我们在P标签里添加了一个什么呀带哦属性，那注意啊，这个属。

属性和其他属性没有区别，一个属性名等于一个，诶双引号等于一个属性值，然后在这里边我们是要填这个值了，那注意了，这个值就有点意思了，在style这个属性值里，我们再写就是我们这个CSS代码了，那比如说我想设置什么呀，我想设置这个文字的颜色为红色，那我要怎么写呢？在这里边我就需要写一个样式来颜色，我们单词叫什么呀？诶对，叫做一个color，诶color，那你不光写一个color还不行，你还得告诉我们浏览气你要设置成什么颜色，所以这块我再来一个color冒号，一个red，那这是什么意思呢？就是表示我要把这个P标签里边的这个文字设置成一个红色，那这个color冒号red，它就是一个诶样式，那我们来看它是一个什么结构啊。

哎，它是不是就也是我们所谓的一个名值对结构呀，Color是我们的这个样式值，而red是不是就是我们这个样式名啊，而color冒号red，这就是我们所谓的一个样式，那我们说了，每一个样式写完了，我们要写一个什么呀，写一个分号结尾，诶好，那我们现在就完成了一个CSS这么一个样式，诶表示什么呢？设置P标签里边的文字要为红色，我们来看看有没有效果，来我这直接一刷新来走你，诶我们来看文字是不是确实红了呀，诶这个就是我们的一个CSS，比较简单，但是以后用的呢，也就这么多啊，就这么多，然后我们再来看，那同学说了，这光变成红色它不过瘾啊，我还希望什么呀，我还希望这个文字可以啊。

大一点，诶，那我怎么让这个文字能大一点呢？那我们说了你颜色有样式，文字大小是不是也应该有对应的样式啊？诶，那我可以，我可不可以在style后边我再写一个样式来设置自己大小呢？诶我们说当然可以了，我们说了这个style里边一定是可以写多个样式的，如果你只能写一个，还怎么叫做表啊，对吧，我们叫样式表，所以一定可以写什么呀，多样式，所以在这个color冒号red后边呢，我们再跟着一个啊，注意啊，写到这个分号的后边来什么呢？我们有一个样式叫做一个front size方size什么意思呀？哎，表示设置我们这个字体的一个大小，那现在假设我想设置下的为多少呢？我想来一个，比如说我来一个20，那注意我们这个单位是一个像素，同样属性值，样式名和我们这个样式值之间使用冒号来连接，那这里边同样啊，注意一个样式结束，我们最后要给它添加这么一个什么呀字号啊，表示我这个样式写完了，好，那现。

在我这保存一下，看一眼效果，直接这一刷新走你，诶文字是不是就确实大了呀，诶同学说了感觉还有点小小怎么办呀，来咱们改一个40，我一保存是不是就大了呀？诶还小还想怎么卖呀，来一个一百四走你一刷新，哎呦哎呦这有有点太大了啊，有点太大了，所以这里边我们先给它改回来啊，是一个40，诶那注意了，这个就是我们的一个样式，哎，就是我们这个样式，那这个样式我们有一个名，你看我这个样式写到哪了呀？是写到我们这个标签内部的这个style属性当中的啊，是标签内部的style属性当中的，来我们来说一下，将我们这个样式直接直接编写到我们这个死带啊属性中，那这种样式我们什么呢？我们称为叫做一个内敛样式，诶，我们称为叫做一个内敛样。

样式啊，内联样式，那我们说了内联样式有什么特点呢？内联样式纸，哎，对我们这个当前的这个标签，诶，或者当前这个元素中的这个什么呀，哎，内容起作用啊，只对我们当前有很多内容起作用，诶那我们来说一下什么意思啊，那这里边我再写一个标签。哎，咱们就还是啊，我再写一个P标签，来一个P标签，P标签里边我们写一个，呃，汗滴禾下组，诶，谁知盘中餐来一个，这个粒粒皆辛苦。

保存，我是不是又写这么一个呀，那现在我问你，我这个文字，谁知盘中餐，粒粒皆辛苦，它会不会是一个红色的40个像素，我们想想是不是应该是不会的，因为我们这个样式是不是写到上边这个皮标签里呀，而下边这个我有没有写没有写，所以我们来一刷新走你，诶你看我下边这个P标签，它样子是不是没有变化呀，哎，没有变化，所以这里边你要注意的是，我们这个样是只对我们当前元素写的起作用，好，那现在我希望这个样式也可以对这个东西起作用，那怎么办呀？诶你可以干嘛呀，把这东西选中CTRLCCTRLV保存，我这一刷新走你。是不是也起作用了呀，哎，所以你要想对其他标签起作用，你还得把这个样式干嘛呀，在其他标签里是不是。

再复制一遍呀，哎，再复制一遍，那我们说了这个东西它方不方便我们这个复用啊，诶什么叫复用啊，我这个样式我干嘛呀，我下边还有一堆其他标签，我这一堆标签里也希望去用到这个样式，那现在我怎么办呀，我是不是得把这个样式在每一个标签里，我是不是都得复制一遍，这种方式是不是比较的麻烦呀？哎，比较的麻烦啊，所以注意我们说了内联样式，哎不方便什么呀？哎，不方便我们的一个复用啊，重复使用，因为什么呀？因为你要重复使用，你是不是必须得每一个里边是不是都得写一遍呀？哎，实在是干麻呀，太麻烦了啊，实在太麻烦了，而且现在我们说我的这个样式还少，如果样式多了以后，你往这儿写，是不是内容就变得非常多了呀，哎，所以这里边呢，我们是不推荐使用的，哎，那注意了，有同学可能说了，说诶老师啊，我不嫌麻烦，怎么不嫌麻烦呢？诶我就愿意给他复制一下，我就愿意。

每个标签里都写一遍行不行，诶行没问题，那咱们假设啊，咱们假设我这个页面里呢，有1万个标签。1万个标签，诶，然后干嘛呢？每一个标签里我都要去使用这个样式，好了，那我就要把这个样式是不是在这个1万个标签里去复制一遍呀，好了吧，复制就复制，也不怕麻烦，对吧，复制就复制，但注意咱们这样式是不是说写完了我就不动了。不是吧，我可能写完了，过两天我可能需要修改吧，那好了，问题来了，那你这写完了这1万个，你要改你得干嘛呀，你是不是得同时把这一个。是不是全得改了呀，那这个东西是不是就麻烦透了，哎，就麻烦透了啊，所以这块一定要注意，我们说内联样式只对当前元素中的内容起作用啊，它不方便我们这个复用，然后呢，其实这个问题跟我们之前说那个问题一样，我们说了一个设计优良的网页要求我们这个结构表现行为是不是三者分离啊，哎，那我们说了这个玩意儿它叫不叫分离啊，那明显是不是不叫啊，你看我的CSS和我的HTL，我是不是都写到。

一起了呀，哎，写到一起了，所以注意了这种方式我们在现实开发中是不推荐使用的，这个呢，我们还给它起了一个名字，哎，内联样式是什么呢？诶属于我们叫做什么呀，结构于我们这个表现耦合啊耦合诶不方便我们这个后期的一个维护，所以这块我们是不推荐使用的啊，是不推荐使用的，所以在开发中呢，我们应该尽量去避免这个什么呀，内联样式啊，尽量去避免内联样式，好，那问题就来了，说了半天不让我们用，那不用内联样式，那我用什么呀？来，那我先把这东西给他。住了，放到我们这个注释里保存一下，现在我这一刷新，咱们来看样式是不是都没了呀？诶样式都没了，那现在我们来看怎么写，这是我们第一个位置，然后再来说我们这个第二个位置来，我这个光标咱们就往上移了，诶搓一下我们第二个位置还可以干嘛呢？也可以，也可以将我们这个CSS样式编写到什么呢？编写到我们这个hi中的这个style标签里啊，编写到我们这个head中的style标签里，Had。

是不是跟这啊，那顾名思义编写到hat的style标签里，我是不是要在hat里再创建一个这个tyle，叫做一个style这事啊，那注意了，这里边我们style里边还有一个值叫做什么呢？叫做一个tap tap是一个属性，叫做一个这个T的鞋盖，一个CSST的表示什么呀？我们这里边写的内容是一个文本，而CSS呢，表示我们这编写的是一个CSS的一个什么呀，样式表啊样式表好，那这个呢，它是一个固定值，或者说也叫什么呀，叫默认值，说白了你写不写这个值都是它啊，写不写这个值都是它，但是注意为了去兼容一些老的浏览器，因为一些老的浏览器如果你不写它呢，会出一些这种小的问题，所以呢，我们还是养成一个习惯，一上来就把这个tab给它写上啊，它就是默认值啊，就是这个值固定的记住就行了啊，不用多说了，好那代要写完了，接下来呢，我们可以干嘛呀，将我们这个CSS样式编写到这个。

死style b箱里，那我要编写到style b箱里，带来一个问题，那我一想样式，这是不是就样式啊来一不做二不休，CTRLCCTRLV，我直接把这样式给他干嘛了，粘过来了，诶那我要问你了。我这么写他行不行？诶，明显是不行的，为什么不行啊，你这么写咱们这个页面里是不是有很多元素啊，那你这么写你的样式。

你设置给谁呀，我们这块是不是不知道啊，所以注意写在我们这个带标签里边，或者说在我们这个，诶只要不是在这个内联样式，我们说了其他地方写样式的时候，我们要先写第一个东西叫做什么呢？叫做我们这个CSS一个选择器，那什么叫选择器啊，那你要设置样式，你先得告诉浏览器你要给谁设置样式吧，那这个选择器的作用就是干嘛呢？就是来选中我们页面的一个指定元素啊，比如说我现在是要给我这个P元素来设置样式啊，所以我就来什么呢？来一个直接来一个P，这个P表示什么意思，这个P就是表示选中我这个页面里边的所有的什么呀。P元素啊，选中页面里边的所有P元素，然后在P后边紧跟着一个大括号啊，紧跟着一个大括号，在大括号里我们就可以来写这个样式了，比如说我来一个color冒号一个red，诶，然后来一个分号，表示一个样式结束，你会发现我这个大框里边的内容和我这个style里边的格式是不是就一样了呀？哎，就一样了啊，所以这个表什么意思，表示我们大框里边的样式要设置给谁呢？设置给我们这个P这个选择器对应的所有的元素，那P选择器选中的谁呀？就是选中我们这个页面里边的所有的P元素，什么叫所有的P元素？诶，那我们说这个是不是，这个是不是，这个是不是，诶，全都是，只要是在我们当前页面的P元素全都叫什么呀？全都叫所有的这个P元素来保存，我们来看看效果，我这一刷新走你什么效果，是不是所有的P元素都变成了一个红色的字体啊，诶都变成一个红色字体，那你就会发现什么呀，我。

这种方式写起来是不是比我们这个内联样式要方便多了呀，我只写了一个，是不是所有的P元素都应用上了相同样式，那我们说它可以使我们这个样式干嘛呀，进一步的这个复用，诶那们说除了说我设置一个颜色，我能不能再写呀？诶当然没问题，注意了，大括号里跟我们这个style属性值，它的语法就是什么呀，就是一样的啊，就是一样的，我这来一个来一个这个fo size大小来什么呢？来一个40个像素，然后分号一保存，咱们再看效果，这块一刷新，从你是不是全都变大了，诶全都变大了，诶当然我这么写多了以后呢，它不太好看，那所以这块呢，我一我们一般会给它做一个这个格式化，诶我们来这么写一个。

干嘛呢？我把每一个样式都换成什么呀，一行这样我们一看是不是就比较的清楚了，诶color是一个红色方，Size是一个40像素啊这个格式我们这样开发的的时候呢，习惯于按照这种格式记，因为看起来是比较清晰的啊比较清晰的好，那这个呢，是我们说写到这个style啊贝里我们来说一下，将我们这个样式表啊编写到我们这个带哦标签中，然后什么呢？然后通过我们这个CSS选择器选中指定的元素啊选中指定元素然后什么呢？然后通过，然后可以什么呀，然后可以同时为这些元素干嘛呀？哎，是不是一起设置样式，哎设置样式这样什么呢？这样可以使我们这个什么呀？哎，使我们这个样式进一步的什么呀？哎，复用啊，进一步的一个复用，什么叫复用啊，也就是说我现在这个。

样式是不是在我这个页面里边，所有皮元素都可以重复使用了，诶就说只要你是P元素，我是不是都可以去用这个样式，诶进一步的复用，那这一块就比我们这个内联样式，我要来回的复制是不是省好多事儿啊，而且对于我们来说，页面的空间是不是也省下了，诶页面的空间也省下了啊，可以使我们这个样式进一步的一个复用，这是我们说的这么一个特点，然后呢，我们来说将什么呢？诶将我们这个什么呀？哎样式表编写到我们这什么呀，哎死带哦标签中干嘛呢？诶也可以使，诶也可以使我们这个表现和这个结构进一步分离啊，进一步分离，诶也是，诶它也是我们什么呀，诶推荐的使用方式啊，也是我们推荐的一种使用方式啊，这个是我们说这个两种方式，一个是我们内联样式，写到这个P标签的一个内部，还有一个是我们这个什么呀，写到我们这个style里，诶这种方式我们更加的一个。

推荐，而内联样式呢，我们不推荐使用，但是我们什么呢？我们开发中呢，可以去，诶拿它做一些简单的测试啊，简单测试好，那这个呢，是我们说CS的一个简介，但是注意了，现在其实呢，我们写在这儿吧，还有一个小问题，什么小问题呢，那有的时候我这个样式干嘛呀，我不仅仅想在这个页面里用，假如说我还有一个页面叫什么呀，叫DEMO06，我想将这个样式在DEMO06里边也去使用，那我说了这个还。

行不行，诶，那可能是不是就有一些问题了，我要想在DEMO06里边用，我是不是还得把它给。复制出去啊，哎，那现在想想了，如果我想在DEMO06里边，也就是说什么呢，在不同的页面中也可以对这个样式进行复用，那这种方式还好不好了呢？啊，那所以我们说了我们的CSS还有一个什么呀，第三个方式可以去写，那我们现在先不说，咱们下午再来说这个问题啊，下午再来说，好，这儿我先停一下。