CSS属性总结

### CSS属性总结 #### 字体属性（Font） - **`font-family`**：定义文档或对象内文本的字体系列。可以指定多个字体名作为备选方案。 - 示例：`font-family: Arial, sans-serif;` - **`font-style`**：定义字体样式，如是否为斜体。 - 取值包括： - `normal`：标准字体。 - `italic`：斜体。 - `oblique`：倾斜字体。 - **`font-variant`**：定义是否使用小型大写字母。 - 取值包括： - `normal`：标准字体。 - `small-caps`：小型大写字母。 - **`font-weight`**：定义字体的粗细程度。 - 取值包括： - `normal`：正常粗细。 - `bold`：加粗。 - `bolder`：比父元素更粗。 - `lighter`：比父元素更细。 - **`font-size`**：定义字体大小。 - 取值包括绝对单位（如`px`、`pt`）、相对单位（如`em`、`rem`）、百分比等。 #### 颜色和背景属性 - **`color`**：定义文本的颜色。 - **`background-color`**：定义背景颜色。 - **`background-image`**：定义背景图像。 - 示例：`background-image: url('image.jpg');` - **`background-repeat`**：定义背景图像如何平铺。 - 取值包括： - `repeat`：在水平和垂直方向上重复。 - `repeat-x`：仅沿水平方向重复。 - `repeat-y`：仅沿垂直方向重复。 - `no-repeat`：不重复。 - **`background-attachment`**：定义背景图像是否固定。 - 取值包括： - `scroll`：随元素滚动。 - `fixed`：固定在视口上。 - **`background-position`**：定义背景图像的位置。 - 取值可以是百分比、长度值或预定义的关键字（如`top`、`center`等）。 #### 文本属性 - **`word-spacing`**：定义单词之间的间距。 - **`letter-spacing`**：定义字母之间的间距。 - 示例：`letter-spacing: 2px;` - **`text-decoration`**：定义文本装饰。 - 包括线型、颜色等。 - **`text-decoration-line`**：定义文本装饰线条类型。 - 取值包括： - `none`：无装饰。 - `underline`：下划线。 - `overline`：上划线。 - `line-through`：删除线。 - `blink`：闪烁（已过时）。 - **`text-decoration-color`**：定义文本装饰线条的颜色。 - **`vertical-align`**：定义内联或表格单元格中的垂直对齐方式。 - 取值包括： - `baseline`：基线对齐。 - `sub`：下标对齐。 - `super`：上标对齐。 - `top`：顶部对齐。 - `middle`：居中对齐。 - `bottom`：底部对齐。 - **`text-transform`**：定义文本的大小写转换。 - 取值包括： - `capitalize`：每个单词首字母大写。 - `uppercase`：全部大写。 - `lowercase`：全部小写。 - `none`：保持原样。 - **`text-align`**：定义文本的水平对齐方式。 - 取值包括： - `left`：左对齐。 - `right`：右对齐。 - `center`：居中对齐。 - `justify`：两端对齐。 - **`text-indent`**：定义段落首行的缩进。 - 示例：`text-indent: 2em;` #### 边距属性 - **`margin-top`**、**`margin-right`**、**`margin-bottom`**、**`margin-left`**：分别定义元素四边的外边距。 - 取值可以是长度值、百分比或关键字（如`auto`）。 #### 填充距属性 - **`padding-top`**、**`padding-right`**、**`padding-bottom`**、**`padding-left`**：分别定义元素四边的内边距。 - 取值可以是长度值、百分比或`auto`。 #### 边框属性 - **`border-top-width`**、**`border-right-width`**、**`border-bottom-width`**、**`border-left-width`**：定义四边边框的宽度。 - **`border-color`**：定义边框颜色。 - **`border-style`**：定义边框样式。 - 取值包括： - `none`：无边框。 - `dotted`：点线。 - `dashed`：虚线。 - `solid`：实线。 - `double`：双线。 - `groove`：沟槽。 - `ridge`：隆起。 - `inset`：内嵌。 - `outset`：突出。 #### 宽度和高度属性 - **`width`**、**`height`**：定义元素的宽度和高度。 - 取值可以是长度值、百分比或其他有效值。 #### 浮动和清除属性 - **`float`**：定义元素的浮动行为。 - 取值包括： - `left`：向左浮动。 - `right`：向右浮动。 - `none`：不浮动。 - **`clear`**：定义元素周围其他浮动元素的行为。 - 取值包括： - `left`：不允许左边有浮动元素。 - `right`：不允许右边有浮动元素。 - `both`：不允许两边有浮动元素。 - `none`：允许两边有浮动元素。 #### 表格属性 - **`border-collapse`**：定义表格边框是否合并。 - 取值包括： - `separate`：边框分离。 - `collapse`：边框合并。 这些CSS属性覆盖了网页设计中常见的布局、格式化需求，通过灵活组合可以创建出丰富的视觉效果。掌握这些基本属性能够帮助开发者更好地控制网页元素的表现形式。