06_尚硅谷_大数据JavaWEB_CSS常用的样式及选择器.avi原创

啊啊啊，那这节课呢，我们给大家把这个CSS这个样式啊，简单的来说一下，呃，那么首先呢，我们还是来看一下这个样式啊，就是我们刚刚呢，呃提到过啊，它是干什么的，这个样式呢，它其实就是一个表现啊，比如说啊，我们刚刚在写的这个页面中。大家也能看到啊，它这里面呢，就是有一些基本的诶什么东西啊，就是你要显示的内容啊，但是呢，长得呢还是比较丑的是吧？啊但是人家一个这个实际的网页里面呢，就是长得特别好看啊，那个页面呢做的特别好看，那么他其实呢，主要就是通过我们这个样式呢，来去给他做一些修饰啊，然后呢，他就会变得好看一点啊呃，那这个样式怎么去用呢？诶就是。我们通过它这个CSS的一个语法就可以啊把你啊，诶想让它怎么去显示啊，你就都可以把它们哎显示出来了，那我们就呃，结合上我们刚刚提到过的一个标签吧，你看我就写到这儿啊，什么标签呢，我们叫做div啊，呃，这个东西呢，是我刚才说到的，就是我们以前网页中，如果说我想做布局的话，我们基本上都是通过这个table来布局，但是现在的话呢，我们就不再使用这个table了，而是使用了这个div来去布局，那么它是个什么标签的啊，你看它比较神奇是吧，你看似呢，你写了一个div，但是这个东西你看了哈，我来给你刷新一下，你并看不到它的任何效果，你看到没有，没有东西对吧，但是我在里面写个东西啊，比如说哎，这是个div，哎，我写了一个内容，然后呢，你再去刷新的时候呢，他确实还有这个东西。

能看懂吧？啊，那你说这个div到底是干嘛的呢？其实它就是为某一部分区域，比如说我页面中，诶，这是我的一个页面，那么我现在呢，想让我页面的这一部分区域呢，呈现出某一种效果来，那么你就可以通过这个div呢，让他去选中这一部分区域，然后呢，给他去施加一些样式，好，那么接下来我们就可以去写这个样式啊，首先呢，样式往什么地方写呢？因为样式它是描述页面的，因此我们要把它写到我们最上面的这个hide里面，能理解这个意思吧，写到hide里面，在hide里面呢，我们通过一个style，就是样式的意思啊，通过这个style呢，诶往这里面去写，比如说现在我想给下面的这个div施加样式了，那么我们先教给大家第一种语法，就是元素选择器，就是你必须得先选中你要给谁去施加这个样式。

啊，那我们先使用一个元素选择器，你要给div施加样式，那你就直接写个div，后面呢，通过一个大括号，诶在这里面就去写它的样式就行了啊比如说我们常用的样式有哪些呢？我首先呢，得告诉你这个div你的宽是多少，比如说宽是小一点吧，啊300的像素，哎，300个像素啊，300个像素同样高呢，我也可以设置，比如说也是300个像素。

能看懂吧，那么把这个设置出来以后呢，我们再来刷新，诶刷新你发现还是没有效果。对吧，但其实现在呢，它已经是一个300个像素了，只不过我们看不到，那么我们可以怎么做呢？诶，我可以再给你加上一个包的边框嘛，对吧？来表示边框，来两个像素，好再来刷新。诶怎么还没有啊啊，因为什么呀，注意了啊，你这个包的啊，如果你要给它加钥匙的话呢，我们需要怎么加呢？我们需要给它加上一个边框，然后呢，颜色，还有你这个边框的那个线啊，所以说这个语法的话，诶，如果说我们记不住，那应该怎么办啊。啊，我们就可以注意了哈，我们顺便呢，教大家一个这样的一个东西啊，在我给大家发下去这个资料里面呢，我们有一个啊资料啊，资料里面有一个W3C这个手册看到没有，看到了吧？哎，这个是一个手册啊，就是你所有要写的东西，基本上都可以从这里面找得着，比如说我们试着找一下啊，现在我想写这个SS样式了，那我就点一下，点一下里面以后呢，这里面我们去看一下啊，找一下我们这个CSS边框看到没有，哎，有这个边框我们看看是不是它啊点进去，点进来以后呢，你看了哈，它这个每个边框呢，有三个方面，分别是宽度，样式以及颜色看到没有。

是不是人家在这描述的呀，对吧，而且边框的使用是一个包的，那么我们可以怎么做呢？你看了哈，你就可以根据他写的这个，比如说我看一下啊啊，这个还不是很明显啊。我看找一个比较简单一点的，这里面有没有啊。没有是吧，包的它都是一个直接设置单个的哈，我们有没有找一个统一一点的啊包的。

啊，那没有我们自己写吧，好，那我就按照什么呀，按照他刚刚提示的，你看它有一个宽度，有一个样式以及一个颜色，我们来试试啊，宽度的话呢，我们就写一个两个像数啊，然后呢，它还有一个样式，样式的话就是你那个边框线，比如说solid，就是我们的一个实线，然后呢，还有个什么东西来着，颜色是吧，颜色的话，比如说我写个红色，我们看一下这样行不行哈，来再来刷新一下，大家看一下有了没有了吧？诶，这就是我们的啊300个像素，这也是我们的300个像素啊，因为我这个页面呢，我是放大过的，现在是百分之一百三啊来，这是我们正常的一个效果，这就是我们的300个像素。看到了吧，诶这就是我们设置边框的，那么这样的话呢，就相当于我通过一个div呢，就把这一部分区域呢，就给它选中了，那么你就可以在这一部分区域给你施加你想要的这些样式了啊，比如说我们常用的还有什么东西呢，再来介绍一个。

Background color背景色吧，啊，比如说来个啊宋老师喜欢的颜色啊。看到了没啊，好像不够绿是吧？啊对吧，哎，就是我们这个啊，OK，这就是我们的一个啊，就是我们的常用的些样式的话，就这些就行了啊，因为我们毕竟也不是搞前端的，对吧？其实呢，人家这个东西是特别特别多的，大家可以看一看，就这个CSS这个语法，你看这里面东西多不多太多了，对吧，我们不是做这个事的，所以说呢，我们对它有一个基本的认识就行了。明白了吧，好，那么这是一个给大家说过的叫做元素选择剂啊，我看一下这里面好像加不了这个注释是吧？这个应该怎么加主食啊，怎么加好像也加不了是吧？那行吧，我们就啊，先不加了吧，这是一个元素选择剂啊，那我再来给大家去写一个，你看看哈，我在这个下面呢，还想再一个div OK，那么其实这个div你写出来以后呢，注意你直接去刷新啊，直接来到页面中刷新走，你看到没有，是直接出来一个一模一样的呀，为什么呢？因为你的这个样式作用的就是所有的div，只要你来一个div，那么它的样式都是这个样子的，听懂了吧，但如果说我想单独的给我这个div做一个样式的设置，那你可以通过一个ID选择器，你给他写个ID属性，而这个ID值呢，随便写，但是呢，在整个页面中。

必须要保证是唯一不重复的啊，比如说我就叫什么D1，那么如果我想现在单独的给这个做一些额外的设置，那么我们就可以啊，怎么做了呢？注意了啊，我们回到上面的这个样式这个位置，我再通过ID选择器的语法是井号，写上你的ID值，明白了吧，后面写个大括号，诶这就是我们的单独选中谁了呢？单独选中了诶这样的一个div了，用好，那我们就来看一下，给他施加一个样式，比如说呢，我让你的颜色变一下是吧，变成一个呃蓝色吧。

能看明白吧，诶变成一个蓝色，那么现在我们再去刷新一下这个浏览器，刷新你看一下它是不是又变了，看到没有，诶，就是我单独给它施加了一个样式，那么它就发生了一个改变了啊，这就是我们的第二个叫做什么东西啊，叫做ID选择器啊，那么除了这个之外呢，我们还有一个常用的哈，比如说什么常用的呢？大家注意，我再来两个div啊，再来两个div啊，那么这两个div的话，大家注意，我写出来以后呢，直接来刷新一下，大家看这个效果啊，是不是直接又来了两个这个绿色的对吧？多认的，那如果是现在我想统一的把他们两个都设置为黄色的怎么做呀？

首先我是不是可以给每一个加个ID吧，对吧，但是这样的话呢，诶写起来就不是很方便了，是吧？重复性的去写了，那我再给大家去解释一个叫做什么类选择器啊，就是我们可以给他写一个class，然后呢，这个class就是可以重复的了，比如说它是一个呃。就是一个地板可以吧，然后呢，这个上面呢，我也可以写一个class，就是一个D能明白吧，那么他们两个的这个样，就是一个class呢，都是一样的，那么我们在上面呢，就可以怎么写了呢？注意样式就是我们的class选择器呢，它的语法是一个点开头，后面写上你的。什么呀，Class就是那个D嘛，然后呢，在这里面的话，我们也是通过大括号来去写，那么这个就叫什么呀，叫做我们的哎，Class选择器，好，然后这里面的话，我再给你施加一个background color对吧，比如说变成什么来着，黄色啊，那就是yellow。

看懂了吧，然后呢，我们再来刷新一下，大家注意了哈，它只会把这两个给你做一个修改，上面的是没有变啊，这个是不是有没有变啊，对吧？所以说呢，就教会大家这么几种方式呢，去选中你这个页面中的一些什么元素，然后呢，给他家去施加一些我们想要的一些样式就行了，明白这个意思了吧，OK，那么这就是我们要给大家去讲的CSS常用的一些样式，就你知道它是怎么设置的就行了，然后呢，以及它常用的些什么，这个东西呢叫做选择器，那么第一个叫做元素选择器，第二个叫做ID选择器，第三个叫做A类选择器，就是我们的class选择器。明白了吧，诶还是比较简单的啊，好，那么这是我们的CSS，好，那我们再来想一下，呃，因为这个东西呢，如果说我样式特别多的话，你直接写到这里面，是不是将来会在我的HTML里面写好多这个样式啊，诶比较乱啊，那么我们其实可以直接把这个东西呢，写到一个样式文件里面，你看了哈，呃，我在我们这个代零幺，你看这是我的代码吧，我在这个地方呢，我去新建一个文本文档，我就叫什么呀，我就叫MY.css这个东西就是一个样式文件，大家能明白吧，样式文件，那么我就可以把它通过一个。

啊，就记事本吧，无所谓了啊，打开打开以后呢，其实你就可以怎么着了，你看哈，我把我其中的一部分。来注意看这我把我其中的一部分，比如说我把这两个样式呢，我想给他拿走了，我不想在这里面写了，那么你可以直接把这个样式呢，写到你的这个钥匙文件里面。能看懂吧，哎，我就把它写到这个样式文件里面了，那么写到样式文件里面以后呢，大家想一想，如果说你想让我当前的这个页面用到这个样式，那我是不是要把这个样式文件给人家引入进去啊，对不对，OK，那怎么把它引入进来呢？大家注意啊，我们需要通过这样的一个语法，什么语法呢？来参考这个手册，在我们的HTML里面，我们找这个HTML啊。

HTML里面呢，我们找一个叫做HTML的。教程啊，诶是他吧教程啊，我看看这里面有没有一个叫做HTML的元素吧，有没有元素是吧？元素里面我看一下有没有一个。不是他是吧，嗯，哪个来着，我找一下哈，HTML，然后呢。有一个link是吧，那个语法的话，我们直接拷贝过来哈，诶跑哪去了。

标题格式化，呃，样式不是它啊，诶是不是样式啊，我看一下啊。呃，啊，对，就这个语法啊，大家注意就是我们可以通过一个什么呀，通过一个link来去引入一个我们的样式文件，那我就直接把这个拷贝过去了啊，这个大家不需要去记明白吧，你只要知道怎么用就行了，把它呢还是完整性的放到我们这个hide这个标签里面，放进来以后呢，那么你只需要在这个位置指定上我自己的样式就行了，那么大家要注意，现在我的这个路径是这个样子的啊，你看我的页面啊，我的这个页面呢，跟我这个样式文件是不是在同一个路径下面啊，那么我们是可以直接进行访问的，你看那我就在我的页面中，好在这个位置直接指定成我的慢点CSS是不是它呀。对吧，把这个加上以后呢，大家注意我们再刷新我们的浏览器，刷新刷新刷新，你看一下下面这个效果是不是一样的呀，是不是一样的呀。

看到了吧，诶没有任何区别，那么这样的话有什么好处呢？就是我们单独的把一些样式文件呢，你可以写到这儿没问题，当然你也可以写到一个样式文件里面，就是方便我们进行一个集中管理，然后呢，你再把它引入到我当前的这个页面中就可以了啊所以说呢，教会大家怎么去引入一个外部的样式文件，就通过这样的一个语法啊，来这个稍微解释一下。啊，引入外部的一个样式文件啊，那么这就是我要给大家去讲解的CSS样式相关的一些东西，我们只需要把这部分了解到就可以了啊。