CSS样式详解：全集标注与常用属性

本篇文档详细介绍了CSS样式大全，包括各种文本样式和背景设置的常用属性及它们的定义和使用方法。首先，关于字体样式（font），我们有： 1. `font-size`: 用于设置文本的大小，例如`x-large`表示特大，`xx-small`表示极小，中文通常只用数值表示，单位可以是像素（PX）或点（PD）。在实际项目中，选择适合的字号可以提升可读性。 2. `font-style`: 控制字体的倾斜方式，`oblique`表示偏斜体，`italic`表示斜体，`normal`代表正常字体。 3. `line-height`: 设置行间距，`normal`表示正常行距，单位同样有像素（PX）、点（PD）和相对单位（EM）。 4. `font-weight`: 用于调整文字粗细，`bold`代表粗体，`lighter`表示更细一些，`normal`则为常规字体。 5. `font-variant`: 控制字符变体，如`small-caps`可以让文字变成小写大写字母，`normal`为默认。 6. `text-transform`: 影响字母大小写转换，`capitalize`首字母大写，`uppercase`全大写，`lowercase`全小写，`none`保持原始大小写。 7. `text-decoration`: 针对文本添加装饰效果，如`underline`下划线，`overline`上划线，`line-through`删除线，`blink`闪烁，以及`none`取消装饰。 8. `font-family`: 定义字体系列，可以列出多个备选字体，浏览器会按顺序寻找可用的字体。 接着，涉及背景样式： 1. `background-color`: 设置背景颜色，如`#FFFFFF`代表白色。 2. `background-image`: 用于指定背景图片，使用URL引用图片路径。 3. `background-repeat`: 控制背景图片的重复方式，`no-repeat`不重复，`repeat`重复，`repeat-x`水平重复，`repeat-y`垂直重复。 4. `background-attachment`: 定义背景图片相对于视口的位置，`fixed`固定，`scroll`滚动。 5. `background-position`: 设置背景图片在元素中的起始位置，包括`left`、`top`等。 6. `background-size`: 调整背景图片的尺寸，可以指定宽度和高度，也可以使用百分比或覆盖关键字。 7. `Block`, `Inline`, `List-item`, `Run-in`, `Inline-block`等展示了不同元素的显示模式，影响元素在页面中的布局。 通过理解这些CSS样式及其用法，开发人员能够更精细地控制网页的视觉呈现，提升用户体验。无论是调整文本样式还是背景设计，熟练掌握这些基础样式是构建现代网站和应用的关键要素。