1. 什么是CSS？
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档外观和格式的样式表语言。它允许开发者控制网页的布局、字体、颜色以及其他视觉呈现效果。
/* css规则 */
h1 { /* 选择器 */
color: red; /* 声明：设置文本颜色为红色 */
text-align: center; /* 声明：将文本居中对齐 */
}
2. CSS的作用
- 美化页面：提供了一种方式来控制网页的布局、颜色、字体等视觉表现形式，使网站看起来更加美观且结构化。
- 分离结构与表现：使内容（
HTML）与设计（CSS）相分离，便于维护和修改。
3. HTML DOM为什么引入css？
HTML文档对象模型(DOM)单独存在时并不具备良好的外观或用户体验。DOM是HTML文档的一种编程接口，它将文档视为一个树状结构，其中每个节点都是一个HTML元素。虽然DOM本身提供了网页的基本结构，但如果不加以样式修饰，网页会显得单调乏味。因此，通常需要使用CSS来“装扮”DOM中的元素，使其具有更好的视觉效果。- CSS选择DOM元素运用样式规则：这是指通过
CSS选择器来定位特定的HTML元素，并为其应用样式规则的过程。CSS选择器可以基于元素类型、类名、ID等多种方式来选取目标元素。
4. 如何引入CSS？
内联样式
直接在HTML标签内使用style属性定义样式。
- 特点：这种样式只对当前元素有效，优先级最高。但这种方法会导致内容与表现混杂，不利于维护和复用。
<p style="color: blue;">这是一个蓝色的段落。</p>
内部样式表
在HTML文档的<head>部分内使用<style>标签定义样式。
- 特点：适用于单个页面的样式控制，比内联样式更易于管理和修改，但不便于跨多个页面共享样式。
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
外部样式表
创建独立的.css文件，并通过HTML中的<link>标签引用。
- 特点：这是最推荐的做法，因为它允许你将样式集中管理，并且可以轻松地应用于整个网站的所有页面。这有助于保持一致的设计风格，并简化了后期维护工作。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
5. 如何生成最终页面？
下载资源： 当用户请求一个网页时，浏览器首先会下载HTML文件。如果该HTML文件中引用了外部CSS（通过标签），浏览器也会开始下载这些CSS文件。
解析DOM：
浏览器从上到下解析HTML文档，构建DOM树。DOM树是一个表示文档结构的节点树，每个节点代表文档中的一个元素或文本内容。
构建CSSOM (CSS Object Model)： 同时，浏览器也会解析所有加载的CSS文件，构建CSSOM树。CSSOM树反映了CSS规则是如何应用于DOM元素的。
创建渲染树： 浏览器结合DOM树和CSSOM树来构建渲染树（Render Tree）。渲染树只包含那些需要在屏幕上显示的内容，例如可见的DOM元素以及它们的样式信息。不可见的元素（如带有display: none;样式的元素）不会被加入渲染树。
布局（Layout）： 一旦渲染树构建完成，浏览器就会根据每个节点的样式属性计算其确切的位置和大小，这一过程称为布局或重排（reflow）。
绘制（Painting）： 布局完成后，浏览器会遍历渲染树，并将各个节点绘制到屏幕上的指定位置，从而生成最终的视觉效果。
合成（Compositing）： 在一些情况下，为了提高性能，浏览器可能会将页面的不同部分作为单独的层进行处理，然后把这些层组合起来形成最终的图像。这一步骤称为合成。
6. 优先级
当多个CSS规则应用于同一个元素时，浏览器会根据以下优先级规则决定最终应用哪个规则：
行内样式 > ID选择器 > 类选择器 > 标签选择器
当多个样式规则具有相同的特殊性和优先级时，后声明的规则会覆盖先声明的规则。
!important声明可以覆盖其他所有规则，但不推荐滥用。
具体数值如下：
- 标签选择器 = 1
- 类选择器 = 10
- ID选择器 = 100
- 行内样式 = 1000
- !important = ∞ (无限大)
对于复合选择器，其优先级是各个组成部分的加总。
.container ul li:nth-child(odd) 的优先级为 10 + 1 + 1 + 10 = 22。
7. CSS选择器分类
基础选择器
- 类选择器：.classname
- ID选择器：#idname
- 通配符选择器：*（匹配所有元素，但性能较差）
组合选择器
- 后代选择器：A B（B是A的后代）
- 子元素选择器：A > B（B是A的直接子元素）
- 相邻兄弟选择器：A + B（B紧接在A之后且同级）
- 普通兄弟选择器：A ~ B（B是A之后的任意一个兄弟元素）
伪类选择器
:hover, :active, :focus, :first-child, 等
伪元素选择器
::before, ::after, ::first-line, ::selection, 等
属性选择器
[attribute], [attribute=value], [attribute^=value], 等
8. 实例代码分析
优先级示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style>
/* 1 */
p {
color: blue !important;
}
/* 101 */
#main p {
color: green;
}
/* 11 */
.container p {
color: red;
}
</style>
</head>
<body>
<div id="main" class ="container">
<p style="color: pink;">薛之谦的歌真好听</p>
</div>
</body>
</html>
在这个例子中，
标签的文本颜色将会是蓝色。如果移除行内样式和!important，那么文本颜色将是绿色，因为#main p的选择器优先级更高（101）。
组合选择器示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 相邻兄弟选择器 连着 */
h1 + p {
color: red;
}
/* 通用兄弟选择器 */
h1 ~ p {
color: blue;
}
/* 子元素选择器 */
.container > p {
font-weight: bold;
}
.container p {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>标题</h1>
<p>这是第一段文字</p>
<p>这是第二段文字</p>
<a href="">链接</a>
<span>这是一个span元素</span>
<div class="inner">
<p>这是一个内部的段落</p>
</div>
</div>
</body>
</html>
- /* 相邻兄弟选择器 连着 */：h1 + p 选择器使紧跟在
<h1>后的第一个<p>文本变为红色。 - /* 通用兄弟选择器 */：h1 ~ p 选择器使
<h1>之后的所有<p>文本变为蓝色。 - /* 子元素选择器 */：.container > p 选择器使
<div class="container">下的直接子<p>文本加粗。 - /* 后代选择器 */：.container p 选择器使
<div class="container">下的所有<p>文本带有下划线。
伪类选择器示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button:active {
background-color: red;
color: white;
}
p:hover {
background-color: yellow;
}
::selection {
background-color: blue;
color: white;
}
input:focus {
border: 2px solid blue;
}
input:checked + label {
color: blue;
}
li:nth-child(odd) {
background-color: lightgray;
}
li:not(:last-child) {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>伪类选择器示例</h1>
<button>点击我</button>
<p>鼠标悬浮在这里</p>
<input type="text" placeholder="输入框">
<input type="checkbox" id="option1">
<label for="option1">选项1</label>
<input type="checkbox" id="option2" checked>
<label for="option2">选项2</label>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</div>
</body>
</html>
- button:active 选择器使按钮在被点击时背景色变为红色，文本颜色变为白色。
- p:hover 选择器使段落在鼠标悬停时背景色变为黄色。
- ::selection 选择器改变选中文本的背景色和文本颜色。
- input:focus 选择器使输入框获得焦点时边框变为蓝色。
- input:checked + label 选择器使复选框选中时跟随的标签文本颜色变为蓝色。
- li:nth-child(odd) 选择器使奇数位置的列表项背景色变为浅灰色。
- li:not(:last-child) 选择器使非最后一个列表项底部有10像素的间距。
nth-child 和 nth-of-type 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container p:nth-child(3) {
background-color: yellow;
color: black;
}
.container p:nth-of-type(3) {
background-color: lightblue;
color: black;
}
</style>
</head>
<body>
<div class="container">
<h1>nth-child vs nth-of-type 例子</h1>
<p>这是一个段落</p>
<div>这是一个div</div>
<p>这是第二个段落</p>
<p>这是第三个段落</p>
<div>这是第二个div</div>
</div>
</body>
</html>
.container p:nth-child(3)选择.container类下的第三个子元素变为黄色，但只有当这个子元素是<p>时才会生效。 由于第三个子元素不是<p>（而是<div>），所以没有任何<p>元素会被选中，颜色不会改变。.container p:nth-of-type(3)选择器使容器内的第三个<p>元素背景色变为浅蓝色。
结语
通过本文的介绍，我们已经深入了解了CSS的基本概念、作用以及如何使用它来美化网页。从基础的选择器到复杂的伪类和伪元素，再到样式的引入方式和优先级规则，CSS提供了丰富的工具集，使开发者能够精确地控制网页的外观和布局。希望本文能成为你CSS学习旅程中的一个良好起点。无论你是初学者还是有一定经验的开发者，CSS都是一个值得深入研究的领域。通过不断练习和探索，相信你能创造出既美观又功能强大的网页。让我们一起用CSS为网络世界增添更多色彩吧！
