1. CSS基本简介

CSS 是层叠样式表(Cascading Style Sheets) 的简称，有时我们称之为CSS样式表或级联样式表。

CSS 也是一种标记语言，主要用于设置页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

HTML 呈现结构，CSS 决定样式，通常的编程规范是结构和样式分离，也就是设计样式的相关代码会保存在特定的css文件中，极少情况下会直接定义到html文件中。

CSS 规则由两个主要的部分构成：选择器和一条或多条声明。例如：

<style>
    h1 {
        color: red;
        font-size:25px;
    }
</style>

上述代码中的h1就是选择器，花括号中的内容就是声明，也就是声明具体样式的值。声明也有两部分组成：属性和属性值。属性和属性值之间用英文冒号分隔。不同属性键值对之间用英文分号分隔，即使是最后一个键值对也需要添加英文冒号。

选择器的作用是根据不同需求把不同标签选择出来，简单来说选择器干了两件事：选择符合要求的标签，修改这些标签的样式。

选择器可分为两大类：基础选择器 和复合选择器。基础选择器是由单个选择器组成的，主要包括标签选择器， 类选择器，id选择器 和通配符选择器。

2. 基础选择器

2.1 标签选择器

标签选择器 是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式，其基本语法格式为：

标签名 {
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
}

例如：

<style>
    h1 {
        color: red;
        font-size:25px;
    }
</style>

上述代码会将页面中所有h1 标签选择出来，将其颜色改为红色，字体大小改为25px。 因此，标签选择器可以把某一类标签全部选择出来。

• 优点：能快速为页面中同类型的标签统一设置样式。
• 缺点：不能设计差异化样式，只能选择全部的当前标签。

博主的个人理解是，由于标签选择器会无差别地选择同一类的全部标签，一般情况下只会用在出现较少的标签上，比如body 标签。

2.2 类选择器

 类选择器 可以差异化选择不同标签，单独选择一个或者多个标签修改样式。其基本语法格式为：

.类名 {
    属性1: 属性值1;
    ......
}

例如定义一个类名为 red 的标签：

.red {
    color:red;
}

接下来我们只需要将需要选择的标签的class 属性设置为类名即可，例如我们要将页面中的某个p标签设置称red样式：

<p class="red">我会变成红色</p>

同理，你可以将red样式同时运用在多个标签上。

也可以为一个标签设置多个类名，比如我定义了一个修改颜色的类 red 和一个修改字体大小的类 font-size ：

.red {
    color:red;
}
.font20 {
    font-size: 20px;
}

运用到某个p标签上：

<p class="red font20">我会变成红色</p>

不同类名之间用空格分隔就行。

2.3 id 选择器

 id选择器 可以为标有特定id的HTML元素指定特定样式，语法规范为：

#id名 {
    属性1: 属性值1;
    ......
}

例如：

#red {
    color:red;
}

调用：

<p id="red">我是红色</p>

一般而言，同一个页面中不同标签的id是不同的，因此id选择器只能作用在一个特定的标签上，而类选择器可以作用在多个标签上。

2.4 通配符选择器

 通配符选择器 会选取页面中的所有元素，其语法格式为：

* {
    属性1: 属性值1;
    ......
}

例如：

* {
    color:red;
}

3. 基础选择器总结