CSS(层叠样式表)是用于描述网页外观和格式化的语言。它是一个强大的工具,用于设计网页的布局、颜色、字体和其他视觉效果。以下是一个简化的CSS参考手册,包含了常见的CSS属性和它们的用途。请注意,手册中的内容可能并不全面,但对于入门和日常使用应该足够有帮助。如需更深入的了解和更多属性,请查阅更全面的CSS手册或在线文档。
### 布局和定位
1. **display**: 设置元素的显示类型(如 block, inline, inline-block, none)。
2. **position**: 设置元素的定位类型(static, relative, absolute, fixed)。
3. **top, right, bottom, left**: 用于定位元素的位置(当position属性值为relative, absolute或fixed时)。
4. **z-index**: 用于设置元素的堆叠顺序。
### 尺寸和边框
1. **width**: 设置元素的宽度。
2. **height**: 设置元素的高度。
3. **min-width, max-width**: 设置元素的最小和最大宽度。
4. **min-height, max-height**: 设置元素的最小和最大高度。
5. **padding**: 设置元素的内边距。
6. **margin**: 设置元素的外边距。
7. **border**: 设置元素的边框。可以单独设置宽度、样式和颜色。
### 字体和文本
1. **font-family**: 设置字体。
2. **font-size**: 设置字体大小。
3. **font-weight**: 设置字体的粗细(如 normal, bold)。
4. **font-style**: 设置字体样式(如 normal, italic)。
5. **color**: 设置文本颜色。
6. **text-align**: 设置文本对齐方式(如 left, right, center, justify)。
7. **text-decoration**: 添加下划线、上划线、删除线等文本装饰效果。
8. **line-height**: 设置行高。
9. **letter-spacing**: 设置字符间距。
10. **word-spacing**: 设置单词间距。
### 背景
1. **background-color**: 设置背景颜色。
2. **background-image**: 设置背景图片。
3. **background-repeat**: 设置背景图片是否重复以及如何重复。
4. **background-position**: 设置背景图片的位置。
5. **background-size**: 设置背景图片的大小。
### 列表样式
1. **list-style-type**: 设置列表项标记的类型(如 disc, circle, square 等)。
2. **list-style-position**: 设置列表项标记的位置(inside 或 outside)。
3. **list-style-image**: 使用图像作为列表项标记。
### 响应式设计
1. **media query**: 用于为不同设备和屏幕尺寸应用不同的CSS样式。常用于响应式设计。
例如:`@media (max-width: 600px) {...}` 当屏幕宽度小于或等于600px时应用括号内的样式。
### 其他属性
还有很多其他CSS属性用于控制网页的外观和行为,包括但不限于阴影、动画、渐变、转换等。为了全面了解和掌握这些属性,建议查阅更详细的CSS手册或在线文档资源。此外,随着CSS的发展和更新,新的属性和特性不断涌现,因此保持学习和更新是非常重要的。