标记选择器的样式风格（第九次记录样式选择器class）

本小节基本要求：

• 了解css文件是做什么的---样式构建
• 了解html文件是做什么的---网站文本构建
• 了解css htm是能做什么---能完成一个完整静态网站的构建
• 了解什么是标签以及父子关系

要点：

1、样式选择器class

在实际开发网站中，css规定了两种选择器，一种是样式选择器class，一种是Id选择器#。

class翻译过来有种类的意思，中国人将它弄得好听点儿，就叫样式。

描出一个网站轮廓，利用样式选择器就够了。

一个很简单的例子：

1、写一个html文件，在body里面写一个div标签，标签中文本写上一段字：hello world！

2、右键run，运行一下看效果

3、我想给这个div标签变成一个框我该怎么做？很简单，如下，给div标签加一个样式选择器。

要点：

• 注意写法以及写的位置
• 这个haha就是我为这个选择器取的名字！名字可以随便取!

4、右键run，运行一下

可以看到，并没有框！

为什么没有？

那是因为我虽然定义了这个名叫haha的css选择器，但是还没有去编写它的代码！

5、为了省事，我就不新建一个css文件了，直接在这个html文件中写css代码。

要点：

注意写法，我用了一个标识符 . ， 这个点是一个标志，标志什么？标志这个haha 就是一个样式选择器。

解释一下haha选择器中代码的含义： boder:1px solid red; 设置边框：尺寸为1，单线，颜色为红色。 height:300px; 设置高度为300px width:300px; 设置宽度为300px

6、右键run，运行一下

现在div标签的边框就出来了！与在.haha选择器中规定的样式是一样的，红色边框，尺寸为1

样式选择器class是css文件中的常客，作用是来为html标签设置颜色、宽高、位置等。

用法：

第一步，在标签内这样写

<div class="hehe">你好</div>

第二步，在css文件中定义我们设置的这个class选择器，hehe

.hehe{ border:1px solid red; 设置边框样式 height:300px; 设置边框高度 width:300px; 设置边框宽度 }

下一篇会将上一篇写好的网站body边框给描绘出来！