1. CSS是什么
CSS（层叠样式表）是用于描述页面展示样式的一种语言，它可以控制HTML中所有元素的外观与布局。使用CSS，您可以将样式应用于单个元素、多个元素或整个文档。CSS的主要好处是将文档内容与文档样式分离开来，从而提高了页面的易维护性、可读性和灵活性。
1.1 CSS的语法
CSS由两个主要部分组成，样式选择器和声明块。样式选择器指定要应用样式的HTML元素，声明块包含要应用的样式。CSS的基本语法如下：
selector {
property1: value1;
property2: value2;
...
propertyN: valueN;
}
其中，selector是您要应用样式的HTML元素，用花括号包含其后的声明块指定具体的样式内容，每个属性/值对都由分号分隔。例如：
p {
color: blue;
font-size: 16px;
}
这条CSS规则指定了所有<p>元素的文本颜色为蓝色，字体大小为16像素。
1.2 CSS的优先级
当多个CSS规则应用于同一HTML元素时，会发生CSS优先级的冲突。CSS优先级是用于确定哪个规则应该具有更高优先级的算法。它主要是由选择器的类型和权重决定的，不同类型的选择器拥有不同的权重，有些选择器比其他选择器更特定。例如，以下规则中，第一个规则的优先级较高：
p {
color: red;
}
#intro p {
color: blue;
}
在这个例子中，第一个规则使用元素选择器，而第二个规则使用ID选择器和元素选择器的组合。因为ID选择器的权重比元素选择器的权重更高，所以第二个规则只有在第一个规则没有应用于相同元素时才会起作用。
2. 在HTML中引用CSS文件
在HTML中调用外部CSS文件是使用<link>元素。该元素应该放在HTML文档的<head>标签中。使用外部CSS文件的好处是，可以将样式代码与HTML分离，提高了代码的可维护性。
2.1 创建样式表文件
创建样式表文件时，需要使用文本编辑器（例如NotePad、Sublime Text或Visual Studio）等工具。创建样式表文件时，请务必将文件保存为<filename>.css，并将其放在您web服务器上的任何位置。例如，如果在web服务器的根目录上有一个名为“style.css”的文件，则可以通过以下URL在HTML中调用此文件：
<link rel="stylesheet" href="/style.css">
该链接在HTML中使用<link>元素，它具有以下属性：
rel：规定了文档与链接之间的关系。对于CSS文件，该属性的值应该是“stylesheet”。
href：指向需要加载的文件的URL。
2.2 内联CSS
内联CSS是将CSS代码嵌入到HTML元素中的技术。如果要将CSS样式应用到单个元素，则可以使用内联CSS。内联CSS使用“style”属性。例如：
<p style="color: blue; font-size: 16px;">This is a paragraph.</p>
在这个例子中，样式应用于<p>标签本身，而不是通过在CSS文件中定义的类或ID。
2.3 嵌入式CSS
除了内联CSS和外部CSS文件以外，还可以将CSS代码直接嵌入到HTML文档中。这称为嵌入式CSS。嵌入式CSS使用<style>元素中的CSS代码块。例如：
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
在这个例子中，CSS样式仅应用于<p>元素。
3. CSS选择器
CSS选择器是用于选择要应用样式的HTML元素的模式。常见的CSS选择器有以下几种：
元素选择器：选择指定HTML元素，例如p选择器适用于所有的<p>元素。
ID选择器：通过元素的ID属性来选择HTML元素，例如#intro选择器适用于id属性为“intro”的元素。
类选择器：通过元素的class属性来选择HTML元素，例如.intro选择器适用于有class属性为“intro”的所有元素。
后代选择器：选择指定元素的后代元素，例如div p选择器适用于所有文档中的所有<p>元素，只要它们是div元素的后代。
组合选择器：将两个或多个选择器组合在一起，例如p.introduction选择器适用于所有类为“introduction”的<p>元素。
3.1 通配符选择器
通配符选择器（*选择器）选择文档中的所有HTML元素。通配符选择器在CSS中极为常见，因为它可以使您选择所有的HTML元素，从而使CSS样式影响到整个文档。例如：
* {
margin: 0;
padding: 0;
}
这些CSS规则将文档中所有HTML元素的边距和内边距重置为0，以消除默认样式的影响。
4. CSS属性
CSS属性表示样式的性质。例如，您可以指定文本颜色、背景颜色、文本大小、宽度、高度等。在CSS中，每个属性都有一组值，可以根据所需的样式类型选择合适的值。
4.1 文本属性
CSS中的一些常用文本属性包括：
color：设置文本颜色。
font-size：设置字体大小。
font-family：设置字体系列。
font-style：设置字体样式。
font-weight：设置字体粗细。
text-align：设置文本对齐方式。
text-decoration：设置文本修饰，例如下划线、删除线等。
text-transform：设置文本转换，例如大写、小写、首字母大写等。
4.2 盒子属性
CSS中的一些常用盒子属性包括：
width：设置元素的宽度。
height：设置元素的高度。
margin：设置元素周围的边距。
padding：设置元素周围内边距。
border：设置元素的边框。
display：设置元素的显示方式。
position：设置元素的定位方式。
5. CSS样式表案例
以下是一个简单的样式表案例：
/* This is a CSS comment */
h1 {
color: red;
font-size: 36px;
}
p {
color: blue;
font-size: 16px;
}
.intro {
font-style: italic;
}
#main {
width: 960px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
}
这个样式文件包含了对HTML中<h1>和<p>元素的颜色和字体样式的定制，以及对类为“intro”的元素的字体样式定制和对ID为“main”的元素的盒子属性的定制。
6. 总结
CSS是一种用于描述网页展示样式的语言。在HTML中调用CSS非常简单，您可以选择使用外部CSS文件、内联CSS或嵌入式CSS。要应用样式，请使用选择器和属性。您将需要熟悉不同的选择器和属性，以创建web上漂亮和良好结构的样式。