为什么要使用类选择器？

因为标签选择器不能单个进行选择,所以在这里我们学习一个新的选择器。

类选择器(class):类选择器需要通过class属性来调用

语法结构：

.类名{

属性1:属性值1;

属性2:属性值2;

....

}

例如：

类选择器还可以给不同的标签进行相同的样式设置，只需要设置相同的类名即可 。

效果图：

例如：

标签中还可以有多个类选择器，来进行样式设置

效果图：

总结：

类选择器的取名是我们自己取得名字，不过一般在写代码的时候都会采用见名之意， 这也是为了让代码有更好的可读性。

注意： 1.在css中使用类选择器时，要用英文的 ".",

                   2.不能使用标签名作为类名

                   3.一些长名词可以用短横线，例如pro-img

                   4.在命名时不要用纯数字和中文来命名，尽量使用英文来命名。

多类名的使用：

目的：我们可以给一个标签设置多个类名，从而达到更多的选择。 在使用多个类名时必须要用空格隔开。

作用：一般在写代码的时候我们总会碰到不同的标签既有相同的样式又有不同的样式，重复写太多会增加代码的阅读量，降低可视性，修改起来也很麻烦，这个时候多个类名选择器就可以很好的解决。

 优点：节省代码，修改方便。

body 代码：

<ul>

        <li class="red">我是红色的li</li>

        <li class="blue">我是蓝色的li</li>

    </ul>

    <div class="red">我是红色的div</div>

    <!-- 既要这个div用蓝色的背景又要给他设置宽高 -->

    <div class="blue box">我是一个蓝色的正方形</div>

css代码：

.red{

                 /* 选择红色的li */

                   background-color: red;

             }

             .blue{

                 /* 选择蓝色的li */

                 background-color: blue;

             }

             .box{

                 width: 200px;

                 height: 200px;

             }