CSS 基础样式详解：背景、边框、表格与列表

前言

在 CSS 中，背景、边框、表格和列表是网页布局与美化的重要部分。掌握这些基础属性，可以让你的网页结构更清晰，视觉效果更佳。本文将详细讲解这些 CSS 属性的用法、注意事项，并配合示例代码，让你轻松理解。

一、背景（background）

背景属性用于设置 HTML 元素的背景颜色、背景图片、平铺方式等。

1. 背景颜色 (background-color)

用于设置元素的背景色，可以使用颜色名称、RGB、RGBA、十六进制或 HSL 值。

div {
    background-color: lightblue; /* 颜色名称 */
}

p {
    background-color: #ffcc00; /* 十六进制 */
}

h1 {
    background-color: rgb(255, 0, 0); /* RGB */
}

2. 背景图片 (background-image)

为元素设置背景图片，值为图片的 URL。

body {
    background-image: url('background.jpg'); /* 绝对或相对路径 */
}

3. 背景重复方式 (background-repeat)

控制背景图片的平铺方式。

div {
    background-image: url('pattern.png');
    background-repeat: repeat;     /* 默认，水平和垂直重复 */
    background-repeat: repeat-x;   /* 仅水平方向重复 */
    background-repeat: repeat-y;   /* 仅垂直方向重复 */
    background-repeat: no-repeat;  /* 不重复 */
}

4. 背景位置 (background-position)

控制背景图片在元素中的显示位置。

div {
    background-image: url('banner.jpg');
    background-position: center top;  /* 居中对齐顶部 */
}

5. 背景固定 (background-attachment)

定义背景图片是否随页面滚动。

div {
    background-attachment: fixed;  /* 背景固定，不随滚动条移动 */
}

6. 背景综合属性 (background)

可以用一条 background 语句同时设置多个属性：

div {
    background: url('bg.jpg') no-repeat center center / cover;
}

注意事项

• 背景颜色优先级：如果 background-color 和 background-image 同时存在，背景图片会覆盖背景颜色。
• 默认 background-repeat: repeat，使用大尺寸图片时可设置 no-repeat 避免重复。
• 背景路径问题：使用相对路径时，确保 CSS 文件路径与图片路径匹配。

二、边框（border）

边框用于定义 HTML 元素的外框，支持颜色、宽度和样式设置。

1. 边框基本属性

div {
    border-width: 2px;  /* 设定边框宽度 */
    border-style: solid; /* 设定边框样式 */
    border-color: red;   /* 设定边框颜色 */
}

2. 复合属性 border

可以用 border 直接设置宽度、样式和颜色：

div {
    border: 2px solid blue;
}

3. 不同方向的边框

可以单独设置四个方向的边框。

div {
    border-top: 2px solid black;
    border-right: 3px dashed red;
    border-bottom: 4px double green;
    border-left: 5px dotted blue;
}

4. 圆角边框 (border-radius)

注意：border-radius 是 CSS3 属性，这里不涉及。

注意事项

• 边框宽度单位：推荐使用 px，但也可以使用 em、rem。
• 边框颜色：可以使用 transparent 设置透明边框。
• 边框样式：如 dashed（虚线）、dotted（点线）等。

三、表格（table）

CSS 允许对 HTML 表格进行样式化，提升可读性和美观度。

1. 基础表格样式

table {
    width: 100%;
    border-collapse: collapse; /* 合并单元格边框 */
}

th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

2. border-collapse 与 border-spacing

• border-collapse: collapse;（合并单元格边框）
• border-collapse: separate;（默认值，边框独立）
• border-spacing: 10px;（设置单元格间距，适用于 border-collapse: separate;）

3. 表头样式

th {
    background-color: lightgray;
    font-weight: bold;
}

4. 隔行变色

tr:nth-child(even) {
    background-color: #f2f2f2;
}

注意事项

• border-collapse: collapse 让表格更整齐，避免双边框。
• text-align: center 让表格数据居中，更易阅读。
• 适当使用 nth-child 来优化表格的可读性。

四、列表（list）

列表分为 无序列表（<ul>） 和 有序列表（<ol>），CSS 允许自定义样式。

1. 去除默认样式

ul {
    list-style: none; /* 去掉默认的圆点 */
}

2. 自定义 list-style

ul {
    list-style-type: square; /* 方块符号 */
}

ol {
    list-style-type: upper-roman; /* 使用大写罗马数字 */
}

3. 自定义列表前缀

ul {
    list-style-image: url('icon.png'); /* 使用图片作为列表符号 */
}

4. 控制 list-style-position

ul {
    list-style-position: inside; /* 符号在文本内部 */
}

注意事项

• list-style: none; 适用于去除默认样式。
• list-style-image 允许使用自定义图片作为列表符号。
• 配合 margin 和 padding 控制列表对齐效果。

总结

小贴士

1. 优先使用 background 复合属性，减少代码量。
2. 表格 border-collapse: collapse; 让边框更整洁。
3. list-style: none; 去除列表默认样式，适配自定义设计。
4. 避免 border: 0;，可以使用 border: none;。