网页 CSS美化（详解）-EW帮帮网

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

CSS的引入方式：

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

内嵌式：

内嵌式是将 CSS 样式代码写在 HTML 文件的 <style> 标签内。这种方式的优点是样式代码和 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：

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

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 代码变得冗长。

<!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 选择器）也对同一个元素设置了样式，会覆盖标签选择器的样式。

p {
    color: blue;
}

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

类选择器：

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

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

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

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

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

.important {
    font-weight: bold;
    color: red;
}

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

id选择器

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

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

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

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

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

#header {
    background-color: #f0f0f0;
    padding: 20px;
}

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

通用选择器

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

语法：使用 * 符号。

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

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

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

* {
    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 都是相对于根元素的字体大小来计算的，这有助于在整个文档中保持字体大小的一致性和可维护性。

<!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。

<!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; 可以将文本设置为斜体，这在排版中有特殊用途，如表示强调、引用等场景。

<!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 是一种通用字体家族）。

<!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）、百分比（%）等指定缩进长度。

<!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：文本两端对齐。

<!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：删除线。

<!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 之间，具体取决于浏览器。

<!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）

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

<!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）

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

<!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）

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

<!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）

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

<!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）

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

<!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>

并集选择器

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

<!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: 选择获取焦点的输人字段。

<!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个子元素或符合特定模式的子元素。

<!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个子元素。

<!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）使用，可以更好地控制背景颜色的显示范围。

<!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端开发中，若盒子大小与背景图片大小完全一致，可简化写法为：

background: url('image-url');

注意事项

单独样式与连写的搭配
- 若需对某些背景属性单独设置，推荐将单独样式写在连写样式下方，以便于维护和覆盖：

.example {
  background: #ffcc00 url('image.jpg') no-repeat left top;
  background-size: cover; /* 单独设置背景图片大小 */
}

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

.example {
  background: #ffcc00 url('image.jpg') no-repeat left top / cover;
}

网页 CSS美化（详解）