css层叠样式表

/* 示例代码：简单的 CSS 层叠样式表 */

/* 选择器可以是标签名、类名或 ID */
body {
    font-family: Arial, sans-serif; /* 设置全局字体 */
    background-color: #f0f0f0; /* 设置背景颜色 */
}

h1 {
    color: #333; /* 设置标题文字颜色 */
    text-align: center; /* 居中对齐 */
}

p {
    margin: 10px 0; /* 设置段落的上下外边距 */
    line-height: 1.6; /* 设置行高 */
}

/* 类选择器，可以通过类名应用样式 */
.highlight {
    background-color: yellow; /* 高亮背景色 */
    padding: 5px; /* 内边距 */
}

/* ID 选择器，通常用于唯一的元素 */
#special {
    border: 2px solid red; /* 添加红色边框 */
    font-weight: bold; /* 加粗文本 */
}

/* 层叠示例：更具体的规则会覆盖较不具体的规则 */
.container .highlight {
    background-color: lightgreen; /* 覆盖 .highlight 的背景色 */
}

解释说明：

• 层叠：CSS 中的层叠机制决定了当多个样式规则应用于同一个元素时，哪个规则会生效。优先级从低到高依次为：浏览器默认样式、外部样式表、内部样式表、内联样式。
• 选择器优先级：ID 选择器（#id）比类选择器（.class）优先级高，类选择器又比标签选择器（如 p、h1）优先级高。
• 继承：某些属性（如 font-family 和 color）会自动继承自父元素，而其他属性（如 border 和 margin）则不会。

通过这些规则，CSS 可以灵活地控制网页的样式，并确保样式能够按照预期的方式应用。