CSS属性全解析：从字体到布局

本文档深入探讨了CSS（层叠样式表）属性大全的第1部分，这是前端开发中不可或缺的基础知识。CSS属性是用于控制网页元素外观和布局的关键元素，它们在网页设计中起着至关重要的作用。 1. **字体样式**: 通过`font`属性，开发者可以控制元素的字体风格（`font-style`）、变体（`font-variant`）、粗细（`font-weight`）、大小（`font-size`），以及字体系列（`font-family`）。这个属性允许对文本的呈现进行精细调整，比如设置斜体、粗体、常规等样式。 2. **字体类型**: `font-family`属性支持多字体选择，通过一系列备选字体名，确保在用户设备上可用的字体中选择最合适的。例如，`font-family:"宋体", "黑体", sans-serif`，优先使用宋体和黑体，如果没有则使用系统默认的无衬线字体。 3. **字体大小**: `font-size`属性提供了一系列预设值，如`medium`、`large`等，以及数值单位（像素、em、rem等），还支持`inherit`让子元素继承父元素的字体大小，以及自定义精确数值或百分比。 4. **字体风格**: `font-style`属性用于设定字体的倾斜效果，`normal`为常规，`italic`为斜体，`oblique`为任意角度的倾斜。 5. **字体粗细**: `font-weight`用于设置字体的粗细程度，包括预设的100到900级（轻到重），`bold`和`bolder`等增强值，以及`normal`。 6. **字体颜色**: `color`属性控制文本的颜色，接受十六进制颜色值、RGB、RGBA等格式，也可使用预设的颜色名称。 7. **文本阴影**: `text-shadow`属性用于添加阴影效果，通过指定偏移量、模糊半径和颜色来增强文本的立体感。 8. **行高`: `line-height`控制文本行与行之间的间距，可以是数值（如1.5）、`normal`（基于字体大小）、`inherit`或百分比。 9. **字间距**: `letter-spacing`调整字符之间的空间，`normal`表示默认间距，`inherit`表示继承父元素的设置。 10. **单词间距**: `word-spacing`调整单词之间的距离，与`letter-spacing`类似，也可以继承。 11. **字体变形**: `font-variant`用于控制字符的显示形式，如小型大写字母（`small-caps`）。 12. **英文转换**: `text-transform`用于文本的大小写转换，`capitalize`首字母大写，`uppercase`全大写，`lowercase`全小写，`none`保持原样。 13. **字体缩放**: `font-size-adjust`允许根据字体的宽度自动调整字体大小，以保持字符比例。 14. **字体伸缩**: `font-stretch`用于控制字体的宽度，如`condensed`（紧凑）、`expanded`（宽松）、`ultra-condensed`等。 15. **行间距与文字修饰**: `line-height`继续关注行距，而`text-decoration`则处理文本的装饰，如下划线、删除线和闪烁效果。 16. **文本对齐**: `text-align`决定文本在容器内的水平对齐方式，如左对齐、右对齐、居中或两端对齐。 17. **垂直对齐**: `vertical-align`用于控制行内元素的垂直对齐，如顶部对齐、底部对齐等。 这些CSS属性覆盖了文本渲染的各个方面，熟练掌握它们能够帮助设计师实现丰富的视觉效果和良好的可读性。理解并灵活运用这些属性，是创建响应式、美观且易于阅读的网页设计的重要基础。