### CSS样式大全详解
#### 一、CSS文字属性
CSS中的文字属性用于控制文本的外观，包括颜色、字体、大小等。以下是一些常见的CSS文字属性及其用途：
- **color:** 设置文字的颜色。
- 示例：`color:#999999;` // 设置文字颜色为灰色。
- **font-family:** 指定文字使用的字体系列。
- 示例：`font-family:宋体,sans-serif;` // 使用“宋体”字体，如果不可用则使用默认的无衬线字体。
- **font-size:** 控制文字大小。
- 示例：`font-size:9pt;` // 将文字大小设置为9磅。
- **font-style:** 设置文字样式（如斜体）。
- 示例：`font-style:italic;` // 文字呈现斜体效果。
- **font-variant:** 可以使小写字母显示为小大写字母。
- 示例：`font-variant:small-caps;` // 文字变为小大写字母形式。
- **letter-spacing:** 调整字符之间的间距。
- 示例：`letter-spacing:1pt;` // 字符间增加1磅的距离。
- **line-height:** 设置行间距。
- 示例：`line-height:200%;` // 行间距设置为200%。
- **font-weight:** 控制文字粗细。
- 示例：`font-weight:bold;` // 文字变为粗体。
- **vertical-align:** 设置行内元素的垂直对齐方式。
- 示例：
- `vertical-align:sub;` // 下标。
- `vertical-align:super;` // 上标。
- **text-decoration:** 添加或删除文字装饰。
- 示例：
- `text-decoration:line-through;` // 删除线。
- `text-decoration:overline;` // 顶线。
- `text-decoration:underline;` // 下划线。
- `text-decoration:none;` // 移除链接下划线。
- **text-transform:** 改变英文文本大小写。
- 示例：
- `text-transform:capitalize;` // 首字母大写。
- `text-transform:uppercase;` // 全部大写。
- `text-transform:lowercase;` // 全部小写。
- **text-align:** 设定文本的水平对齐方式。
- 示例：
- `text-align:right;` // 右对齐。
- `text-align:left;` // 左对齐。
- `text-align:center;` // 居中对齐。
- `text-align:justify;` // 分散对齐。
#### 二、CSS边框空白
边框和空白是控制元素边界的重要属性，能够影响页面布局和视觉效果。
- **padding:** 内边距，用于在元素内容和边框之间创建空白区域。
- 示例：
- `padding-top:10px;` // 上边框留有10像素空白。
- `padding-right:10px;` // 右边框留有10像素空白。
- `padding-bottom:10px;` // 下边框留有10像素空白。
- `padding-left:10px;` // 左边框留有10像素空白。
#### 三、CSS符号属性
列表样式属性允许你自定义列表项的外观，包括列表符号的类型和位置。
- **list-style-type:** 定义列表项标记的类型。
- 示例：
- `list-style-type:none;` // 不使用标记。
- `list-style-type:decimal;` // 使用阿拉伯数字作为标记。
- `list-style-type:lower-roman;` // 使用小写罗马数字作为标记。
- `list-style-type:upper-roman;` // 使用大写罗马数字作为标记。
- `list-style-type:lower-alpha;` // 使用小写英文字母作为标记。
- `list-style-type:upper-alpha;` // 使用大写英文字母作为标记。
- `list-style-type:disc;` // 使用实心圆形符号作为标记。
- `list-style-type:circle;` // 使用空心圆形符号作为标记。
- `list-style-type:square;` // 使用实心方形符号作为标记。
- **list-style-image:** 使用图像作为列表项标记。
- 示例：`list-style-image:url(/https/download.csdn.net/dot.gif);`
- **list-style-position:** 设置列表项标记相对于列表项内容的位置。
- 示例：
- `list-style-position:outside;` // 标记在内容之外。
- `list-style-position:inside;` // 标记在内容之内。
#### 四、CSS背景样式
背景样式用于控制元素的背景外观。
- **background-color:** 设置背景颜色。
- 示例：`background-color:#F5E2EC;` // 设置背景色为浅紫色。
- **background:** 设置透明背景。
- 示例：`background:transparent;` // 设置背景透明。
- **background-image:** 在元素背后显示一幅图像。
- 示例：`background-image:url(/https/download.csdn.net/image/bg.gif);`
- **background-attachment:** 设置背景图像是否随页面滚动。
- 示例：`background-attachment:fixed;` // 背景图像固定不动。
- **background-repeat:** 设置背景图像的重复方式。
- 示例：
- `background-repeat:repeat;` // 图像在水平和垂直方向重复。
- `background-repeat:no-repeat;` // 图像不重复。
- `background-repeat:repeat-x;` // 图像仅在水平方向重复。
- `background-repeat:repeat-y;` // 图像仅在垂直方向重复。
- **background-position:** 设置背景图像的位置。
- 示例：
- `background-position:90% 90%;` // 图像位置为相对元素的90% x轴和90% y轴。
- `background-position:top;` // 图像顶部对齐。
- `background-position:bottom;` // 图像底部对齐。
- `background-position:left;` // 图像左侧对齐。
- `background-position:right;` // 图像右侧对齐。
- `background-position:center;` // 图像居中对齐。
#### 五、CSS链接属性
链接属性用于控制超链接的状态和外观。
- **a:** 所有超链接的基本样式。
- 示例：`a { color: blue; }`
- **a:link:** 未访问过的链接。
- 示例：`a:link { color: red; }`
- **a:visited:** 已访问过的链接。
- 示例：`a:visited { color: purple; }`
- **a:hover:** 鼠标悬停在链接上时的样式。
- 示例：`a:hover { color: green; }`
- **a:active:** 当前激活的链接（即鼠标点击时）。
- 示例：`a:active { color: yellow; }`
以上就是关于CSS样式的一些基础且常用的知识点介绍，通过这些属性可以有效地控制页面上的文本、边框、列表、背景以及链接等元素的外观和布局。熟练掌握这些基本的CSS属性对于前端开发者来说是非常重要的。
