CSS的引入与基础选择器讲解

CSS的简介

首先要了解CSS是什么。CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。
HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。

CSS的引入方式

在HTML中引入CSS共有3种方式：
（1）外部样式表；
（2）内部样式表；
（3）行内样式表；
1.外部样式表
外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。

写法：外部样式表都是在head标签内使用link标签来引用。

2、内部样式表
内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在style /style标签对内，并且style标签对是放在head标签对内的。
写法

浏览器展示效果

对于内部样式表，CSS样式在style标签内定义，而style标签要放在head标签内。

3.行内样式表
也是把CSS代码和HTML代码放在同一个文件中，但是跟内部样式表不同，CSS样式不是在style标签对中定义，而是在标签的style属性中定义。

浏览器展示效果

说明行内样式表是在单个元素内定义的，对于网站来说，冗余代码很多，一旦代码过多，每次改动CSS样式都要到具体的标签内修改，这样使得网站的维护性也非常差。

CSS的基础选择器

元素的id属性
id属性被赋予了标识页面元素的唯一身份。如果一个页面出现了多个相同id属性取值，CSS选择器就会因为无法分辨要控制的元素而最终报错。

元素的class属性
class，顾名思义，就是“类”。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class具有相同的CSS样式。

如果要为两个元素或者两个以上元素定义相同的样式，建议使用class属性。
id和class就像身份证号和姓名，身份证号是全国唯一的，id号也就是唯一的，class（类名）就是姓名，两个人的姓名就有可能一样。

选择器，说白了就是用一种方式把你想要的那一个标签选中！把它选中了，你才能操作这个标签的CSS样式。CSS有很多把你所需要的标签选中的方式，这些不同的方式就是不同的选择器。

下面来介绍3种基本的选择器的
1.元素选择器
元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。
举一个案例：

展示效果

div{color:aqua}表示把页面所有的div元素选中，然后为所有的div元素设置颜色color为蓝色。

在这里我们可以看出，元素选择器就是选择相同的元素，而不会选择其他元素，例如这段代码中的p元素就没有被选中，因此它们的内容就没有变成蓝色。

2.ID选择器：
id选择器
我们可以为元素设置一个id，然后针对这个id的元素进行CSS样式操作。注意，在同一个页面中，不允许出现两个相同的id，这个就像没有哪两个人的身份证号是相同的道理一样。
语法：

浏览器展示效果：

class选择器
class选择器，也就是“类选择器”。可以对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行CSS样式操作。

说明：
class名前面必须要加上前缀“.”（英文点号），否则该选择器无法生效。类名前面加上“.”，表明这是一个class选择器。

浏览器展示效果：

虽然这个HTML页面有3个div元素，但是我们为前两个div元素设置相同的class，然后设置相同class的元素颜色为绿色。 因此，第3个div层内容不会变成绿色，因为它不属于class=“x”，它没有被“选中。