在前端三件套中，CSS的主要是用于美化网页、进行页面布局的。
HTML的局限性
HTML是一个非常单纯的语言，它只关心内容的语义： 比如看见h1标签，就表明这是一个大标题、看见p标签，就表明这是一个段落、看见img标签，就表明这有一张图片……HTML确实可以实现网页的功能，但是如果只用HTML来创建网页，那么网页将非常的丑，用户体验感也非常不好。所以说一般会通过CSS来进行网页布局。
CSS简介
CSS是层叠样式表（CasCading Style Sheets）的简称，所以说有时也会称CSS为CSS样式表或级联样式表（但一般叫CSS即可）。CSS和HTML一样，也是一种标记语言。 CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的形状（宽高、边框样式、边距等）以及版面的布局和外观显示的样式。 CSS可以让网页更加的丰富多彩，布局更加灵活自如。（CSS可以美化HTML，让HTML更加漂亮）。
可以总结为：HTML主要是作为网页的结构，就像是一只鸟的骨架一样；CSS主要是网页的美化，就像是一只鸟的羽毛一样。有了CSS，HTML可以专注于网页的结构呈现，将网页的布局样式交给CSS。
CSS规范
在使用HTML时，需要遵循一定的规范；CSS也是如此。CSS规则主要是由两个部分共同构成：选择器以及一条或多条声明。
选择器用于指定CSS样式对应的HTML标签，此处选择的就是HTML中所有的h1标签；声明是对该对象（HTML标签）设置的具体样式，声明内写设置的属性和属性值（这个CSS中有两个属性，字体颜色和字体大小），声明需要写在花括号内。
属性和属性值必须以“键值对”的形式出现（比如color: red）；属性是对指定的对象（HTML标签）设置的样式属性，比如字体大小、文本颜色等；属性和数学值之间必须使用":"进行分隔（这里经常会条件反射的写成"="，特别注意！）；多个属性之间需要用";"进行分隔（不要条件反射写成","）。
CSS书写位置
CSS可以在HTML中定义，所有的CSS代码都需要在<style>标签中书写（所有的样式都必须包含在style标签内），表示是样式表，style标签一般是写在HTML中的head标签中（最好写在</head>的上方，写完style标签head标签就闭合。） 虽然看似在HTML中直接定义CSS样式很方便，但是实际上是违反了HTML专注于网页的结构这个原则的，并且将HTML和CSS写在一起也看着十分冗杂，所以说常见的做法是将CSS样式定义在一个专门的.css文件中，然后在HTML中使用link标签进行引入。
CSS选择器
标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
作用：可以将HTML中的某一类标签全部选择出来，比如将所有的div标签选择出来。
优点：能够快速的为页面中同类型的标签统一设置样式，快捷。
局限：由于只能选择全部的标签，所以说同种标签不能设计差异化的样式，单一。
是一个典型的标签选择器，这个选择器会选择HTML中所有的h1标签，并且将它们的颜色设置为红色，将字体设置为25px，完全不能进行差异化的设计。
类选择器
上文提到了标签选择器只能选择同类的所有标签所带来的局限性，如果想要差异化选择不同的标签，想要单独选择一个或某几个标签，那么可以使用类选择器（开发也是最常用的）。
首先需要在HTML中的标签中使用class属性定义这个标签的类：
我们将一个div标签的类设置为了red，然后要在CSS中通过类选择器选择到这个标签（格式是.类名）：
以选择到HTML中所有class属性是red的标签，然后对它们进行样式布局。
类选择器规范
- 类选择器使用"."进行标识，"."后紧跟类名（标签中我们自定义的类名）。
- 长名称或者词组在此处不用驼峰命名法，而是使用_分隔。
- 命名规范还是遵循Java中标识符即可，尽量见名知意。
多类名
我们可以给一个标签指定多个类名，从而达到更多选择的目的（相当于每一个类都对应了一个选择器，多个选择器对一个标签进行布局）。直接在class属性中写多个类名即可完成多类名，但是多个类名之间需要使用空格进行分隔。 具有多类名的标签就可以分别获取这些类名的样式。
此时，div标签就是一个多类名的标签，它属于两个类——red类和font100类，这两个类名之间通过空格进行分隔；div标签就可以分别具有这两个类的样式（红色和字体大小100px）：
多类名的使用场景：
可以将一些标签元素中相同的样式（比如颜色设置、字体大小设置等共同部分）放在一个类中，然后这些标签都可以先调用这个公共的类来获取属性（比如设置红色公共类，设置字号公共类等），然后再调用自己独有的类；这样既节省了CSS代码，又方便了统一修改。 多类名在布局复杂的情况下是非常常用的。
id选择器
id 选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器（还添加了font100这个类的属性）：
CSS 中 id 选择器以“#" 来定义：
把id为blue_div的div标签设置为蓝色，让我们看看效果：
注意：id属性在每个HTML文档中只能出现一次，如果有一个元素<div id="header">，那么在这个 HTML 页面中，不能再有其他元素使用id="header"。id的主要目的是为了让开发者可以精确地定位和操作这个元素。
id选择器和类选择器的区别
- 类选择器好比是人的名字，一个人可以有多个名字（别名、小名这类的），而同一个名字也可以被多个人使用（张三）；但是id就好比是人的身份证号码，这是唯一的，不得重复。
- 类选择器不限次数，但是id选择器是唯一的。
- 类选择器在修改样式中使用的最多，id选择器一般用于页面中唯一性的元素上，常常搭配JavaScript使用。
通配符选择器
在CSS中，通配符选择器使用"*"定义，它表示选取页面中所有元素（标签）。通配符选择器的定义十分的简单，直接使用"*"定义即可：
选择器不需要调用， 自动就给所有的元素使用样式；只有一些特殊的情况才会使用通配符选择器，日常使用的十分少。
选择器顺序
若上述选择器同时存在，那么优先级是id选择器>类选择器>标签选择器>通配符选择器。
