08-尚硅谷-CSS-CSS的语法

再来。呃，今天呢，我们一起来看一看CSS以及JS，今天呢，咱们把这个CSS还JS呢，咱们把它说完啊，昨天我说的是HTML，那么HTML我们说了HTML它能够决定。页面上展示哪些内容？那么CSS是什么呢？它能够决定这个页面的美观程度。GS是用来修饰这个页面上的一些特效。来，咱们一起来看一下。首先我现在这边呢，我来新建一个页面，代码零幺.htl。我把它打开。稍等一下啊。嗯。Head。

OK。是这样的，同学们，比如说我在这边写个段落。这里是段落一。我就简单写一下，那我再可以再写一个。这里是段落二。好，同学们，这边有两个段落。我想让这两个段落对这个还有乱码。真是的。MAT标签。是吧？然后叫什么恰赛的udf叫udf杠八是吧，就这样子。这是俩段落。同学们。现在呢？我想使这两个段落的字体颜色变成红色。我们可以这么去做。我们使用的标签。然后呢，我这边写一个叫康叫read。就这样的，这样的话，第一个段落就变成红色了。再来。

如果我想使第二个段落也是红色，那也很简单，我只要把这个标签复制进去。哎，这样它也会变成红色。那如果我这边有十个段落。字体都想变成红色。那这个还是有有一点小麻烦的。我这十个段落里面是不是都得有这个缝的标签啊？就是这样，当然这个缝的标签已经淘汰了。所有和修饰页面。啊，页面显示效果，页面美观的这么一种标签啊，属性啊，基本上都已经淘汰了，因为我们全部都使用叫CSS来进行替代。CSS我们称之为叫层层叠式样式表。比如说这两段文字，我们要把它的字体变成红色，这种方式太繁琐了。我们用样式表怎么去做呢？同学们很简单，我们来看一下。我把这个我先把它删掉，或者这样吧，我把它注释掉。

注释掉吧，啊，然后呢，我把这个再复制出来。平均C、平均V好。好，我把这个删掉。OK，把这个放的也删掉。这两段我想让它字体变成红色，我需要在这么去做啊，我需要在这里去写当前，当前我们这个环境啊，是HTML环境。我可以在这边写个标签，叫style标签。Style叫风格样式的意思，这边我写个type。叫杠CSS。表示当前这里面的环境，这一对标签内部的环境是CSS环境。CSS。CSS，我们的注释用杠芯新杠。啊，没有没有这个单行这个杠杠啊。杠新新杠。我们写一下。

这里是啊，被style。标签。包围的范围是CSS环境。可以写CSS代码。这个杠新新杠我就不再写注释了，杠新新杠表示CSS里面的这个注释行吗，同学们。啊，他不区分什么单行多行。所以呢，我们回到正题上来。刚刚我们我们的需求是我想使这两个段落。它的字体都是红色，我写个P标签。大括号。大国好。然后在这个里面，我就可以写一个叫康的。看的是颜色吗？冒号，这个冒号是英文的。Read。就这样的。我把这个color等于read，我把它挪到这边来了。我们一运行，你会发现这两个段落是红色吧。那如果说老师我这边有十个段落呢。

没有关系的，哪怕你有十个也不要紧的。啊，我这边写了四个，写一下吧，段落三段落四。那你看一下是不是四个段落全是红色呀，我这下面代码根本不用改，我只定义了这么一个规则。这个是什么？这个是标签名称。表示所有的P标签是吧，同学们所有的P标签。都遵循大括号这里面的规则。大括号，这里面的规则就是颜色是红色。好，这个是标签，我们称之为叫标签样式表。啊，这是个标签嘛，那所有的段落他都遵循这样的样式。再来。我们的样式呢？这是12344个段落。同学们。

嗯。老师啊，这个1234这四个段落，我想让第三个段落。我想让第三个段落你的字体不是普通的字体，要稍微大一点。这个字体有点小，我想把字体变大一点。比如说定义为20像素。我怎么做呢？我只想针对于段落三，能明白不？我们可以这么去写，比如说我在这边我再写一个。点。SIZE20，或者就写个叫F20。好，我在这里面写一个font size。20PX。就加了个点。这名字是什么玩意儿？哦，这个点它指的是叫。类样式。这个我们说的是标签样式，因为这玩意儿是个标签名字嘛。

那这个地方一个点，这种叫内样式。我定义了一个类样式，我在下面就可以引用它，比如说我刚刚说的段落三嘛，我在这边写个类class类样式。F20。这个地方没有点，直接引用的是这个类样式的名字叫F20。我们再来试一下。你就会发现第三个段落字明显比其他的要大一些。没问题吧？啊，这个字会大一点，就这样这种叫类样式。再来。这个。段落四。段落四啊，这个段落。我想让它的字体加粗。或者这样吧，我想让它有背景颜色，当前这一段有背景颜色。那怎么做呢？当然了。我可以再定一个类样式。

是吧？除了我们定义类样式之外，我们还可以这么去写。段落四。我这边写个井号。比如说我写个叫background叫BG，意思一下，随便随便写一下啊。或者这边写个叫P4吧，意思一下。然后我在这里面写个背景颜色，Background。Color，呃，它的背景颜色是什么呢？比如说。Pink pink是什么颜色？Pink是粉色是吧，这个我我搞不清，大家一个很奇怪的现象啊，这个每个班同学都说绿色，大家这个男同学这么喜欢绿色啊。这个是一个很奇怪的现象是吧。这个现在年轻人这个思维很独特啊。P4标签来，我们写这个背景颜色，当然这里面字体我也可以去修改。放the size。比如说24，那字体会更大一些吧。比如说字体加粗。Weight。

风的，比如说我们写个blood。啊，出体。呃，比如说我们还有，比如说还有叫呃风style。Style，比如说我来给他来一个习题，Ital。斜体。啊，Family。啊字体你到底用什么字体，默认这个字体显示的有点难看，我给他换一个。比如说我换一个叫华文彩云。啊，应该是有这个字体的啊，华文彩云这个字体。华文。好，华文彩云这个字体好，就这样的。那我就写了个警号诶。这上面是个点点表示的是那样式。那这个井号表示什么呢？井号表示ID样式。ID。样式。井号表示ID样式。所以我们在这边写个ID，等于。P4。

就是这样的。我们需要注意的是这个ID属性，我们在HTML的标签里面尽量的不重复。你这个ID叫P4，那请你其他的标签ID就不要叫P4了。行吧，同学们，ID要尽量的唯一。ID属性。啊，ID属性在整个。HTML文档中。尽量。保持唯一。虽然唯一，虽然，虽然你不唯一，他不报错啊虽然啊，不唯一，虽然重复。也不会报错。但是要尽量的保证它能够唯一。这种我们称之为叫ID样式，我们来试试看一下段落四。运行一下。你看段落四，它的背景颜色是粉色。这个字比上面的字还要大一些，而且这个字是加粗的，而且这个字体明显，你看它感觉它是空心的，对吧，和上面不太一样，而且它好像是斜着的。

是吧？就是这样的。那这些就是我所设置的属性。大家先不用纠结于老师，这些属性都没学过。啊，我要一个个的去去去记啊，没有必要。没有必要。我们简单小结一下。第一个我给大家说的是为什么需要。CSS为什么需要CSS同学们？因为这边段落太多了。如果我还在里，里面每一个都写这个缝的标签，你看我就写，光写一个字体颜色，你每一行里面是不是都要加缝的标签啊，太烦了，所以我们就在直接在上面定义了这么一个规则，是不是就可以了呀，而这个规则我们就叫CSS样式表。这是我们第一步，为什么需要CSS？第二步，我们学习的是CSS的语法分类。或者叫分类吧。

我们有三个分类。第一个叫标签。样式表。第二个叫类样式表。第三个叫ID样式表是吧，同学们。当然了，我们还有更复杂的。比如说我们有组合的样式表。什么叫组合的样式表？我给他写一个。我这边写一下啊，CSS的最基本的。最基本的分类啊，有这么三个，还有其他的一些混合的，来，我写给大家写一个啊，给大家看一下。首先。老师，这个是什么？Divv还记得不，这是不是表示一个层啊，昨天咱们演示的时候，是不是把这个div的宽度和高度设置成一个正方形啊，然后我们搞了三个divv，哎，感觉是有这个层次感的是吧？同学们啊，他就这个层div。这个div里面我写个段落。我写的段落。

这个段落里面我写了个SPA。那这边我写个hello。然后呢，我在下面呢，我再写一个span。这边我写个word。然后呢，在下面呢，我再写个段落。这边我写三感叹号。那这样大家想想是不是hello word感叹号啊？就是这样的，你看一下hello word感叹号，哎，这个怎么还有红颜色啊。为什么同学们？哎，因为我们有一个叫标签P标签这个样式是不是啊，所以说这个P标签里面的它会变成红色，这个P标签里面的也会变成红色是吧，同学们。当然和上面没有关系了，我们现在来看啊，我现在想做的一件事情是什么呢？你看你来看啊，我来写个写个内容。这个段落和这个段落啊，38行和41行，这个段落它字体变成红色了，我想让这里面的字体啊，段落它的字体是蓝颜色，不要是红颜色，但是我这边已经定义了这玩意儿了。

Div空格段落。呃，看了。这个表示的是什么？这种叫组合样式。组合样式。Div内部的P标签，它里面的字体是不漏。所以我们再运行一下，你会发现这个变成蓝颜色，这也变成蓝颜色，但是上面的没变，为什么。因为我说的是div内部的嘛，中间是一个空格，表示div内部的P标签才遵循这样的样式。我再来写一下。Class。好，我这边写一个叫。F32。我这边也写一个class等于F32，注意看当前我的类样式是两个不同的标签，引用了相同的类，看到吗？

两个不同的标签使用了相同的类样式。现在呢，你看。Div空格井号F32。我是这么去写的。我想让它内部，我想让它内部phones size。啊，我想让它的字体32PX。我想让他的family。宋体或者黑体吧。哎，就是这样的。那是不是div内部的，只要你有class等于F32，是不是都遵循这样的样式啊？那是不是这两个都遵循了。所以我们运行一下，你看一下它是不是变得比较大，它也变得比较大，当然它肯定字体和这个不一样是吧，明显这个和这个字体是不一样的。就是这样的。所以这种叫组合样式。

我写的这这里啊，叫组合样式，我们的组合样式你看是不是标签和标签可以组合，标签和类啊等等是不是都可以组合，可以把它混合在一起，那么会写出相对比较复杂一点的啊。再来。有同学会觉得很疑惑，老师，这些样式表，这些属性，对吧？你怎么能记得住？其实我也记不住，只不过这些是比较普通的，比较常用的。所以呢，这个这个可能就相对会熟熟练一些啊，能记得住，那么其实我们的样式表规则有很多呢。一般情况下，大家是没有必要去记的，因为咱们不是专业的这种这种专门做这种样式的啊。那我这边有一个样式表。CSS。这边有个帮助文档，这边人家给我们做了很多的归类，我们把这个属性打开，你看一下和字体相关的。和字体相关的是不是也封了下一张？

这是咱们看到的风size。我们还有看到。是不是字体的颜色。Family，哎，你到底想用什么样的字体？所以说这边都有和字体相关，和文本相关，和背景相关，比如说background。Background。Background background background，还有background。这这种叫背景。比如说我们这边有个叫background repeat，这是什么玩意呢？这个叫背景，叫repeat，叫重复。我不知道大家有没有注意到啊。如果咱们同学有做过这个网页制作的这个经历的话啊，大家也可能会发现我们有些网页它的背景图片啊。背景图片是一像素的一个图片，你把这个图片一打开，它好像就一个点或者一条线。啊，一个点或者一条线，那就是一张背景图片，那有人会觉得老师怎么在一个点或者一条线怎么会是一个背景图片呢。

这是我们美工在做的时候，他把图片就做成了一像素。啊，做的非常非常小，然后我们可以通过background repeat repeat，叫重复。那我这一个点或者这一个线，我在水平方向和垂直方向都进行重复的话，那是不是它就能展开了。这不就变成一个一个一个背景了，就是这样的，就重复嘛，是吧，一个点横向和纵向都重复嘛，不就变成一个面了吗。啊，这个叫。简单了解一下啊，不需要掌握。这个叫背景。那比如说还有定位啊，尺寸啊等等等等，会有很多不着急啊，不着急我们要用的时候再来看，或者直接百度嘛，是吧，OK。再来。那么这是我所说的第二点，那么第三点我想给大家讲的一个基础的语法是什么呢？CSS。从CSS，从位置上。从位置上的分类。

位置上的分类，分类第一个。我们有叫嵌入式样式表。第二个。我们有内部样式表。我们还有外部样式表。我们的样式规则呢，同学们。我们的样式规则。内部样式表是什么呢？我们上面在style标签内部出现的。我们写的一个HTML文档，内部用一个style标签来包裹的，这些属于叫内部样式表。内部样式表。那么这种叫嵌入式的样式表是什么呢？比如说这个段落。啊，或者第一个吧，这个段落。我可以在这个SPA上面我来写一个style，你看还可以在一个标签内部写一个style属性，看到了不？

还他还可以这么去写好。我这边写一个风的SIZE60PX，那这个字应该是相当大的。Wait字体加粗。好，就这样吧。啊，那这个字应该比较大了，把它的颜色也改掉，我把它改成yellow。那我们来试试。运行一下，你会发现这个字比较大。是吧，然后是黄颜色的，而且是而且是是不是加粗的呀。对吧，而且是加粗的。就这样，那时候老师不对啊。你这一行的文字，它上面不是已经遵循遵循一定的样式了吗？这是一个P标签。P标签里面你看啊，第里面有P标签，它不是应该是蓝颜色吗。是不是啊？那这边到底是蓝颜色还是黄颜色呢？啊，我们发现它变成黄颜色。的就近原则是吧，因为你这玩意儿是在人家标签内部设置的嘛，阿里外面设置的是这个段落嘛。

是吧，哪怕是什么，哪怕你设置的不是段落，哪怕你外面。你设置的就是这个span也不行的，它的优先也更高。因为你毕竟写在上面，这个写在下面是吧，写在标签内部，它的优先级会更高。这个叫嵌入式的样式表，写成一个标签的内部，以一个属性的形式存在，叫嵌入式样式表。第三种是什么呢？第三种叫外部样式表。是这样的，同学们，我们后面要慢慢的养成一个习惯，这是一个HTML文件，那这个里面就只出现HTML代码。你这个网页上修饰这个网页的这个CSS代码太多了。啊，这里面代码太多了。所以呢，我们一般情况下，我们HTM页面里面不要再去写这些CS代码，我们把这些CSS代码专门的用一个文件去管理，然后呢，我们在HTML页面上面去导入这个CSS文件。

所以大家看一下。比如说。我不考太多啊，我就考这三个行不行，同学们。下面的我就留着吧，啊，剪切掉了。原则上来说，应该是所有的全部把它变成一个文件啊。行，我简介掉了。然后。好，我在和他。这个位置啊，我在这个位置，我写个叫CSS，或者写个叫style，随便你啊，这个不同的企业，它这个命名规范不一样。好，CSS，那我在这里面我就新建一个记事本文件叫代零幺.css注意啊，后缀名是点CSS。然后我们把它打开。把它放到这边。那放进去之后呢，我们就要来引入它诶。我们已经定义了一个CSS文件，现在我们来运行一下，你会发现。

这个我们看一下啊，那个CSS里面咱们用的是什么规则。打开。我们看一下。华文裁员的现象是不是没有了？警号批示吗？你看一下这咱们井号P4叫这里是段落四吗？然后咱们跟刚才运行的时候，段落丝好像不是什么华纹，我记得华纹彩业是那个空心的字体嘛。对吧，发现它没有这个效果了，那咱们需要把它引入进来，我怎么把它引入进来呢。注意了，我们也是写在黑的标签里面，我们写个叫link标签。这个内标签请大家不要写成单标签。你就写一个开始标签就可以了。Real等于style sheet，这是固定写法。然后hi。哎，HF在哪里用过的。超链接用过的是吧？哎，这个也是一样的，叫链接某一个CSS文件，我们在CSS文件夹里面有个叫代零幺.css。

那行，咱们试一下，你看是不是它又有这个样式了，华纹彩云，然后有背景色。啊，这个叫引用外部的样式表。就是这样。那么这是我们所说的，呃，CSS的一些基础的一些语法知识。