CSS属性全览：选择器、字体、颜色与背景、文本样式

本文将对CSS中的主要属性进行详尽的总结，涵盖字体属性、颜色和背景属性以及文本属性等多个方面，旨在帮助读者理解和掌握CSS的常用设置。 ### 字体属性（Font） 字体属性用于控制元素的字体样式，包括字体家族、斜体、小体大写和粗细。例如： - `font-family`：定义元素的字体家族，可以指定多个字体以备浏览器选择，如`font-family: "Arial", sans-serif;` - `font-style`：设定字体的倾斜，`normal`为正常，`italic`为斜体，`oblique`则为倾斜但非斜体 - `font-variant`：控制字体是否使用小体大写，`small-caps`用于将小写字母转换为小体大写 - `font-weight`：设置字体的粗细，`normal`为常规，`bold`为加粗，`bolder`和`lighter`分别表示更粗和更细，还可以使用100-900的数值来精确控制 - `font-size`：定义字体大小，可使用绝对大小（如`px`）、相对大小（如`em`、`rem`）、长度单位或百分比 ### 颜色和背景属性 颜色和背景属性用于设置元素的前景色和背景效果： - `color`：设定元素的文本颜色，可以使用颜色名称、十六进制代码、RGB、RGBA等方式 - `background-color`：定义元素的背景颜色 - `background-image`：设置背景图片，可以是URL路径或渐变 - `background-repeat`：控制背景图像的重复方式，如`repeat-x`（水平重复）、`repeat-y`（垂直重复）或`no-repeat`（不重复） - `background-attachment`：定义背景图片是否随滚动条滚动，`scroll`为默认跟随滚动，`fixed`则固定在视口 - `background-position`：设置背景图片的初始位置，可以使用百分比、长度单位或关键词（如`top`、`left`） ### 文本属性 文本属性用来调整文本的间距、装饰、对齐和缩进： - `word-spacing`：调整单词之间的间距 - `letter-spacing`：设置字母之间的间距，可以是`normal`或指定长度单位 - `text-decoration`：控制文本装饰，如`underline`下划线、`overline`上划线、`line-through`删除线 - `text-decoration-line`：单独设置装饰线类型，如`underline`、`overline`、`line-through` - `text-decoration-color`：设定装饰线的颜色 - `text-decoration-style`：定义装饰线的样式，如`solid`实线、`double`双线、`dotted`点线、`dashed`虚线、`wavy`波浪线 - `vertical-align`：设置文本垂直对齐方式，如`baseline`、`sub`下标、`super`上标、`top`、`middle`、`bottom` - `text-align`：控制文本的水平对齐，有`left`、`center`、`right`等选项 - `text-indent`：设置首行缩进，可以是长度单位或百分比 - `line-height`：设定行高，可以是数字、长度单位或百分比，影响文本的垂直间距 以上是对CSS主要属性的概览，掌握这些知识有助于创建美观且易读的网页布局。在实际应用中，还需要考虑浏览器兼容性、响应式设计等因素，以确保在不同设备上都能呈现出良好的视觉效果。