详解CSS的结构与层叠以及格式化
1. CSS的结构
CSS（Cascading Style Sheets，层叠样式表）用来控制HTML文档的样式和布局。CSS的结构由选择器和声明块组成。
选择器用来选择需要添加样式的HTML元素，可以通过元素的标签名、类名、ID等进行选择。声明块由花括号括起来，包含了一系列的CSS属性和对应的值。
在CSS的结构中，可以通过多种方式来设置样式的层级关系，例如通过ID选择器、类选择器、标签选择器、伪类选择器等来选择不同的HTML元素需要设置的样式。
2. CSS的层叠机制
CSS的层叠机制就是当多个样式规则作用于同一个HTML元素时，通过一系列的规则来决定最终应用的样式。
CSS的层叠机制主要包括以下几个关键点：
2.1 选择器的优先级
选择器的优先级决定了样式的权重，优先级高的样式会覆盖优先级低的样式。一般情况下，选择器的优先级由选择器的特殊性（继承权重）、选择器的出现顺序决定。
2.2 样式声明的优先级
如果多个选择器具有相同的优先级，那么样式声明的优先级决定了最终应用的样式。通常情况下，后面的样式声明会覆盖前面的样式声明。
2.3 !important规则
!important规则可以将样式声明的优先级提升到最高，无论其他规则的优先级如何，带有!important规则的样式声明都会被最终应用。
2.4 继承
某些CSS属性是可以被子元素继承的，当父元素设置了样式时，子元素会继承这些样式。但是并非所有CSS属性都可以被继承，需要根据属性的特性进行判断。
3. CSS的格式化
CSS的格式化主要指的是对文档的布局和排版进行控制，包括对元素的位置、大小、边距、间距等进行调整。
CSS的格式化主要通过CSS属性进行控制，例如定位属性（position）、盒模型属性（width、height、padding、margin等）、浮动属性（float）等来实现。
下面是一段使用CSS进行格式化的代码示例，其中使用了一些常见的CSS属性：
.container {
width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 24px;
margin-bottom: 10px;
}
p {
color: #666;
font-size: 16px;
line-height: 1.5;
}
在上述代码中，通过设置容器的宽度和边距，使得容器居中显示。同时，通过设置标题和段落的颜色、字体大小、边距等样式，实现了文本的格式化和布局。
总结来说，CSS的结构与层叠机制决定了样式的定义和优先级，而CSS的格式化则用来对HTML文档进行布局和排版的控制。通过合理的使用CSS，可以实现丰富多样的页面样式和布局效果。