尚硅谷前端基础 (29)

好了，接下来我们来继续正式的开始学习我们的CSS，那正好这个文件其实我已经创建完了它的一个CSS语法，那接下来我们来讲一下这个CSS语法，那讲这个CS语法的时候呢，我就直接在，哎，直接在我的这个文件里来讲啊，我就不再去创建那个外部的CSS了，直接在我们内部的style标签里面讲啊style标签，Style标签里边呢，在这我里边我们先提一个问题啊，先说一个事儿啊，不算提问题吧，那这里边注意了，现在我的代码是写到一个HTML文件里边，也就是我的代码现在是写到这个网页里的，那像这个区域这个玩意儿，它都属于H天猫代码，但是我问你了，在这个style标签里边这部分这个区域它还算不算是H门的区域了。诶注意这个区域就不属于HTML了，换句话说，这里面你不能你说我这写个H1吧，这是不行的啊，这是不行的，你说我这写个标签吧，这样是不行的啊，或者说直接说这样是错误的，你看编辑器就给你报错了，对吧，颜色都变了，所以这么写是绝对绝对绝对绝对不对的，所以这里边一定要注意，在style标签内部这个区域，它是和我们网页其他部分完全不一样的区域，那你像这个区域实际上和我们这个CSS文件这块是一样的，它不属于HTM码，所以在这个style里边，你也不能去遵循HTML的规范去编写代码，那这里应该遵什么呢？应该遵循的是我们这个CSS的规范写代码，所以在这里面我们所说的一切，他应该遵守的都是CSS的语法规范。

而不是HTML的，所以我们说一个东西，在我们HTML里我要写注释，怎么写的，是这样写的是这样的，写一个个注释啊，但是这个注释我告诉你，在我们的CSS里它是无效的啊，它是无效的，所以一定注意style标签里边是一个特殊的区域，它和外边的HTML是相互隔离的，在这里所写的东西都要遵循的是CSS的规范，这1.1定要时刻注意。所以那我们学一个学CSS，实际上就等于在学习一个新的语，对吧？学习新的语言，那我们学习一个语言，往往第一个我们要说的东西就是这个语言里边的注释，所以在这儿我们先写这么一个东西，看怎么写的啊，斜杠星号，星号斜杠是这样一个结构，那这个东西叫什么啊？这个东叫什么？这个东西叫做一个CSS，诶中的这个注释啊，所以这个结构啊，斜杠星号就相当于我们那。

HTM2里边这个玩意啊，那个玩意儿啊，然后呢，星号斜杠就相当于它的那个什么呀，哎，那个那个那个结束那个东西，所以这个也叫做注释，只不过这个注释是CSS中的注释，也就是说诶注释诶中的这个内容会自动诶被我们这个浏览器所忽略，比如说这儿跟没写是一样的啊，所以这个东西我们叫做一个注释啊，跟那个N毛那个东西是一样的啊，都属于注释，它会被浏览器自动忽略啊，就跟看不见一样啊，但是你这个玩意儿啊，你说我跟这写这么一个，跟我们的HTML里去写这玩意儿行不行，不行啊，不行，HTML怎么写，CTRL鞋杠这个东西是不是HL是这个东西，哎，这个东西，所以你CTR鞋杠你能看到区别，你如果你在H前边的区域，CTRL鞋盖那生成的就是HTL注释，如果你在CSS区域CTRL鞋盖，那就是CS的注释啊，CTRL鞋盖是我们这个生成注。

制作快捷键，如果有注释，你按上就是出来，如果不是，如果没有注释，你摁CTRLL加就是出注释，如果有注释，你摁CTRL加就是取消注释啊这么一个作用，好，这是我们说CS注释，然后在这儿我们来说一下这个CSS一个基本语法，基本语法那我们刚才我先写个例子啊，我直接还是来一个P标签，然后来一个color color来一个red，然后呢，我们再来一个这个font size size，比如说来一个40个像素，我写这样一个结构啊，我们就着它来说语法，实际上说我们CS的基本语法，实际上我们整个这个CSS它主要分两大块啊，两大块哪两大块，第一部分是我们这个P，第二部分是我们P后边这个大块，这个P我们叫什么呢？诶，这个P我们叫做CSS一个选择器啊选择器，选择器后边跟的这个大块我们叫什么呢？哎，我们称。

之为叫做CSS一个声明块，声明块是这么一个东西啊，这么一个东西，所以我们要学习CS语法，实际上就学这两部分，一个是学习选择器，还有一个就是学习生命块，那么一个一个先介绍一下，我们先说第一个选择器，什么叫选择器，选择器顾名思义是用来选择的啊，选择器，所以通过我们这个选择器可以选中我们页面中的什么呢？哎，选中我们这个页面中的这个指定元素啊，通过选择器可以选中页面中的指定元素，比如什么呢？哎，比如我们这个P就是一个选择TP的作用，哎，就是选中我们页面中所有的所有的。

哎，那再说了，那我现在所有的P元素，所以我这写一个P标签写一个啊今天哎天气。哎，天气真不错啊，我们写这么一个啊，现在呢，在这儿我给它运行一下，呃，直接用浏览器打开。

放这这放到这儿，今天天气真不错，那你看P标签是不是变成红色了，哎，不仅它，你这再整俩P标签啊，我们再整俩P标签，你发现什么这些所有P标签都是红色，所以P的作用就表示选中所有的P元素，那我如果是写一个H1呢？H1写一个啊，我是H1，你看啊，你注意H1有没有变成红色，哎，没有，为什么，因为我这选的是P元素，没有选H1，你要想选H1怎么办？OK，你再写一个H1，比如说你color，我直接来一个green，诶green grren啊green这一保存我们看效果，H1是不是就变成绿色了啊，变成绿色，所以H1的什么作用是选中我们页面里的所有H1，那我要选中页面里面的所有div呢？哎，那就直接写一个div，所以你要选什么，你就写什么就完事了，这东西没什么好说的，诶比较简单，当然这个是我们说的一种选择器，当然后边我们还需要。

源很多选择器在文档里，我们来看这在这个CSN文档里，你看上边，上边有一排，其中第三个叫做一个selectors select就是选择器，Selectors就是我们的一组选择器，你点开它，这里边列出来的就是我们这个CSS里边的所有的选择器是吧？这些都是我们往后要讲的，所以选择器是我们要学习的一个东西。然后第二部分我们叫做一个声明框，声明块干嘛的，声明块是干嘛的，选择器是负责选中元素的，那我们选中元素的目的是什么？目的就是给这些元素设置样式，那设置什么样式，那就是通过声明块来指定，所以我们通过什么呢？我们通过声明块来指定，诶要为我们这个选择器。

哎，要为我们这个元素设置了一个样式，所以这两部分P叫选择器，而大括二我们叫做一个生命块，它们分别是干嘛的？P告诉我我选中P元素，而这个大括号里边内容告诉我，我要给这些P元素设置哪些样式，所以这就是它们两个的一个作用啊，两个一个作用，然后我们来说具体的声明块由一个一个的声明组成啊，声明块由一个个声明组成，什么叫声明？Color冒号red，这就是一个声明方size冒号的40，这就是一个声明啊，这就是一个声明。那我们声明什么呢？诶，因为声明多了，哎，我多个声明组合完了，整体就变成一个声明块啊声明块那我们说声明是什么呢？是一个名值对结构，再次提到这个概念，名对结构一个什么呢？一个样式名对应。

一个样式值啊，一个样式名对应一个这个样式值，我们的这个，诶，样式名和样式值之间，名和值之间以这个冒号连接，哎，注意也是英文的冒号啊，以冒号连接，以分号结尾啊，冒号连接，然后分号结尾，实际上我们严格来说的话，像最后一个分号我可以省略不写，效果是一样的啊，效果是一样的，但是你中间的分号不能省略，你中间的分号一省略全都出问题啊，全都出问题，所以最后一个可以省略，就是一个生命框里的最后一个分号可以省略，但是中间的不能省略，所以我就不写这个了，你就记住了，分号你就全写上就完了，不要省略了，妈少那么一个分号也不管啥，也不省啥事，但是如果你真的忘了写了，那就会很麻烦啊，所以这个是我们说的生明块，诶这个就是。

一个个声明啊，一个声明，这个color叫样式名fo size也叫样式名red叫样式值，我们的fo size这个40像素也叫做样式值，所以就是一个样式名对应一个样式值，所以这个时候我们学声明，声明一个大块没啥可学的，就声明块一个大块没啥可学的，那关键是不是我们就要学习里边的声明啊？哎，我们可以使用哪些样式名啊，我们可以为这个元素设置哪些样式名，而这些样式名又可以设置哪些值，这些是我们都要学的呀。哎，Color是干嘛的？Found side是干嘛的？以后我还会说什么background color是干嘛的？我们是不是会有很多很多各种各样的样式啊？哎，这些样式又对应很多很多各种各样的值，有哪些样式有哪些值，就是我们下一步要学的内容，那这部分在哪呢？这一部分可就比较多了。它应该就在。

下边是吧，下边我们来看一下啊。CS的语法。这是一个。在上面我们直接找上边导航吧，他这边太乱了，在我们的keyword index。你看什么A呀B呀，这是我们所有的了，这包括选择器，包括样式，它都在这儿列着了，我们找一下那个专门给我们列那个样式样式的。CS语法。我找一下它的位置啊，这个cascade这层叠。我们刚才看到这个文档的话，关于样式的东西会稍微有点多，在里边找的话，其实呃，像我们刚才看的这个keywors，它就是一个我们所有样式一个索引，当然这块列的有点有点乱，它并不光有钥匙，还有一些别别的东西，要选择器这些东西，那如果要看所有样式的话，应该是在这个CSS左边这块有一个pro，你看这儿一点开，这里边就列出来的啊，就是我们这个CSS里边所有的一些样式，你看什么样式是不是特别特别多呀，哎，这些样式我们要学，然后还要学它有哪些值，当然并不是所有的样式我们都需要学是吧，大部分的主要的常用的我们都要给他认真的去过一遍啊好，那这里是我们说的一个CSS的一个基本语法，那待会儿呢，自己来把这个语法看一下，再往下讲，我们就是分两块去讲，第一块我们先来讲选择器，讲完选择器我们再来讲具体的样式，样式我们就可能需要分分块去讲了，啊分块讲了好，我们这里先停一下。