什么是CSS
CSS是Cascading Style Sheets（级联样式表）的缩写，它是一种用于网站样式和布局的语言。在HTML中，可以使用CSS来控制页面的各种元素，比如文本、字体、颜色、背景、边框等等。
这种语言的优势在于它能够将样式和布局从HTML中分离出来，提高了代码的可重用性和可维护性。使用CSS的好处还包括：
能够使网页更具有一致性和专业性
可以减少代码量
使搜索引擎更容易索引页面
可以提高页面的加载速度
在哪里写CSS
在编写CSS时，有三种不同的方式：
1. 在HTML中嵌入CSS样式
可以在HTML文件的头部使用style标签来嵌入CSS样式。如下所示：
<head>
<style>
/*这里可以写CSS样式*/
</style>
</head>
这种方式编写的CSS样式仅适用于当前页面的HTML元素。
2. 使用link标签将外部样式表引入HTML文件
可以在HTML文件的头部使用link标签将外部的CSS样式表引入HTML文件，如下所示：
<head>
<link rel="stylesheet" href="styles.css">
</head>
这种方式编写的CSS样式可以被多个HTML文件共享，提高了代码的可重用性和可维护性。
3. 在行内方式中使用CSS样式
可以在HTML标签内部使用style属性来定义CSS样式，如下所示：
<p style="color: red;">文本内容</p>
这种方式编写的CSS样式仅适用于当前标签。
CSS语法
CSS规则由一个选择器和一组声明组成。选择器用于指定要设置样式的HTML元素，声明则包含了一些属性及其对应的值。
选择器
选择器是用来指定将要应用样式的HTML元素的标识，可以是标签名、class名、id名、属性名等等。
在CSS中，选择器通常用如下方式进行定义：
selector {
/*声明*/
}
其中selector表示选择器，声明是包含一个或多个属性设置的CSS代码块
声明
声明是由属性和值组成的，属性用来定义哪些样式将被改变，值用来设置如何改变它们。每个属性/值对之间用冒号分隔，声明之间用分号分隔：
selector {
property: value;
property: value;
}
CSS样式的优先级
CSS属性有不同的优先级，如果同一个元素包含来自多个选择器的不同属性，则根据优先级规则来确定应该应用哪个属性。
优先级的规则
优先级的计算规则如下：
首先，浏览器会将选择器进行分解，并对其中的标签、类、ID值分别赋予权值：标签选择器为1，类选择器为10，ID选择器为100。
然后，将CSS规则中具有权值的选择器累加起来，得到该规则的权值总和。
最后，按照顺序计算选择器匹配的CSS规则的权值总和，比较出优先级高的CSS规则。
如果两条规则优先级相同，则后面出现的规则优先级更高。
优先级的实例
下面是一些优先级计算的实例：
给同一个元素应用了不同的选择器：
p {
color: red;
}
#title {
color: blue;
}
在这种情况下，具有id属性的选择器权值更高，因此标题的文本颜色将为蓝色。
给同一个元素应用了相同的选择器：
p {
color: red;
}
p {
color: blue;
}
在这种情况下，后面出现的规则将覆盖前面的规则，因此文本颜色将变为蓝色。
给同一个元素同时应用了class和id选择器：
p.good {
color: red;
}
#title {
color: blue;
}
在这种情况下，id选择器权值更高，因此标题的文本颜色将为蓝色。
CSS样式的继承
CSS属性可以继承自父元素。这意味着，如果将属性设置在父元素上，则子元素继承该属性值，除非子元素另有设置。
可继承的属性
下列CSS属性是可继承的，即可以从父元素继承：
font-family
font-size
font-weight
line-height
color
text-align
...
CSS样式的层叠
CSS样式的层叠指的是同一个元素的同一属性被定义在不同的规则中时，浏览器使用哪一个值。由于CSS允许使用外部、内部、行内方式定义CSS规则，因此同一元素的同一属性可能会存在多个值。为了解决这种情况，CSS规范定义了层叠的规则。
层叠规则
层叠规则根据其重要性、特殊性和出现顺序来确定应用哪个规则。从高到低，这些规则如下：
!important：属性设置后面加上感叹号！，具有最高的优先级。
特殊性：选择器的特殊性决定了应该应用哪些规则。
后来居上原则：后面出现的规则会覆盖之前出现的规则。
特殊性的计算规则
选择器的特殊性基于选择器中包含的ID属性、类属性、标签名等元素的数量。特殊性的优先级如下：
ID属性的数量
类属性、属性选择器和伪类的数量
元素标签和伪元素的数量
注释不参与特殊性计算
特殊性的实例
下面是一些特殊性计算的实例：
仅使用标签选择器：
p {
color: red;
}
这个规则的特殊性值是1-0-0-0。
使用类选择器：
.color-red {
color: red;
}
这个规则的特殊性值是0-1-0-0。
使用ID选择器：
#title {
color: blue;
}
这个规则的特殊性值是0-0-1-0。
使用通配符：
* {
color: black;
}
这个规则的特殊性值是0-0-0-0。
属性选择器：
input[type="text"] {
width: 200px;
}
这个规则的特殊性值是0-0-1-1。
总结
CSS是一种用于网站样式和布局的语言，它能够将样式和布局从HTML中分离出来，提高了代码的可重用性和可维护性。在编写CSS时，可以在HTML中嵌入CSS样式、使用link标签将外部样式表引入HTML文件、在行内方式中使用CSS样式。CSS规则由一个选择器和一组声明组成，选择器用于指定要设置样式的HTML元素。CSS属性可以继承自父元素。CSS样式的层叠指的是同一个元素的同一属性被定义在不同的规则中时，浏览器使用哪一个值。CSS的优先级规则包括属性设置的!important、选择器的特殊性和后来居上原则。