一、CSS基础知识回顾
CSS（层叠样式表）是用于设置网页内容样式和布局的语言。CSS 把内容和样式分离开来，从而提高了文档的可读性和结构，使得在设置和修改文档样式时更加灵活方便。CSS 样式规则由选择器和声明块组成，其中选择器用于定位想要调整的 HTML 元素，而声明块则定义了想要改变的元素的样式。一条完整的 CSS 规则包括：样式选择器（要修改哪个元素）和样式声明（要修改元素什么样式属性），这两部分以花括号括起来，同时在它们之间有一个冒号分隔符。
selector {
property: value;
}
为了更好地理解如何使用 CSS 创建层叠效果，以下是一些基础知识：
CSS 属性值继承
当您在父元素上定义一个 CSS 属性，这些属性会继承到其子元素上。例如，如果您对<body>元素设置了一个 color 属性值，那么您在body下定义子元素时，可以省略定义 color 属性，子元素将自动继承父元素的属性。当然，这种行为并不是适用于所有 CSS 属性。
body {
color: green;
}
h1 {
/* 元素将继承body的颜色属性 */
}
CSS 选择器优先级
选择器的优先级主要是用来确定哪一个规则会应用到相同元素上，如果一个元素匹配多个选择器，那么就会按照样式表中的优先级设置进行应用。在 CSS 样式表中，优先级是根据选择器的特定性、ID、类、伪类和标签等因素进行计算的。
层叠顺序
层叠顺序指定了不同元素的重叠顺序，这个顺序也会影响元素的表现效果。在页面排版时，元素的层叠顺序和选择器的优先级一样重要。
二、 层叠样式的应用
1. 布局层叠
层叠布局是一种通用的布局技术，它用于定位、重叠和堆叠不同的元素。CSS 中的绝对定位、相对定位和固定定位以及 z-index 属性，是实现层叠布局的基础技术。
.container {
position: relative;
}
.box {
position: absolute;
top: 50px;
left: 50px;
z-index: 10;
}
在这个例子中，.container 元素是相对定位的，.box 元素通过使用绝对定位和 z-index 属性包含在.container 中，可以控制元素的位置和层叠顺序。
2. 文本层叠
层叠样式表的另一个常见应用是在文本效果方面。通过使用 text-shadow 属性，您可以添加文本阴影效果、通过使用 text-stroke 属性，您可以添加文本描边等效果；text-wrap 属性可让文本在元素边界内或之外进行折行；使用 line-height 属性，您可以调整文本行间距。
h1 {
text-shadow: 1px 1px 2px grey;
text-stroke: 1px black;
line-height: 1.5;
text-wrap: no-wrap;
}
3. 点击交互层叠
在互动元素、按钮和表单元素等方面也有很大的运用。当用户与页面上的元素交互时，可以通过:hover 和:active 伪类等选择器来控制元素的样式改变。:hover 和active 声明允许您将效果应用到页面元素的不同状态，这样交互元素将获得更好的响应。
button {
background: #4CAF50;
color: white;
font-size: 16px;
padding: 10px;
border: none;
cursor: pointer;
}
button:hover {
background: #3e8e41;
}
button:active {
background: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
三、CSS属性层叠
1. 默认样式覆盖
当不同的 CSS 属性同时影响到单个元素时，会发生属性层叠。通过优先级和层叠顺序等规则来决定属性的最终值。有许多 CSS 属性都具有默认值，如颜色、字体等。如果您没有指定属性值，那么浏览器会使用默认值。
例如，对于链接的颜色和样式，HTML 页面的默认值通常为蓝色、带有下划线和默认链接样式。为了覆盖这些默认值，CSS 可以通过使用选择器优先级来覆盖这些默认样式。
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
2. 多重样式层叠
当在CSS规则中重复使用同一个属性时，后面的声明会覆盖前面的声明。CSS 样式表中的顺序非常重要，因为后来的样式声明将覆盖前面的样式声明。
h1 {
color: blue;
font-size: 30px;
}
h1 {
color: red;
font-size: 20px;
}
在这个例子中，"h1" 元素将以红色字体和 20像素大小呈现，因为它位于 CSS 样式表中的后面。
3. 继承样式层叠
某些默认样式可以通过 CSS 属性值的继承来应用。font-family 属性就是一个这样的例子。如果您没有为子元素设置 font-family，那么子元素会继承父元素的 font-family 值。
body {
font-family: Arial, sans-serif;
}
h1 {
/* 继承body的字体属性 */
}
四、总结
CSS 层叠样式表是网页设计中的一个重要方面，掌握层叠样式表的技术可以帮助您更好地掌控页面样式和布局。在层叠的应用方面，布局层叠、文本层叠和点击交互层叠是最常见的用途，同时，属性层叠也是在设计网页时需要注意的一个方面。
五、参考文献
CSS 层叠样式表基础知识 [J]. 中国优秀服务器资源收集. CSS3层叠技术的最佳实践 [J], 南京大学学报 （信息科学版）. 2012, 29 (1): 29-34. CSS层叠样式表原理浅析 [J], 北京大学学报. 2014, 51(4): 77-83.