CSS基本概念
CSS，全称 Cascading Style Sheets（层叠样式表），是一种用来描述HTML或XML（包括如SVG、XHTML等衍生语言）文档样式的样式表语言。它主要用于控制网页的布局和外观，使得内容的呈现更加美观且易于管理。之所以叫作“层叠样式表”是因为通过来源顺序、继承和优先级等机制，不同来源（如作者、读者、浏览器默认值）的样式能够相互作用，形成最终显示效果。
/* css rules */
h1{ /*选择器*/
color: red; /* 声明 */
text-align: center; /* 声明 */
}
最基本的css由选择器和样式声明组成，CSS通过不同的选择器定位到特定的HTML元素，并将样式规则应用于这些元素上。HTML结构本身并不包含任何外观信息，此时网页就只有难看难懂且排列死板的框框和文字，也就是说html没有css相当于裸奔。
在网页中引入CSS主要有三种方式：内联样式、内部样式表和外部样式表。每种方法都有其适用场景，下面分别介绍这三种方式：
1. 行内样式
这是直接将CSS代码应用到HTML元素上的方法。这种方式适用于单个元素的快速样式设置，但不推荐大规模使用，因为它会使得HTML文档变得难以维护。
示例：
<p style="color: blue; font-size: 20px;">这是一个段落。</p>
2. 内联样式
通过在HTML文档的<head>部分添加<style>标签来定义整个页面使用的CSS规则。这种方法适合于只针对单一页面进行样式定制的情况。（其实和行内样式本质是一样的）
示例：
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
<style>
body {
background-color: lightblue;
}
p {
color: darkblue;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
3. 外部样式表
创建一个独立的.css文件存放所有CSS规则，并通过HTML中的<link>标签链接到该文件。这种方式非常适合网站级别的样式管理，因为可以实现多页面共享相同的样式表，易于维护和更新。
-
创建CSS文件（例如 styles.css）：
body { background-color: lightblue; } p { color: darkblue; font-size: 20px; } -
在HTML中引用CSS文件：
<!DOCTYPE html> <html> <head> <title>示例页面</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>这是一个段落。</p> </body> </html>
其中，href属性指定了CSS文件的位置，可以是相对路径也可以是绝对路径。
优先级
CSS优先级是指当多个CSS规则应用于同一个HTML元素时，浏览器如何决定哪个规则应该被采用。 优先级从低到高如下：
- 标签选择器：1
- 类选择器：10
- ID选择器：100
- 行内样式：1000
!important标志：具有最高优先级
对于复合选择器，优先级计算遵循加法规则。例如，.container ul li:nth-child(odd)的选择器优先级为22（类选择器10 + 元素选择器1 * 2 + 伪类选择器10）。无论选择器多么复杂，它总是针对最后指定的那个元素起作用。值得注意的是，ID查询速度最快，因为这相当于给元素添加了一个索引。
<!DOCTYPE html>
<head>
<title>css</title>
<style>
p{
color: blue!important;
}
/* 1 */
#main p{
color: green;
}
/* 100+1 */
.container p{
color: red;
}
/* 10+1 */
</style>
</head>
<body>
<!-- attribute 属性-->
<div id="main" class="container">
<p style="color: pink;">这是一段爱情故事</p>
<!-- 1000 -->
</div>
</body>
</html>
运行后你会在浏览器看到：
我们可以看到一共有蓝、绿、红、粉四种颜色被作用于“这是一段爱情故事”，但由于 !important优先级最高，这段文本呈现出蓝色。你可以尝试下注释掉一些代码块让文本呈现出其他的颜色。
渲染树
渲染树（Render Tree）是浏览器在渲染网页时生成的一种内部数据结构。采用渲染树的主要原因是为了提高网页的渲染效率和质量。渲染树是浏览器渲染引擎工作流程中的一个关键步骤，它结合了文档对象模型（DOM）和层叠样式表（CSS）的信息，用于确定页面上元素的布局和外观。
可以结合上面那段代码理解：
点个赞再走吧~
