网页 CSS美化（详解）

花菜会噎住2025-05-23 14:53

前言：前篇讲解了简单HTML的创建以及一些基本的用法，本篇开始讲解用css将HTML美化（给HTML的标签设置样式）

CSS的引入方式：

|------|--------------------------|------|------|
| 引入方式 | 书写方式 | 作用范围 | 使用场景 |
| 内嵌式 | css写在style标签中 | 当前页面 | 小案例 |
| 外联式 | css单独写在css文件中，通过link标签引入 | 多个页面 | 项目中 |
| 行内式 | css写在标签的上style属性中 | 当前项目 | 配合使用 |

内嵌式：

内嵌式是将 CSS 样式代码写在 HTML 文件的 <style> 标签内。这种方式的优点是样式代码和 HTML 代码在同一个文件中，对于简单的页面或者小案例很方便。缺点是样式代码无法复用，如果多个页面需要相同的样式，每个页面都要重新写一遍。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        /* 内嵌式 CSS */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        p {
            color: #666;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>这是一个内嵌式样式的示例</h1>
    <p>段落内容，带有内嵌式定义的样式。</p>
</body>
</html>

外联式：

外联式是将 CSS 样式代码单独写在一个 CSS 文件中，然后通过 HTML 文件中的 <link> 标签引入。这种方式的优点是 CSS 代码可以被多个 HTML 页面共享，便于维护和更新。在大型项目中，通常会采用这种方式来组织代码。

HTML：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>这是一个外联式样式的示例</h1>
    <p>段落内容，带有外联式定义的样式。</p>
</body>
</html>

css：

css 复制代码 
/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}
h1 {
    color: #333;
    text-align: center;
}
p {
    color: #666;
    line-height: 1.6;
}

行内式：

行内式是将 CSS 样式代码直接写在 HTML 标签的 style 属性中。这种方式的优点是可以直接为特定元素设置样式，简单直观。缺点是样式代码无法复用，而且会污染 HTML 结构，使 HTML 代码变得冗长。

html 复制代码 
<!DOCTYPE html>
<html>
<body>
    <h1 style="color: #333; text-align: center;">这是一个行内式样式的示例</h1>
    <p style="color: #666; line-height: 1.6;">段落内容，带有行内式定义的样式。</p>
</body>
</html>

基础选择器：

选择器类型 选择器语法 描述 示例代码
标签选择器 element 选择页面中某一类标签的所有元素 p { color: blue; }
类选择器 .class 选择具有特定类属性值的元素 .important { font-weight: bold; color: red; }
ID 选择器 #id 选择具有特定 ID 属性值的唯一元素 #header { background-color: #f0f0f0; padding: 20px; }
通配符选择器 * 选择页面中的所有元素 * { margin: 0; padding: 0; box-sizing: border-box; }
属性选择器 element[attribute="value"] 根据元素的属性及属性值来选择元素 input[type="text"] { border: 1px solid #ddd; padding: 5px; }
伪类选择器 element:pseudo-class 在元素的特定状态或位置时选择该元素 a:hover { color: red; text-decoration: underline; }

标签选择器：

定义：直接使用 HTML 标签名称作为选择器，用于选择页面中某一类标签的所有元素。通过标签名，找到页面中所有这类标签，设置样式

语法：直接使用 HTML 标签名称作为选择器。标签名 { css属性名：属性值； }

匹配方式 ：匹配页面中所有该标签的元素。例如，上面的代码会选中页面中所有的 <p> 标签元素。

适用场景：适用于对某类元素进行统一的样式设置。例如，设置所有段落的字体颜色、行距等。

优先级：标签选择器的优先级较低。如果其他选择器（如类选择器、ID 选择器）也对同一个元素设置了样式，会覆盖标签选择器的样式。

html 复制代码 
p {
    color: blue;
}

这会选中页面中所有的 <p> 标签元素，将它们的文本颜色设置为蓝色。

类选择器：

定义：使用类名作为选择器，用于选择具有特定类属性值的元素。通过类名，找到页面中所有带有这个类名的标签，设置样式

语法 ：以 . 开头，后面跟类名。.类名 { css属性名：属性值； }

匹配方式 ：匹配页面中所有带有对应类属性值的元素。例如，上面的代码会选中页面中带有 class="important" 属性的元素。

适用场景：适用于对一类元素进行样式设置。例如，设置所有重要的文本内容的样式。

优先级：类选择器的优先级高于标签选择器，但低于 ID 选择器。如果类选择器和标签选择器同时对同一个元素设置样式，类选择器的样式会生效。

html 复制代码 
.important {
    font-weight: bold;
    color: red;
}

这会选中页面中所有带有 class="important" 属性的元素，将它们的字体加粗并设置为红色。

id选择器

定义：使用 ID 名称作为选择器，用于选择具有特定 ID 属性值的唯一元素。

语法 ：以 # 开头，后面跟 ID 名称。#id属性值 { css属性名：属性值； }

匹配方式 ：匹配页面中带有对应 ID 属性的唯一元素。例如，上面的代码会选中页面中带有 id="header" 属性的元素。

适用场景：适用于对页面中某个唯一的元素进行样式设置。例如，设置页面头部、底部等唯一区域的样式。

优先级：ID 选择器的优先级较高。如果 ID 选择器和其他选择器（如类选择器、标签选择器）同时对同一个元素设置样式，ID 选择器的样式会生效。

html 复制代码 
#header {
    background-color: #f0f0f0;
    padding: 20px;
}

这会选中页面中带有 id="header" 属性的唯一元素，将它的背景颜色设置为浅灰色并添加内边距。

通用选择器

定义 ：使用 * 符号作为选择器，用于选择页面中的所有元素。

语法 ：使用 * 符号。

匹配方式：匹配页面中的所有元素。例如，上面的代码会选中页面中所有的元素。

适用场景：适用于对页面中所有元素进行统一的样式设置。例如，重置所有元素的外边距和内边距，设置统一的盒子模型。

优先级：通用选择器的优先级最低。如果其他选择器对某个元素设置了样式，会覆盖通用选择器的样式。

html 复制代码 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

这会选中页面中所有的元素，将它们的外边距和内边距都设置为 0 并使用 box-sizing: border-box 这种盒子模型。

CSS样式：

字体样式：

（1）字体大小：font-size
（2）字体粗细：font-weight
（3）字体样式：font-style
（4）字体类型：font-family

属性名称 定义 常见取值及解释 应用场景
font 属性 无 简写属性。把所有针对字体的属性设置在一个声明中
font - size 设置字体大小 px（像素，如 16px）、em（相对父元素字体大小）、rem（相对根元素字体大小） 控制标题、正文、按钮等文本元素大小
font - weight 设置字体粗细 数值（100 - 900）、关键字（normal、bold） 强调文本内容，区分不同重要程度的信息
font - style 设置字体风格 关键字（normal、italic） 引用、强调特殊词汇（如外文词汇、特殊术语）
font - family 指定字体系列 字体系列名称（如 "Microsoft YaHei"）、通用字体家族（如 sans - serif） 根据网页主题和风格选择合适的字体系列，确保文字美观、易读

字体大小**（font - size）**：

  • 定义 ：用于设置文本内容的大小。

  • 常用单位及取值 ：

    • 像素（px）：是最常用的单位。例如，font - size:16px;，这表示字体大小为 16 像素。像素单位可以精确地控制字体大小，在不同的设备和屏幕分辨率下，显示效果相对稳定。

    • 相对长度单位：

      • em：是一个相对单位，它是相对于当前元素的字体大小。例如，如果一个元素本身 font - size 是 16px，那么 1em 就等于 16px。如果它的子元素设置了 font - size:1.5em;，那么子元素的字体大小就是 16 × 1.5 = 24px。这使得字体大小可以相对父元素进行调整，有利于在不同层次的元素中灵活控制字体大小比例。

      • rem：是相对于根元素（html 元素）的字体大小。例如，假设根元素 font - size:16px;，那么 1rem 就是 16px。无论在文档的哪个位置，rem 都是相对于根元素的字体大小来计算的，这有助于在整个文档中保持字体大小的一致性和可维护性。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        .small-text {
            font-size: 12px; /* 使用像素单位 */
        }
        .large-text {
            font-size: 1.5em; /* 相对于父元素字体大小 */
        }
        .global-large-text {
            font-size: 2rem; /* 相对于根元素字体大小 */
        }
    </style>
</head>
<body>
    <p class="small-text">这是小号字体文本。</p>
    <p class="large-text">这是相对于父元素的较大字体文本。</p>
    <p class="global-large-text">这是相对于根元素的较大字体文本。</p>
</body>
</html>

字体粗细（font - weight）

  • 定义 ：用于设置字体的粗细程度。

  • 取值及解释 ：

    • 数值：可以取 100 - 900 之间的整数，数值越大，字体越粗。例如，font - weight:400; 表示正常粗细，font - weight:700; 表示加粗。

    • 关键字：normal 表示正常粗细，等同于 400；bold 表示加粗，等同于 700。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        .light-text {
            font-weight: 300; /* 较细字体 */
        }
        .bold-text {
            font-weight: bold; /* 加粗字体 */
        }
        .extra-bold-text {
            font-weight: 800; /* 特别粗的字体 */
        }
    </style>
</head>
<body>
    <p class="light-text">这是较细的字体文本。</p>
    <p class="bold-text">这是加粗的字体文本。</p>
    <p class="extra-bold-text">这是特别粗的字体文本。</p>
</body>
</html>

字体样式（font - style）

  • 定义 ：用于设置字体的风格，主要是控制字体是正常样式还是斜体。

  • 取值及解释 ：

    • normal：正常字体样式，这是默认值。例如，font - style:normal; 将文本设置为正常样式。

    • italic：表示斜体。例如，font - style:italic; 可以将文本设置为斜体，这在排版中有特殊用途，如表示强调、引用等场景。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        .normal-style {
            font-style: normal; /* 正常字体风格 */
        }
        .italic-style {
            font-style: italic; /* 斜体风格 */
        }
    </style>
</head>
<body>
    <p class="normal-style">这是正常风格的文本。</p>
    <p class="italic-style">这是斜体风格的文本。</p>
</body>
</html>

字体类型（font - family）

  • 定义 ：用于指定文本所使用的字体系列。

  • 取值及解释 ：可以是一个字体系列名称，也可以是多个字体系列名称，以逗号分隔。例如，font - family:"Microsoft YaHei", SimSun, sans - serif; 表示优先使用 "Microsoft YaHei" 字体，如果系统中没有这个字体，则使用 "SimSun" 字体，最后使用无衬线字体（sans - serif 是一种通用字体家族）。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        .yahei-font {
            font-family: "Microsoft YaHei", sans-serif; /* 优先使用微软雅黑，若不存在则使用无衬线字体 */
        }
        .times-font {
            font-family: "Times New Roman", serif; /* 使用 Times New Roman 字体，若不存在则使用衬线字体 */
        }
    </style>
</head>
<body>
    <p class="yahei-font">这是使用微软雅黑字体的文本。</p>
    <p class="times-font">这是使用 Times New Roman 字体的文本。</p>
</body>
</html>

文本样式：

属性名称 定义 常见取值及解释 应用场景
text-indent 设置文本的首行缩进 像素（px）、百分比（%）等 用于段落首行缩进，符合排版习惯
text-align 设置文本内容的水平对齐方式 left、right、center、justify 控制文本水平对齐方式，实现文本居中、左右对齐等效果
text-decoration 设置文本的装饰效果 none、underline、overline、line-through 添加或移除文本装饰效果，如链接默认下划线，可设置为无装饰
line-height 设置文本的行高 数值、像素（px）、百分比（%）、normal 控制行间距，提高文本可读性

文本缩进：text-indent

定义：用于指定文本的首行缩进。

常见取值：

  • 用像素（px）、百分比（%）等指定缩进长度。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        .indented-para {
            text-indent: 2em; /* 首行缩进2个字符宽度 */
        }
    </style>
</head>
<body>
    <p class="indented-para">
        这是一个首行缩进的段落。首行会缩进2个字符的宽度。
        后续行不会缩进。
    </p>
</body>
</html>

文本水平对齐方式：text-align

定义 ：用于设置文本内容的水平对齐方式。 常见取值：

  • left：文本左对齐。

  • right：文本右对齐。

  • center：文本居中对齐。

  • justify：文本两端对齐。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        .left-aligned {
            text-align: left; /* 左对齐 */
        }
        .center-aligned {
            text-align: center; /* 居中对齐 */
        }
        .right-aligned {
            text-align: right; /* 右对齐 */
        }
        .justified {
            text-align: justify; /* 两端对齐 */
        }
    </style>
</head>
<body>
    <p class="left-aligned">这是左对齐的文本。</p>
    <p class="center-aligned">这是居中对齐的文本。</p>
    <p class="right-aligned">这是右对齐的文本。</p>
    <p class="justified">
        这是两端对齐的文本。这种对齐方式常用于正式文档，
        可以使文本看起来更整齐。
    </p>
</body>
</html>

文本修饰：text-decoration

定义 ：用于设置文本的装饰效果。 常见取值：

  • none：无装饰。

  • underline：下划线。

  • overline：上划线。

  • line-through：删除线。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        .no-decoration {
            text-decoration: none; /* 无装饰 */
        }
        .underlined {
            text-decoration: underline; /* 下划线 */
        }
        .overlined {
            text-decoration: overline; /* 上划线 */
        }
        .strikethrough {
            text-decoration: line-through; /* 删除线 */
        }
    </style>
</head>
<body>
    <p class="no-decoration">这是无装饰的文本。</p>
    <p class="underlined">这是带下划线的文本。</p>
    <p class="overlined">这是带上划线的文本。</p>
    <p class="strikethrough">这是带删除线的文本。</p>
</body>
</html>

行高：line-height

定义 ：用于设置文本的行高，即行与行之间的垂直间距。 常见取值：

  • 数值：无单位的数值，表示行高与字体大小的倍数。

  • 像素（px）：绝对值设置行高。

  • 百分比（%）：相对于父元素的行高百分比。

  • normal：默认值，通常等同于数值 1.0 到 1.2 之间，具体取决于浏览器。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        .tight-line-height {
            line-height: 1.0; /* 行高为字体大小的1倍 */
        }
        .normal-line-height {
            line-height: 1.5; /* 行高为字体大小的1.5倍 */
        }
        .loose-line-height {
            line-height: 2.0; /* 行高为字体大小的2倍 */
        }
        .pixel-line-height {
            line-height: 24px; /* 固定行高为24像素 */
        }
        .percentage-line-height {
            line-height: 150%; /* 行高为父元素行高的150% */
        }
    </style>
</head>
<body>
    <p class="tight-line-height">
        这是行高为1.0的文本。行与行之间的间距较小。
    </p>
    <p class="normal-line-height">
        这是行高为1.5的文本。这是比较常见的默认行高设置，可读性较好。
    </p>
    <p class="loose-line-height">
        这是行高为2.0的文本。行与行之间的间距较大。
    </p>
    <p class="pixel-line-height">
        这是行高为24像素的文本。使用绝对值设置行高。
    </p>
    <p class="percentage-line-height">
        这是行高为父元素行高的150%的文本。使用百分比设置行高。
    </p>
</body>
</html>

复合选择器：

选择器类型 语法 描述
后裔选择器 ancestor descendant 选择 ancestor 元素内的所有 descendant 元素。
子选择器 parent > child 选择 parent 元素的直接 child 元素。
相邻兄弟选择器 element + adjacent 选择紧跟在 element 后的 adjacent 元素。
一般兄弟选择器 element ~ siblings 选择 element 之后的所有 siblings 元素。
交集选择器 selector1 selector2 选择同时匹配 selector1 和 selector2 的元素。
并集选择器 selector1, selector2, ... 选择匹配任何一个选择器的元素。
伪类选择器 :hover selector:hover 选择鼠标悬停在元素上时的状态，常用于交互效果。

后代选择器（Descendant Selector）

后代选择器用于选择某个元素的后代元素。它的语法是将父元素选择器和后代元素选择器用空格隔开。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        div p {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个被选中的段落。</p>
        <div>
            <p>这也是一个被选中的段落。</p>
        </div>
    </div>
    <p>这个段落不会被选中。</p>
</body>
</html>

子选择器（Child Selector）

子选择器用于选择某个元素的直接子元素。它的语法是将父元素选择器和子元素选择器用>隔开。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        div > p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个被选中的段落。</p>
        <div>
            <p>这个段落不是div的直接子元素，不会被选中。</p>
        </div>
    </div>
</body>
</html>

相邻兄弟选择器（Adjacent Sibling Selector）

相邻兄弟选择器用于选择某个元素的下一个相邻兄弟元素。它的语法是将两个选择器用+隔开。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        p + p {
            color: green;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是下一个段落，会被选中并显示为绿色。</p>
    <div>
        <p>这个段落不会被选中。</p>
    </div>
</body>
</html>

一般兄弟选择器（General Sibling Selector）

一般兄弟选择器用于选择某个元素之后的所有同辈元素。它的语法是将两个选择器用~隔开。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        p ~ p {
            color: purple;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是之后的段落，会被选中并显示为紫色。</p>
    <div>
        <p>这个段落不会被选中。</p>
    </div>
    <p>这个段落也会被选中并显示为紫色。</p>
</body>
</html>

交集选择器（Intersection Selector）

交集选择器用于选择同时匹配多个选择器的元素。它的语法是将多个选择器连在一起。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        .container .box.special {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">这个盒子不会被选中。</div>
        <div class="box special">这个盒子会被选中并显示为黄色背景。</div>
    </div>
</body>
</html>

并集选择器

并集选择器用于选择匹配多个选择器之一的元素。它的语法是将多个选择器用逗号（,）分隔。并集选择器会将所有匹配的选择器结果合并，然后对合并后的元素集合应用样式。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        .highlight, .important {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="highlight">这个段落会被选中并显示为红色加粗。</p>
    <p class="important">这个段落也会被选中并显示为红色加粗。</p>
    <p class="normal">这个段落不会被选中。</p>
</body>
</html>

伪类选择器 :hover

伪类选择器 :hover 用于选择鼠标悬停在元素上时的状态，常用于为交互元素添加悬停效果。

  • :link: 选择未访问的链接。
  • :visited: 选择已访问的链接。
  • :hover:选择鼠标指针移人链接。
  • :active: 被激活的链接，即按下鼠标左键但未松开。
  • :focus: 选择获取焦点的输人字段。
html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        .hover-demo {
            color: blue;
            padding: 10px;
            background-color: white;
        }
        .hover-demo:hover {
            color: red;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="hover-demo">
        将鼠标悬停在此处，文本颜色和背景颜色会改变。
    </div>
</body>
</html>
语法 描述 示例及生成代码
元素 生成一个元素。 div → <div></div>。
嵌套元素 (>) 用于表示嵌套关系。 div>h1 → div 中包含 h1。
兄弟元素 (+) 用于表示兄弟元素关系。 div+h1 → div 和 h1 并列。
多个子元素 (*) 用于生成多个子元素。 ul>li*3 → ul 中生成 3 个 li。
类和 ID (. 和 #) 用于指定元素的类和 ID。 div.class-name#id-name → 带类和 ID 的 div。
文本内容 ({}) 用于添加文本内容。 h1{标题} → <h1>标题</h1>。
属性 ([]) 用于添加属性。 a[href="url"] → 带 href 属性的 a 标签。
列表 用于生成列表。 ol>li*3 → 有序列表，3 个 li。
重复结构 (* 和 $) 用于生成带数字的元素。 div.item-$*3 → 3 个带递增数字类名的 div。
特殊缩写 (! 或 html) 快速生成常见结构。 ! 或 html → 生成基本 HTML5 文档结构。

结构伪类选择器

结构伪类选择器是CSS中用于选择文档中具有特殊位置或状态的元素的一类选择器。它们不依赖于文档的标签结构，而是基于元素在文档中的位置或状态来选择元素。

选择器 描述 示例代码
:root 选择文档的根元素 :root { --main-color: blue; }
:nth-child() 选择父元素的第n个子元素 p:nth-child(2) { color: red; }
:nth-last-child() 选择父元素倒数第n个子元素 p:nth-last-child(2) { color: red; }
:first-child 选择父元素的第一个子元素 p:first-child { color: red; }
:last-child 选择父元素的最后一个子元素 p:last-child { color: red; }
:only-child 选择父元素中唯一的子元素 .container:only-child { color: red; }

:nth-child()

用于选择其父元素的第n个子元素或符合特定模式的子元素。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        p:nth-child(2) {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>这是第一个段落。</p>
        <p>这是第二个段落，会被选中并显示为红色。</p>
        <p>这是第三个段落。</p>
    </div>
</body>
</html>

:nth-last-child()

用于选择其父元素倒数第n个子元素。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        p:nth-last-child(2) {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>这是第一个段落。</p>
        <p>这是第二个段落，会被选中并显示为红色。</p>
        <p>这是第三个段落。</p>
    </div>
</body>
</html>

颜色：

字体颜色：color

文本颜色：background-color

颜色表示方式 表示含义 属性值示例
关键词 预定义的颜色名 red、green、blue、yellow......
rgb表示法 红绿蓝三原色，每项取值范围：0~255 rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)......
rgba表示法 红绿蓝三原色+a表示透明度，取值范围0~1 rgba(255,255,255,0.5)、rgba(255,0,0,0.3)......
十六进制表示法 #开头，将数字转换成十六进制表示 #000000、#ff0000、#e92322，简写：#000、#f00......

背景：

背景颜色（background-color）

用法 ：用于设置元素的背景颜色。 注意点：

  • 颜色可以通过颜色名称（如red）、十六进制代码（如#ff0000）、RGB值（如rgb(255, 0, 0)）或RGBA值（如rgba(255, 0, 0, 0.5)）来指定。

  • 默认情况下，背景颜色会填充元素的整个内容区域。

  • 配合其他属性（如padding、border）使用，可以更好地控制背景颜色的显示范围。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <style>
        .bg-repeat {
            background-image: url('https://picsum.photos/50/50'); /* 设置背景图片 */
            width: 200px;
            height: 100px;
            background-repeat: repeat-x; /* 背景图片在水平方向重复 */
            padding: 10px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="bg-repeat">这是一个背景图片在水平方向重复的div元素。</div>
</body>
</html>
属性 描述 示例代码
background-color 设置元素的背景颜色 .bg-color { background-color: #ffcc00; }
background-image 设置元素的背景图片 .bg-image { background-image: url('image.jpg'); }
background-repeat 控制背景图片是否重复 .bg-repeat { background-repeat: no-repeat; }
background-size 设置背景图片的大小 .bg-size { background-size: cover; }
background-position 设置背景图片的位置 .bg-position { background-position: right top; }
多个背景图片 设置多个背景图片 .multi-bg { background-image: url('image1.jpg'), url('image2.jpg'); }

HTML背景相关属性连写用法说明

属性名：background

属性值规范

  • 单个属性值的合写，取值之间以空格隔开

  • 书写顺序推荐：background: color image repeat position;

  • 省略规则：可根据实际需求省略部分属性值

特殊情况处理

  • 在PC端开发中，若盒子大小与背景图片大小完全一致，可简化写法为：
html 复制代码 
background: url('image-url');

注意事项

  • 单独样式与连写的搭配

    • 若需对某些背景属性单独设置，推荐将单独样式写在连写样式下方，以便于维护和覆盖：
html 复制代码 
.example {
  background: #ffcc00 url('image.jpg') no-repeat left top;
  background-size: cover; /* 单独设置背景图片大小 */
}

或者将单独样式融入连写中，确保所有相关样式集中定义：

html 复制代码 
.example {
  background: #ffcc00 url('image.jpg') no-repeat left top / cover;
}
相关推荐
码客前端5 分钟前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛5 分钟前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
工藤学编程18 分钟前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保18 分钟前
上传文件，在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫19 分钟前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
欧阳天风27 分钟前
用setTimeout代替setInterval
开发语言·前端·javascript
EndingCoder30 分钟前
箭头函数和 this 绑定
linux·前端·javascript·typescript
郑州光合科技余经理31 分钟前
架构解析：同城本地生活服务o2o平台海外版
大数据·开发语言·前端·人工智能·架构·php·生活
沐墨染33 分钟前
大型数据分析组件前端实践：多维度检索与实时交互设计
前端·elementui·数据挖掘·数据分析·vue·交互
xkxnq37 分钟前
第一阶段：Vue 基础入门（第 11 天）
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）03Linux下V2Ray安装配置指南04Labelme从安装到标注：零基础完整指南05jdk21下载、安装（Windows、Linux、macOS）06手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！07【踩坑笔记】50系显卡适配的 PyTorch 安装08GitLab 零基础入门指南：从安装到项目管理全流程09Opencode CLI 安装成功,但是启动失败10UV安装并设置国内源