HTML5&CSS3网页制作：CSS层叠性.pptx

CSS高级特性--CSS层叠性 CSS层叠性 01 CSS层叠性 层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。 比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设置不能并立，所以只为其一，这里没给出确定答案是因为还要考虑“优先级”） 总结 02 通过CSS层叠性介绍了解 CSS层叠性 小任务 总结 小任务 要求： 1、简述CSS层叠性。 感 谢 聆 听 BUSENESS ACTIVITY PLANNING THANKS CSS层叠性和继承性是CSS样式表中的核心概念，它们决定了元素如何呈现样式。层叠性（Cascading）指的是当一个元素有多个样式规则时，浏览器如何决定使用哪个规则来呈现样式。继承性则是指子元素可以从父元素那里继承某些样式属性。 我们来看CSS层叠性。层叠性主要涉及到以下几个方面： 1. **样式来源**：样式可以来自多个地方，包括外部样式表、内部样式表（`<style>`标签）、行内样式（`style`属性）以及浏览器默认样式。 2. **优先级**：在样式冲突时，优先级决定了哪个样式生效。行内样式具有最高优先级，其次为ID选择器，再次为类、属性和伪类选择器，最低的是标签选择器和通用选择器以及继承的样式。 3. **层叠顺序**：如果样式规则的优先级相同，那么按照定义的顺序进行层叠，即后定义的样式覆盖前定义的样式。 4. **`!important`规则**：使用`!important`声明的样式具有最高的优先级，无论其他规则的优先级如何，都会被应用。 接着，我们讨论CSS的继承性。不是所有CSS属性都能被继承。通常，文本相关的属性如字体、颜色和行高可以被继承，而布局相关属性如边距、背景色和宽度则不能。继承的目的是为了保持文档结构的一致性，避免重复设置相似的样式。 **CSS优先级计算**： - ID选择器：100 - 类选择器、属性选择器、伪类：10 - 标签选择器、伪元素：1 - 行内样式（`style`属性）：1000 - 继承样式：0 在计算复合选择器权重时，需要将每个基础选择器的权重相加。例如，`.father .blue`的权重是10（类选择器`.father`）+ 10（类选择器`.blue`）= 20。 了解了这些基本概念后，我们可以更好地管理CSS样式，避免样式冲突，确保网页的样式呈现符合预期。例如，在给同一个元素设置不同背景色时，根据优先级规则，最后定义的背景色将生效，除非有`!important`声明。 在实际开发中，掌握CSS层叠性和优先级至关重要，它可以帮助我们更高效地编写和维护CSS代码，确保样式的准确性和可维护性。通过合理利用层叠性和优先级，可以避免不必要的样式覆盖，提高代码的可读性和可复用性。因此，无论是初学者还是经验丰富的开发者，都需要深入理解这两个概念，并在实践中不断磨练技巧。