CSS：背景样式、盒子模型与文本样式
背景样式
背景样式用于设置网页元素的背景，包括颜色、图片等。
背景颜色
使用 background-color 属性设置背景颜色，支持多种格式（颜色英文、十六进制、RGB等）。
div {background-color: lightblue;
}
| 格式 | 示例 |
|---|---|
| 十六进制 | #ff5733 |
| RGB | rgb(255, 87, 51) |
| 颜色英文 | lightblue |
背景图片
通过 background-image 属性为元素添加背景图片。
div {background-image: url('background.jpg');background-repeat: no-repeat;background-size: cover;
}
| 属性 | 描述 |
|---|---|
background-repeat | 控制图片是否重复 |
background-size | 设置图片尺寸（cover, contain, 或具体数值） |
background-position | 设置图片的位置（center, top, 等） |
多重背景
使用逗号分隔多个背景值，为元素添加多层背景。
div {background-image: url('layer1.png'), url('layer2.png');background-size: contain, cover;
}
盒子模型
CSS 的盒子模型是网页布局的核心，它描述了每个元素由哪些部分组成。
盒子模型结构
| 部分 | 描述 |
|---|---|
| 内容（Content） | 元素的实际内容区域 |
| 内边距（Padding） | 内容与边框之间的间距 |
| 边框（Border） | 围绕内边距和内容的边线 |
| 外边距（Margin） | 元素与其他元素之间的距离 |
设置盒子模型属性
div {width: 200px;height: 100px;padding: 10px;border: 2px solid black;margin: 20px;
}
| 属性 | 描述 |
|---|---|
padding | 设置内边距，可以分别指定上下左右的值 |
border | 定义边框的宽度、样式和颜色 |
margin | 设置外边距，可使用 auto 实现居中对齐 |
盒子模型类型
- 标准盒模型：
width和height只包括内容区域。 - 替代盒模型：通过
box-sizing: border-box，width和height包括内容、内边距和边框。
div {box-sizing: border-box;
}
文本样式
文本样式定义了文字的外观和排列方式。
字体样式
| 属性 | 描述 |
|---|---|
font-family | 设置字体族，如 Arial, serif 等 |
font-size | 设置字体大小（单位：px, %, em 等） |
font-style | 设置字体样式（normal, italic, oblique） |
font-weight | 设置字体粗细（normal, bold, 或数值 100-900） |
p {font-family: Arial, sans-serif;font-size: 16px;font-style: italic;font-weight: bold;
}
文本对齐与修饰
| 属性 | 描述 |
|---|---|
text-align | 对齐方式（left, right, center, justify） |
text-decoration | 设置文字装饰（none, underline, line-through） |
line-height | 设置行高，调整行间距 |
letter-spacing | 设置字母间距 |
word-spacing | 设置单词间距 |
p {text-align: justify;text-decoration: underline;line-height: 1.5;letter-spacing: 2px;
}
文本阴影
text-shadow 属性用于为文字添加阴影效果。
h1 {text-shadow: 2px 2px 4px gray;
}
| 属性 | 描述 |
|---|---|
| 偏移值（x, y） | 控制阴影在水平方向和垂直方向的偏移 |
| 模糊半径 | 控制阴影的模糊程度 |
| 阴影颜色 | 设置阴影的颜色 |
凡是过去，皆为序章；凡是未来，皆有可期。