层叠样式表（CSS）入门
在上一篇笔记文章中，我们反复提及到了一个关键内容，即：HTML、CSS、Js等内容分别在各自的文件中进行实现，这的确有利于我们日常项目中的代码维护。同时HTML在有了点了解了后，我们就可以开始来研究一下 层叠样式表（CSS） 的相关内容了~
1、CSS使用的三种样式
在完成HTML基础框架的编写之后，就要开始对各类层级中的元素分别给予相应的样式了，而这里就出现了三种编写CSS的方式，三者分别是：内联式、嵌入式、外部式 。
- 内联式 的方法就是将少量的关键词写入到HTML标签中，例如：
<p style="color:black";font-weight:4px>这是一段示例文字</p> - 嵌入式的方法就是将样式表放入
<head>范围当中，例如：<head> <style type="text/css"> <!--填写样式表内容--> </style> </head> - 外部式的方法就是我们目前最常用的将CSS样式表写在单独的文件里面，而要应用则需要链接连接到HTML中，连接的格式如下：
<head> <link href="/main.css" rel="stylesheet" type="text/css" /> </head>需要注意&建议：
!!!关于三者的优先级：内联式 > 嵌入式 > 外部式 ，但嵌入式和外部式有特殊点就是看标签位置的前后（外部式标签靠前则以外部式优先）- 关于关键词
rel="stylesheet"、type="text/css"为固定写法，无法修改，记就完事了👌 - 由于语义化的重要性，所以为了维护性高和规范化，一般情况下并不建议使用前两种CSS样式写法
- css文件名同样具有重要含义，请注意语义化！
2、CSS常用的几种标签选择器
h1{
font-size: 20px;
font-height: 3px;
font-family:"Times New Roman";
}
#idname{
color: black;
}
.background{
background-color: rgb(46,88,67);
}
*{
font-color: black;
}
…………
首先是
第一种，又称为类型选择器（一般为<h><li>等），应用于全局中相应的标签；
第二种叫做ID选择器（以‘#’为开头），可用于局部或是整体；
第三种称为类选择器（以‘.’为开头），同样适用于局部或整体；
CSS的深入学习
1、标签选择器与渲染
既然涉及到这么多的标签选择器，那么在使用的时候免不了会出现重叠冲突的情况，所以每个标签选择器是如何排列优先级的呢？ 这里就要涉及到权重 和继承 了。
权重
首先我们在知道选择器含有：类选择器、ID选择器、类型选择器（注意这里的类/类型选择器）。在当页面的DOM树渲染完成后开始渲染样式树的时候，浏览器的就开始计算每一个选择器的权重 了，这可以告诉网页那部分标签的优先级与渲染形式是怎样的。但是请注意：这里的HTML结构完全对权重计算值无影响！
那权重又是如何去定义每个选择器的呢？从目前大多数资料来看，可以列出下面这张表了：
| 类型 | 权重 | 类型 | 权重 |
|---|---|---|---|
!important | 最高（高于一切） | 类选择器 | 10 |
| 内联(样)式 | 1000 | 类型选择器 | 1 |
| ID选择器 | 100 | 通用选择器 | 0 |
计算公式为：总权重 = 标签选择器类型数量 * 目标标签权重 （可以累加）
例如： Li #id .name = 1 * 1 + 100 * 1 + 10 * 1 = 111
关于渲染流程的话，通过先将DOM树（HTML结构）+样式规则（CSS表） 输入==>Filtering（过滤器，保证规则有效）==>Cascading（对元素进行重叠计算、计算权重进行考量比较）==>Defailting（对空值样式进行继承）==>后续细节处理，并输出到浏览器显示。
继承
当我们写的某个连接<a>位于某个或是某些<div>之中时，容易出现a继承了div的元素形式，这里就是涉及到前面所讲的权重。在讲解完权重后，我们基本上知道了关于为什么在写某些元素样式的时候无法正常显示，无非就是这些原因：
- 层叠样式的权重级别不够HTML父级的权重高，被覆盖继承过来了；
- 层叠样式的内容出现实际计算错误或是当前浏览器不支持；
- 等等…………
不过继承还是可以给我们带来好处的，有时候对于某些相同的样式，我们不必再写一遍，只需要继承过来后对原有的进行覆盖即可。极大的便利了数据空间与储存。
在学习中使用豆包MarsCode AI有效的帮助我梳理理解一些难点，同时还能帮我进行扩展知识，突破了线下学习的界线。顺便分享我觉得有用的问题吧~(已删除部分废话了)
Me：“……也就是说层叠值会考虑到权重是吧”
AI：“是的，层叠值在CSS中确实会考虑到权重。当多个样式规则应用于同一个元素时，浏览器会根据样式规则的权重来决定哪个规则将被应用。权重是通过计算选择器的特殊性来确定的，特殊性越高的选择器，其权重值越大，对应的样式规则就越优先。
除了权重之外，层叠值还考虑了样式规则的来源（如内联样式、内部样式表、外部样式表）和声明的顺序（后声明的样式会覆盖先声明的样式）。这意味着即使两个样式规则具有相同的权重，如果其中一个规则是后声明的，它也将覆盖另一个规则。
在CSS中，层叠值的计算是一个复杂的过程，但它确保了样式的一致性和可预测性。”
2、行级与块级
讲完了关于渲染的内容，那么就得到渲染后的显示效果上的讲解了。这里我们会提到两个关键的显示内容，他们分别是：“行级” 与 “块级”。
在我们浏览一个网页的时候，大部分我们所看到的图像、链接内容信息大多都是以行级进行显示的。它的特点就是以行进行渲染，将标签内的内容从左往右渲染，且不进行换行，直到该行排满后再继续向下一行排列，大多为<a> <span> <img>。
而块级就有所不同了，大多文字信息展示都是用块级进行显示，默认情况下宽度也会填充满所在容器的宽度，而且他会单独占据一个空间进行显示，这类标签以<p> <div> <h1>~<h6>为主。
注意：HTML内元素历来被归类为“块级”与“行级”两者，不过现在引入到css作为一种表现特性。
自己作为新手的思考：
在块<p>中使用<br>，那么这个整体还算是块吗？ —— 答案是：还算是一个块，因为本身它<p>的块结构并未被破坏，虽然<br>是行级元素，只不过它影响的是文字显示，并未影响破坏到文本流结构。
| 结论 | |
|---|---|
| 从差异上看 | 1. 块级元素和行级元素在文档中的布局角色上有差异，同时导致了元素的交互功能出现了差异性； 2. 不同浏览器的渲染结果与影响又有所不同，会产生差异性； 3. 从语义性上也会产生理解的不同，影响维护人员的核查。 |
| 从相同处上看 | 1.都可以设置样式，不影响相应的个性化显示； 2.都属于网页结构组成的重要部分，用于展示传达内容。 |
结尾
第一次具体学习并深入CSS对于我来说确实存在难处，毕竟CSS中的不同关系与组合都可能使网页产生不同的渲染效果。所以要想更好的深入整体化学习，还得啃标准指导文档，像MDN、前端面试档案馆这类指导手册才更有效。
本笔记可能会出现部分解释上的缺陷漏洞，还望各位大佬多多指教~
