css参考手册(完美整理版)

CSS，即层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许我们将样式规则与结构内容分离，使得网页设计更加灵活且易于维护。下面将详细阐述CSS中的一些核心属性。 1. **背景属性（Background）**： - `background-attachment`：设定背景图像是否固定在视口或随内容滚动。 - `background-color`：设定元素的背景颜色。 - `background-image`：设置元素的背景图像。 - `background-position`：控制背景图像的初始定位。 - `background-repeat`：决定背景图像是否及如何重复。 2. **边框属性（Border 和 Outline）**： - `border`：一次性设置所有边框属性。 - `border-bottom`等分属性：分别设定元素的上下左右边框的宽度、样式和颜色。 - `border-style`：设置边框的样式，如solid、dashed、dotted等。 - `border-width`：设定边框的宽度。 - `outline`：定义非填充边框，用于突出显示元素。 3. **文本属性（Text）**： - `color`：设置文本颜色。 - `direction`：规定文本方向，支持从左到右或从右到左。 - `letter-spacing`：调整字符间的间距。 - `line-height`：设置行高，影响文本的垂直排列。 - `text-align`：控制文本的水平对齐方式，如左对齐、居中、右对齐。 - `text-decoration`：添加文本装饰，如下划线、删除线等。 - `text-indent`：首行缩进。 - `text-shadow`：创建文本阴影效果。 - `text-transform`：控制文本转换为大写、小写或首字母大写。 4. **字体属性（Font）**： - `font`：一次性设置所有字体属性，如大小、系列、样式等。 - `font-family`：指定文本的字体系列，例如Arial、Times New Roman等。 - `font-size`：设定字体大小。 - `font-size-adjust`：保持字体的宽度比例。 - `font-stretch`：拉伸或收缩字体系列。 - `font-style`：设置字体样式，如normal、italic等。 - `font-variant`：定义小型大写字体或其它特殊字体变体。 - `font-weight`：设置字体的粗细，如bold、lighter等。 5. **外边距属性（Margin）**： - `margin`：统一设置元素的外边距。 - `margin-top`、`margin-bottom`、`margin-left`、`margin-right`：分别设置各边的外边距。 6. **内边距属性（Padding）**： - `padding`：一次性设置所有内边距。 - `padding-top`、`padding-bottom`、`padding-left`、`padding-right`：设定元素内容区域与边框之间的空间。 7. **列表属性（List）**： - `list-style`：设置列表的样式，包括图像、位置和类型。 - `list-style-image`：使用图像作为列表项标记。 - `list-style-position`：设定列表项标记的位置，如inside或outside。 - `list-style-type`：设置列表项的默认标记类型，如disc、circle、square等。 8. **内容生成（Generated Content）**： - `content`：与`:before`和`:after`伪元素一起使用，插入生成内容。 - `counter-increment`：递增或递减计数器。 - `counter-reset`：创建或重置计数器。 - `quotes`：定义嵌套引用的引号样式。 9. **尺寸属性（Dimension）**： - `height`：设置元素的高度。 - `width`：设定元素的宽度。 这些属性只是CSS众多特性和功能的一部分，CSS还包含布局（如盒模型、流体布局、网格布局）、定位（如static、relative、absolute、fixed）、过渡和动画、响应式设计等多个方面，为开发者提供了丰富的工具来构建美观、功能齐全的网页。理解并熟练掌握这些属性是成为优秀前端开发者的必要条件。