CSS（二）：美化网页元素

字体样式

字体相关的 CSS 属性：

可以将多个字体属性写在一行：

css 复制代码

font: <font-size> <font-weight> <font-family>;

例如：

css 复制代码

p {
  font: 16px normal Arial, sans-serif; /* 设置字体大小、粗细和字体类型 */
  color: #333333; /* 字体颜色为深灰色 */
}

常见的文本样式属性：

color：设置文本颜色
text-align ：设置文本对齐方式
- left：左对齐
- center：居中对齐
- right：右对齐
- justify：两端对齐
text-indent：设置段落的首行缩进，常用于段落的美化
line-height：设置行高，可以帮助改善可读性，特别是对于多行文本
text-decoration ：设置文本的装饰效果
- underline：下划线
- overline：上划线
- line-through：中划线
- none：去掉装饰（常用于去除链接下划线）
text-shadow：设置文本的阴影，通常是四个参数：阴影颜色、水平偏移量、垂直偏移量和阴影的模糊半径

例如：

css 复制代码

h1 {
  color: #2c3e50;
  text-align: center;
  text-decoration: underline;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.5;
}

通过 list-style 属性可以自定义列表项的符号

list-style ：控制列表项的样式，可以设置多个属性
- none：去掉默认的项目符号
- circle：空心圆
- decimal：数字（有序列表的默认样式）
- square：实心方块

例如：

css 复制代码

ul {
  list-style: square; /* 使用正方形符号 */
}

ol {
  list-style: decimal; /* 使用数字 */
}

常见的背景属性：

background-image ：设置背景图片。语法：background-image: url("image.jpg");
background-position ：设置背景图片的定位。语法：background-position: x% y%; 或者 background-position: top left;。
background-repeat ：控制背景图片是否重复，常见值：
- repeat：默认，背景图片在水平方向和垂直方向上都重复
- no-repeat：背景图片不重复
- repeat-x：仅水平重复
- repeat-y：仅垂直重复
background-size ：用来控制背景图像的大小，常用的值有：
- cover：保持背景图比例，自动填满背景区域，可能裁剪部分图片
- contain：保持背景图比例，图片完整显示，但可能留白
- 具体的 px 或 % 数值。

合并写法：

css 复制代码

background: <color> <image> <position> <size> <repeat>;

例如：

css 复制代码

div {
  background: #ffcc00 url("image.jpg") no-repeat center center;
  background-size: cover;
}