本文档是对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的基础知识,便于在实际项目中灵活运用和优化网页设计。