全面掌握CSS基础与进阶知识点总结

本文档是对CSS（层叠样式表）知识点的详细归纳和总结，旨在帮助学习者系统地理解和记忆CSS基础知识。CSS是用于网页设计和开发中的关键语言，它控制网页元素的外观和布局。 1. **基本格式**： CSS采用三种基本格式进行定义：选择器、属性和值。例如，`body{color:blue}` 这一行中，`body` 是选择器，`color` 是属性，`blue` 是值。选择器用于指定要应用样式的HTML元素。 2. **派生选择器**： 派生选择器允许组合多个选择器来同时作用于元素。如`strong{color:red;}` 和 `h2{color:red;}` 说明`strong` 和 `h2` 元素的文本颜色均为红色。而 `h2strong{color:blue;}` 则表示在二级标题（`h2`）中，`strong` 标签内的文本将显示蓝色。 3. **CSS样式表类型**： - **外部样式表**：通过`<link>`标签将CSS文件与HTML文件分离，提供更好的组织和维护。 - **内部样式表**：将CSS代码直接嵌入到HTML文档 `<style>` 标签内。 - **内联样式**：直接在HTML元素上使用`style`属性定义样式。 - **多重样式**：元素可能同时接受多种样式定义，遵循特定的优先级规则。 4. **背景**： - **背景色**：用`background-color`属性设置。 - **背景图像**：`background-image`属性用于添加图片。 - **背景重复**：`background-repeat`控制图像是否平铺或重复。 - **背景定位**：`background-position`确定图像在背景上的位置。 - **背景关联**：`background-attachment`决定背景是否随页面滚动。 5. **文本样式**： - **文本颜色**：`text-indent`属性设置首行缩进。 - **水平对齐**：`text-align`调整文本对齐方式。 - **字间隔**：`word-spacing`控制字符间的间距。 - **字符转换**：`text-transform`改变字母大小写或全角半角。 - **文本方向**：`direction`属性设定文本从左到右或从右到左的书写方向。 6. **CSS字体**： - `font` 属性可以设置一系列字体属性。 - `font-family` 控制字体系列。 - `font-style` 改变字体风格（正常、斜体、粗体等）。 - `font-variant` 提供文本变体（如粗体大写字母）。 - `font-weight` 设置字体粗细。 - `font-size` 和 `line-height` 分别控制字体大小和行高。 7. **列表样式**： - `list-style-type` 用于定义项目符号或编号样式。 - `list-style-position` 设置列表标记的位置。 - `list-style-image` 添加自定义列表标记图像。 8. **CSS表格样式**： - `border-collapse` 合并或分开边框。 - `border-spacing` 调整单元格之间的空白。 - `caption-side` 定义表头的位置。 - `empty-cells` 控制空单元格的显示。 - `table-layout` 规定表格如何处理行高和列宽。 9. **CSS盒模型**：理解元素在页面上的布局涉及内容区域、内边距、边框和外边距。 10. **内边距、边框和外边距**： - 内边距(`padding`)控制元素内容与其边框之间的空间。 - 边框(`border`)定义元素周围可见的线条。 - 外边距(`margin`)设置元素与相邻元素之间的空间。 通过本文档的梳理，学习者可以系统掌握CSS的基础知识，便于在实际项目中灵活运用和优化网页设计。