CSS样式表详解：从入门到精通

"这是一份全面的CSS学习资料，涵盖了从基础到高级的各种知识点，适合初学者和有经验的开发者参考。这份笔记详尽地整理了CSS的核心概念，包括属性、选择器、显示模式和定位等，同时也强调了CSS的三大特性——层叠性、继承性和优先级。笔记内容持续更新，确保与时俱进。" 在CSS中，样式表用于控制网页的布局和视觉表现。定义是通过属性来完成的，例如文字属性、背景、边框和位置等。常用的文字属性包括文字样式（如normal或italic）、文字粗细（如bold）和文字大小（通常以像素px为单位）。字体属性允许指定文本的字体家族，当指定的字体在用户系统中不可用时，会按照顺序尝试其他字体。 选择器是CSS中用来指定哪些元素应用样式的关键部分。基础选择器包括标签选择器（如`<p>`）、ID选择器（`#example`）和类选择器（`.class`）。层级选择器如子代选择器（`>`）、交集选择器（`元素.类`）、并集选择器（`,`）和兄弟选择器（`~`、`+`）提供了更精确的选择能力。序列选择器则用于选择同级别的特定元素。 CSS的三大特性包括： 1. **层叠性**：多个样式可以应用于同一元素，CSS会根据层叠规则决定最终应用的样式。 2. **继承性**：某些属性值可以从父元素继承到子元素，如字体大小和颜色。 3. **优先级**：决定哪些样式生效，优先级由选择器的特异性、继承和内联样式共同决定。 优先级判断的三种方式是： 1. **特异性（Specificity）**：计算选择器的ID、类、属性和元素的数量。 2. **继承**：从父元素继承的样式优先级较低。 3. **内联样式**：直接在HTML元素中定义的样式具有最高优先级。 在元素的显示模式方面，CSS提供了块级元素（如`div`，占据整行）、行内元素（如`span`，只占据自身内容宽度）和行内块元素（如`img`，可调整宽度和高度但不换行）等。通过`display`属性可以转换元素的显示模式。 背景属性如`background-color`、`background-image`、`background-repeat`、`background-attachment`和`background-position`，以及简写`background`，用于控制元素的背景效果。边框属性如`border`、`border-width`、`border-style`和`border-color`，可以设定边框的宽度、样式和颜色。`margin`用于设置元素的外边距，而`position`属性则用于定位元素，可以是static、relative、absolute或fixed。 CSS样式表的插入有三种方法： 1. **外部CSS**：将样式放在独立的CSS文件中，通过`<link>`标签引入。 2. **内部CSS**：将样式写在HTML文档的`<style>`标签内。 3. **行内CSS**：直接在HTML元素的`style`属性中定义样式。 这份笔记不仅包含了基本概念，还涉及到如精灵图（用于合并多个小图像以减少HTTP请求）等实践技巧，是学习和查阅CSS的宝贵资料。