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）	控制阴影在水平方向和垂直方向的偏移
模糊半径	控制阴影的模糊程度
阴影颜色	设置阴影的颜色

---

凡是过去，皆为序章；凡是未来，皆有可期。