CSS基础入门 - 技术栈

文章目录

- 一、CSS核心认知
- 二、CSS的3种引入方式
- 三、CSS核心语法
- - （一）核心语法结构
  - （二）新手必学的基础选择器
  - - [1. 元素选择器（标签选择器，最基础）](#1. 元素选择器（标签选择器，最基础）)
    - [2. 类选择器（class选择器，最常用）](#2. 类选择器（class选择器，最常用）)
    - [3. id选择器（唯一标识，单独美化）](#3. id选择器（唯一标识，单独美化）)
    - [4. 通配符选择器（*，重置默认样式）](#4. 通配符选择器（*，重置默认样式）)
    - [5. 后代选择器（嵌套选择器，常用）](#5. 后代选择器（嵌套选择器，常用）)
  - （三）选择器优先级
- 四、CSS常用基础属性
- 五、CSS基础布局技巧
- - [（一）元素显示模式（块级元素 vs 行内元素 vs 行内块元素）](#（一）元素显示模式（块级元素 vs 行内元素 vs 行内块元素）)
  - （二）水平居中布局（最常用）
  - （三）垂直居中布局（新手易上手）
  - （四）浮动布局（基础进阶，实现多元素排列）
- 六、CSS伪类与伪元素
- - （一）常用伪类（用于元素的特殊状态）
  - （二）常用伪元素（用于创建虚拟元素）
- 七、CSS层叠与继承
- - （一）层叠（Cascading）
  - （二）继承（Inheritance）
- 八、CSS响应式基础
- 九、CSS3新特性
- 十、CSS新手避坑指南
- 十一、CSS学习建议与进阶方向
- - （一）新手学习建议
  - （二）进阶方向

在前端开发中，HTML负责搭建网页的"骨架"------比如哪里是标题、哪里是图片、哪里是段落；而CSS（Cascading Style Sheets，层叠样式表）则负责给这个骨架"化妆打扮"，控制网页的颜色、字体、布局、间距等所有视觉效果。没有CSS的网页，就像没有装修的房子，单调又简陋；有了CSS，才能打造出美观、有质感、符合用户审美的网页。

示例（直观感受HTML与CSS的配合）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS基础示例</title>
    <style>
        /* CSS样式：给HTML元素化妆 */
        h1 { color: red; font-size: 24px; } /* 标题变红、放大 */
        p { color: #333; line-height: 1.5; } /* 段落变灰、行间距加大 */
    </style>
</head>
<body>
    <h1>我是标题（HTML骨架）</h1>
    <p>我是段落（HTML骨架），被CSS美化后更易阅读。</p>
</body>
</html>

一、CSS核心认知

先搞懂3个核心问题，避免一开始就走弯路，同时理清CSS和HTML的关系：

CSS的作用是什么？ 简单说，CSS就是"样式控制器"，核心是"选择元素、设置样式"。比如给HTML的标题标签h1设置红色、给段落标签p设置字体大小、给图片设置圆角、让导航栏固定在顶部、调整元素之间的间距，甚至实现动画效果，这些都是CSS的核心功能。CSS的本质是分离网页的结构（HTML）和样式（CSS），让代码更易维护、更具复用性，比如一个CSS样式可以同时作用于多个HTML元素，修改时只需改动一处，所有关联元素都会同步更新。
CSS和HTML的关系？ HTML是"结构"，负责定义网页的内容和骨架，回答"网页上有什么"；CSS是"样式"，负责定义网页的外观和布局，回答"这些内容长什么样、放在哪里"。二者分工明确、缺一不可，CSS不能单独存在，必须依附于HTML------我们用CSS的选择器找到HTML中的某个或某类元素，再给这些元素设置具体的视觉样式，没有HTML元素，CSS就没有作用的对象。
CSS的核心特点？ 记住两个关键词：层叠和继承，这是CSS区别于其他样式语言的核心，也是新手必须理解的重点。层叠：多个样式规则可以作用于同一个元素，当样式发生冲突时，优先级高的样式会覆盖优先级低的样式，优先级相同则遵循"后定义的样式覆盖先定义的样式"；继承：子元素会自动继承父元素的部分样式，比如父元素设置了字体颜色为黑色，子元素（如段落、 span标签）在没有单独设置颜色的情况下，会默认沿用父元素的黑色，这样可以减少重复代码，提升开发效率。

示例（层叠与继承效果）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS层叠与继承示例</title>
    <style>
        /* 父元素样式：所有子元素会继承文本相关样式 */
        .parent {
            color: #333; /* 字体颜色，子元素会继承 */
            font-size: 16px; /* 字体大小，子元素会继承 */
            margin: 20px; /* 外边距，不可继承 */
        }
        /* 层叠效果：p标签同时被.parent和p选择器作用，后定义的p选择器覆盖颜色 */
        .parent p {
            color: blue; /* 覆盖继承的#333，最终显示蓝色 */
        }
    </style>
</head>
<body>
    <div class="parent">
        <p>我是子元素p，继承了父元素的字体大小，颜色被层叠为蓝色</p>
        <span>我是子元素span，继承了父元素的颜色和字体大小</span>
    </div>
</body>
</html>

新手提醒：CSS不是编程语言，不需要写复杂的逻辑判断，只要记住"选择器+样式属性"的搭配规则，多练习就能快速掌握，和HTML一样，重点在"实操"，光看不动手很难真正学会。

二、CSS的3种引入方式

CSS要作用于HTML，必须先"引入"到HTML文件中，常用的有3种引入方式，不同场景适用不同方式，新手先重点掌握内嵌式和外链式，行内式仅用于临时调试。

（一）内嵌式（style标签，适合简单样式）

将CSS代码写在HTML的<head>标签内，用<style>标签包裹，仅作用于当前HTML文件，适合单个页面、样式较少的场景（比如简单的静态页面、临时测试页面）。这种方式的优点是结构和样式在同一个文件中，便于快速修改和查看；缺点是样式无法复用，多个页面需要重复编写相同样式。

核心要点：<style>标签必须放在HTML的<head>标签内，否则可能导致样式生效异常；CSS代码写在<style>标签内部，无需额外添加其他标签，注释可使用/* 注释内容 */ 或 。

示例（内嵌式引入）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内嵌式CSS示例</title>
    <!-- 内嵌式：style标签放在head内 -->
    <style>
        /* CSS注释：给h1和p设置样式 */
        h1 {
            color: #ff0000;
            text-align: center;
        }
        p {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <h1>内嵌式CSS演示</h1>
    <p>这是内嵌式CSS设置的段落样式。</p>
</body>
</html>

（二）外链式（link标签，推荐使用，适合多页面）

将CSS代码单独写在一个后缀为.css的文件中（比如style.css、index.css），再通过HTML的标签，将这个CSS文件引入到HTML中。这种方式是企业开发中最常用的方式，优点是"一次编写，多页复用"，比如网站的所有页面，导航栏、底部版权信息的样式一致，只需编写一次CSS文件，所有页面通过link标签引入即可，修改时只需改动CSS文件，所有页面都会同步更新，极大提升开发和维护效率。

核心要点：CSS文件的后缀必须是.css，文件名不能有中文、空格和特殊符号，建议用英文、数字或下划线组合（如main.css）；HTML文件和CSS文件最好放在同一个文件夹，若不在同一文件夹，需在link标签的href属性中填写正确的路径（相对路径或绝对路径）；标签必须放在HTML的<head>标签内，rel属性固定为"stylesheet"，表示引入的是样式表文件。

示例（外链式引入，分2个文件）：

新建style.css文件（单独存放CSS代码）：

css 复制代码

/* style.css 文件，单独存放样式 */
h1 {
    color: #007bff;
    text-align: center;
}
p {
    font-size: 15px;
    line-height: 1.6;
}
.nav {
    background: #333;
    color: #fff;
    padding: 10px;
}

新建index.html文件（引入style.css）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外链式CSS示例</title>
    <!-- 外链式：link标签引入CSS文件，放在head内 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="nav">网站导航</div>
    <h1>外链式CSS演示</h1>
    <p>这是外链式CSS设置的段落样式，可多页面复用。</p>
</body>
</html>

（三）行内式（style属性，不推荐，仅临时使用）

直接在HTML标签内，通过style属性写CSS样式，仅作用于当前这个标签，优先级最高（会覆盖内嵌式和外链式的样式）。这种方式的优点是可以快速给单个元素设置临时样式，方便调试；缺点是样式和结构混在一起，不利于代码维护，且无法复用，一旦需要修改多个元素的样式，需要逐个修改，效率极低，新手尽量少用。

核心要点：style属性直接写在HTML标签内部，样式声明采用"属性: 值;"的格式，多个样式之间用分号分隔；行内式仅适合临时调试或单个元素的特殊样式设置，正式开发中尽量避免使用。

注意：新手优先使用外链式，简单页面可用内嵌式，尽量避免行内式，避免样式和结构混乱，后期难以修改和维护。

示例（行内式引入）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>行内式CSS示例</title>
</head>
<body>
    <!-- 行内式：style属性直接写在标签内，仅作用于当前标签 -->
    <h1 style="color: green; font-size: 22px; text-align: center;">行内式CSS演示</h1>
    <p style="color: #999; font-size: 14px;">这是行内式CSS设置的段落样式，仅作用于当前p标签。</p>
</body>
</html>

三、CSS核心语法

CSS的语法非常固定，无论哪种引入方式，核心都是"选择器 + 样式声明块"，记住这个核心结构，就能写出所有CSS代码，新手务必熟练掌握。

（一）核心语法结构

CSS的基本语法由"选择器"和"样式声明块"两部分组成，具体结构如下：选择器 { 样式属性1: 属性值1; 样式属性2: 属性值2; ... }。

拆解说明：

选择器：告诉CSS"要给哪个HTML标签设置样式"，相当于CSS的"眼睛"，用来定位HTML中的元素，比如h1、p、img就是最基础的选择器；
样式声明块：用大括号{}包裹，里面是具体的样式设置，每一条声明都是"属性: 值"的格式，这是CSS控制元素样式的核心；
属性：CSS提供的固定样式关键词，用来控制元素的某个视觉效果，比如color控制字体颜色、font-size控制字体大小、width控制元素宽度；
属性值：配合属性使用，不同属性有不同的取值规则，比如color的属性值可以是英文单词（red、blue）、十六进制（#333、#ff0000）、RGB（rgb(255,0,0)），font-size的属性值通常用px（像素）作为单位。

补充：每条样式声明末尾的分号可以省略，但为了代码规范和避免出错，建议统一加上；CSS代码不区分大小写，但为了可读性，建议统一使用小写（比如color不写成Color）。

示例（CSS核心语法结构）：

css 复制代码

/* 语法结构：选择器 { 样式声明块 } */
/* 1. 选择器：p（定位所有p标签） */
/* 2. 样式声明块：{}内的所有样式，每条声明都是"属性: 值;" */
p {
    color: #333; /* 属性：color（字体颜色），属性值：#333（深灰色） */
    font-size: 16px; /* 属性：font-size（字体大小），属性值：16px */
    line-height: 1.5; /* 属性：line-height（行高），属性值：1.5 */
    text-align: left; /* 属性：text-align（文本对齐），属性值：left（左对齐） */
}

（二）新手必学的基础选择器

选择器是CSS的核心，用来定位HTML中的元素，新手先掌握以下5种基础选择器，再逐步学习复杂选择器，就能应对大部分基础开发场景。

1. 元素选择器（标签选择器，最基础）

直接用HTML标签名作为选择器，作用于页面中所有该标签的元素，比如h1、p、img、div、a等。优点是简单直观，适合给页面中所有相同标签设置统一样式；缺点是无法精准定位单个或某几个元素，样式复用性有限。

核心要点：选择器直接写标签名，无需添加任何符号；作用范围是页面中所有该标签的元素，比如用p作为选择器，页面中所有<p>标签都会应用该样式。

示例（元素选择器）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素选择器示例</title>
    <style>
        /* 元素选择器：h1、p、img，分别定位所有对应标签 */
        h1 { color: red; text-align: center; } /* 所有h1标签变红、居中 */
        p { color: #666; font-size: 14px; } /* 所有p标签变灰、字体14px */
        img { width: 200px; border-radius: 8px; } /* 所有img标签宽200px、圆角 */
    </style>
</head>
<body>
    <h1>元素选择器演示</h1>
    <p>这是第一个p标签，应用p选择器样式。</p>
    <p>这是第二个p标签，也应用p选择器样式。</p>
    <img src="https://via.placeholder.com/200" alt="示例图片">
</body>
</html>

2. 类选择器（class选择器，最常用）

给HTML标签设置class属性，再用".类名"作为选择器，作用于所有设置了该类名的元素。优点是灵活度高，可以给不同标签设置同一个类名，实现样式复用，也可以给同一个标签设置多个类名（类名之间用空格分隔），叠加多个样式，是开发中使用频率最高的选择器。

核心要点：类名自定义，不能有空格、中文和特殊符号，建议用英文、数字或下划线组合（比如title、content、btn）；HTML标签中通过class="类名"设置，CSS中通过.类名定义样式；一个类名可以作用于多个元素，一个元素可以拥有多个类名。

示例（类选择器，含多类名叠加）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>类选择器示例</title>
    <style>
        /* 类选择器：.title、.text、.red，用.开头 */
        .title { font-size: 20px; text-align: center; } /* 标题类样式 */
        .text { color: #666; line-height: 1.5; } /* 文本类样式 */
        .red { color: red; } /* 红色文本类样式 */
    </style>
</head>
<body>
    <h1 class="title">类选择器演示</h1>
    <p class="text">这是普通文本，应用.text类样式。</p>
    <p class="text red">这是红色文本，应用.text+.red类样式（多类名叠加）。</p>
    <div class="title text">这是div标签，应用.title+.text类样式（不同标签复用类）。</div>
</body>
</html>

3. id选择器（唯一标识，单独美化）

给HTML标签设置id属性，再用"#id名"作为选择器，作用于唯一设置了该id的元素（一个页面中，id名必须唯一，不能重复）。适合单独美化某个特定元素（比如页面顶部的导航栏、底部的版权信息、页面的logo），不适合样式复用。

核心要点：id名自定义，唯一且不能有空格、中文和特殊符号；HTML标签中通过id="id名"设置，CSS中通过#id名定义样式；一个id只能作用于一个元素，一个元素只能拥有一个id。

示例（id选择器）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>id选择器示例</title>
    <style>
        /* id选择器：#logo、#copyright，用#开头，id名唯一 */
        #logo {
            width: 150px;
            height: 50px;
            background: #007bff;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        #copyright {
            color: #999;
            font-size: 12px;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="logo">网站Logo（唯一）</div>
    <p>普通段落内容</p>
    <div id="copyright">© 2026 版权所有（唯一）</div>
    <!-- 错误：id不能重复，以下代码不规范 -->
    <div id="logo">重复id，不推荐</div>
</body>
</html>

4. 通配符选择器（*，重置默认样式）

用"*"作为选择器，作用于页面中所有HTML元素，常用作"重置默认样式"。浏览器会给部分标签（比如body、p、ul、h1~h6）设置默认样式（比如默认边距、默认字体大小、默认列表符号），导致不同浏览器显示效果不一致，用通配符选择器可以统一重置这些默认样式，让页面在不同浏览器中显示一致。

核心要点：选择器为"*"，作用于所有元素；新手建议在每个CSS文件开头都添加通配符重置样式，避免默认样式带来的麻烦；通配符选择器的优先级最低，不会覆盖其他选择器的样式。

示例（通配符选择器，重置默认样式）：

css 复制代码

/* CSS文件开头，通配符重置默认样式 */
* {
    margin: 0; /* 清除所有元素默认外边距 */
    padding: 0; /* 清除所有元素默认内边距 */
    box-sizing: border-box; /* 统一盒模型，避免宽高计算错误 */
    list-style: none; /* 清除列表默认符号 */
    text-decoration: none; /* 清除链接默认下划线 */
}

/* 后续样式不会被通配符覆盖（通配符优先级最低） */
h1 {
    color: #333;
    margin: 20px 0; /* 重新设置h1的外边距 */
}

5. 后代选择器（嵌套选择器，常用）

用"选择器1 选择器2"的格式（中间用空格分隔），作用于选择器1包含的所有选择器2元素，适合给嵌套在某个元素内的特定元素设置样式，比如给导航栏中的a标签设置样式、给文章中的p标签设置样式。

核心要点：中间用空格分隔两个选择器，选择器1是父元素（或祖先元素），选择器2是子元素（或后代元素）；作用范围是选择器1包含的所有选择器2元素，不包含选择器1之外的选择器2元素，精准度更高。

示例（后代选择器）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>后代选择器示例</title>
    <style>
        /* 后代选择器：.nav a （.nav包含的所有a标签） */
        .nav { background: #333; padding: 10px; }
        .nav a { color: #fff; margin: 0 10px; } /* 仅.nav内的a标签生效 */
        
        /* 后代选择器：.article p （.article包含的所有p标签） */
        .article { margin: 20px; }
        .article p { color: #666; line-height: 1.5; } /* 仅.article内的p标签生效 */
        
        /* 普通p标签，不受后代选择器影响 */
        p { color: red; }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
    </div>
    
    <div class="article">
        <p>这是文章内的段落，颜色为#666。</p>
        <p>这也是文章内的段落，颜色为#666。</p>
    </div>
    
    <p>这是文章外的段落，颜色为red。</p>
</body>
</html>

（三）选择器优先级

当多个选择器作用于同一个元素，且设置了相同的样式时，会出现"样式冲突"，此时优先级高的选择器会覆盖优先级低的选择器的样式，新手必须记住以下优先级顺序（从高到低），避免样式冲突导致样式不生效。

优先级顺序：行内式（style属性） > id选择器（#id） > 类选择器（.class）、后代选择器 > 元素选择器（标签名） > 通配符选择器（*）。

补充说明：

可以在样式声明后加"!important"，强制提升该样式的优先级（比如color: red !important;），此时该样式会覆盖所有其他相同属性的样式，无论其他选择器优先级多高；但不推荐频繁使用，容易导致优先级混乱，仅用于临时调试。
优先级相同的情况下，遵循"后定义的样式覆盖先定义的样式"，比如两个类选择器作用于同一个元素，后面定义的类选择器的样式会覆盖前面的。

示例（选择器优先级对比）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器优先级示例</title>
    <style>
        /* 1. 通配符选择器（优先级最低） */
        * { color: gray; }
        
        /* 2. 元素选择器 */
        p { color: blue; }
        
        /* 3. 类选择器 */
        .text { color: green; }
        
        /* 4. 后代选择器（与类选择器优先级相同，后定义覆盖前定义） */
        .box p { color: purple; }
        
        /* 5. id选择器（优先级高） */
        #content { color: orange; }
    </style>
</head>
<body>
    <p>1. 仅元素选择器：蓝色（覆盖通配符）</p>
    <p class="text">2. 类选择器：绿色（覆盖元素选择器）</p>
    <div class="box">
        <p class="text">3. 后代选择器：紫色（与类选择器优先级相同，后定义覆盖）</p>
    </div>
    <p id="content" class="text">4. id选择器：橙色（覆盖类选择器）</p>
    <p id="content" class="text" style="color: red;">5. 行内式：红色（优先级最高）</p>
    <p class="text" style="color: black !important;">6. !important：黑色（强制最高优先级）</p>
</body>
</html>

补充：新手建议尽量用类选择器实现样式复用，少用行内式和id选择器，避免优先级混乱，遇到样式不生效时，先检查选择器优先级是否正确。

四、CSS常用基础属性

CSS属性非常多，但新手不需要全部记住，先掌握以下5类核心属性，就能实现大部分基础美化效果，结合实操练习，慢慢熟练，后续再逐步学习其他属性。

（一）文本样式属性（控制文字外观，最常用）

重点控制文字的颜色、字体、大小、对齐方式、行高、装饰效果等，适用于h1~h6、p、span、a、div等所有包含文本的元素，是最基础、最常用的一类属性。

核心属性及说明：

color：设置文字颜色，常用取值有3种：英文单词（red、blue、gray、white等）、十六进制（#333、#ff0000、#fff等，最常用）、RGB（rgb(255,0,0)、rgb(51,51,51)等）；
font-size：设置字体大小，常用单位是px（像素，最常用）、em（相对父元素字体大小）、rem（相对根元素字体大小），新手优先使用px，常用尺寸为14px、16px、18px；
font-weight：设置字体粗细，常用取值为normal（默认，常规字体）、bold（加粗）、100~900（数字越大越粗，400=normal，700=bold）；
text-align：设置文本对齐方式，常用取值为left（左对齐，默认）、center（居中）、right（右对齐）、justify（两端对齐，适合长段落）；
line-height：设置行高，控制文本行间距，常用取值为px、em，或无单位（比如1.5，表示1.5倍字体大小），行高设置为容器高度时，可实现单行文本垂直居中；
text-decoration：设置文本装饰，常用取值为none（无装饰，常用于清除a标签的默认下划线）、underline（下划线）、line-through（删除线）；
font-family：设置字体类型，常用取值为"Microsoft YaHei"（微软雅黑）、"SimSun"（宋体）、"Arial"（英文常用），可设置多个字体，用逗号分隔，当第一个字体不可用时，会自动使用下一个。

示例（文本样式属性综合使用）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本样式属性示例</title>
    <style>
        .title {
            color: #007bff; /* 字体颜色：蓝色 */
            font-size: 22px; /* 字体大小：22px */
            font-weight: 700; /* 字体加粗 */
            text-align: center; /* 文本居中 */
            font-family: "Microsoft YaHei", Arial, sans-serif; /* 字体类型 */
            text-decoration: underline; /* 下划线 */
            margin: 20px 0;
        }
        .content {
            color: #333; /* 字体颜色：深灰色 */
            font-size: 16px; /* 字体大小：16px */
            line-height: 1.8; /* 行高：1.8倍字体大小 */
            text-align: justify; /* 文本两端对齐 */
        }
        .link {
            color: #ff0000; /* 链接颜色：红色 */
            text-decoration: none; /* 清除下划线 */
            font-weight: 600;
        }
        .del {
            text-decoration: line-through; /* 删除线 */
            color: #999;
        }
    </style>
</head>
<body>
    <h1 class="title">文本样式综合演示</h1>
    <p class="content">这是一段两端对齐的文本，行高设置为1.8倍，字体大小16px，颜色为深灰色，整体阅读体验更好。CSS文本样式属性可以灵活控制文字的外观，让页面更美观。</p>
    <p>点击<a href="#" class="link">这里</a>查看更多内容（无下划线红色链接）</p>
    <p>原价：<span class="del">199元</span> 现价：99元</p>
</body>
</html>

（二）背景样式属性（控制元素背景）

适用于所有元素（比如div、body、h1、img），可以设置背景颜色、背景图片、背景平铺、背景大小等效果，用于增强页面视觉层次感。

核心属性及说明：

background-color：设置背景颜色，取值和color属性一致，还有一个特殊值transparent（透明，默认值），可用于设置透明背景；
background-image：设置背景图片，取值为url("图片路径")，路径写法和HTML的img标签一致，可使用本地图片或网络图片；
background-repeat：设置背景图片是否平铺，常用取值为repeat（默认，水平+垂直平铺）、no-repeat（不平铺）、repeat-x（水平平铺）、repeat-y（垂直平铺）；
background-size：设置背景图片大小，常用取值为cover（覆盖整个元素，可能裁剪图片）、contain（完全显示图片，可能留空白）、具体尺寸（比如100% 100%，表示宽高都占满元素）；
background-position：设置背景图片的位置，常用取值为center（居中）、left（左对齐）、right（右对齐）、top（上对齐）、bottom（下对齐），也可以用具体数值（比如50px 50px，表示距离左边缘50px、上边缘50px）。

补充：可以将多个背景属性简写为background，格式为background: 背景颜色背景图片背景平铺背景大小背景位置;，比如background: #f5f5f5 url("bg.jpg") no-repeat cover center;，简化代码书写。

示例（背景样式属性综合使用）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景样式属性示例</title>
    <style>
        .box1 {
            width: 300px;
            height: 200px;
            background-color: #f5f5f5; /* 背景颜色：浅灰色 */
            margin: 10px;
            padding: 20px;
        }
        .box2 {
            width: 300px;
            height: 200px;
            /* 背景图片：不平铺、居中、覆盖整个元素 */
            background-image: url("https://via.placeholder.com/300");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            margin: 10px;
            color: #fff; /* 文字白色，与背景对比 */
            line-height: 200px;
            text-align: center;
        }
        .box3 {
            width: 300px;
            height: 200px;
            /* 背景简写：颜色 图片 平铺 大小 位置 */
            background: #007bff url("https://via.placeholder.com/50") repeat-x center;
            margin: 10px;
        }
        .transparent {
            width: 300px;
            height: 100px;
            background-color: transparent; /* 透明背景 */
            border: 1px solid #ccc;
            margin: 10px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">纯色背景（浅灰色）</div>
    <div class="box2">背景图片（居中、覆盖）</div>
    <div class="box3">背景简写（水平平铺小图片）</div>
    <div class="transparent">透明背景（border可见）</div>
</body>
</html>

（三）边框样式属性（控制元素边框）

适用于所有元素，可设置边框的宽度、样式、颜色，常用於图片、按钮、表格、容器等元素，增强元素的视觉轮廓和层次感。

核心属性及说明：

border-width：设置边框宽度，常用单位为px，比如1px、2px，0px表示无边框；可分别设置上下左右边框宽度（比如border-width: 1px 2px 3px 4px;，顺序为上、右、下、左）；
border-style：设置边框样式（必须写，否则边框不显示），常用取值为solid（实线，最常用）、dashed（虚线）、dotted（点线）、none（无边框）；
border-color：设置边框颜色，取值和color属性一致；
border（简写）：三合一简化写法，格式为border: 宽度样式颜色;（顺序可调整），比如border: 1px solid #ccc;，可快速设置边框；
border-radius：设置边框圆角，常用单位为px，数值越大，圆角越明显，50%可实现圆形（需保证元素宽高相等），常用于图片、按钮、容器的圆角效果；
border-left/right/top/bottom：单独设置某一侧的边框，比如border-left: 1px solid red;，仅设置左边框。

示例（边框样式属性综合使用）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>边框样式属性示例</title>
    <style>
        .box1 {
            width: 200px;
            height: 100px;
            /* 边框简写：1px 实线 灰色 */
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        .box2 {
            width: 200px;
            height: 100px;
            border-width: 2px;
            border-style: dashed; /* 虚线边框 */
            border-color: #007bff; /* 蓝色边框 */
            margin: 10px;
            padding: 10px;
        }
        .box3 {
            width: 200px;
            height: 100px;
            /* 单独设置某一侧边框 */
            border-top: 2px solid red;
            border-left: 1px dotted #999;
            margin: 10px;
            padding: 10px;
        }
        .circle {
            width: 100px;
            height: 100px;
            border: 2px solid #ff0000;
            border-radius: 50%; /* 圆角50%，实现圆形 */
            background: #f5f5f5;
            margin: 10px;
            text-align: center;
            line-height: 100px;
        }
        .img-border {
            width: 200px;
            border: 3px solid #333;
            border-radius: 8px; /* 图片圆角 */
        }
    </style>
</head>
<body>
    <div class="box1">普通实线边框（1px 灰色）</div>
    <div class="box2">虚线边框（2px 蓝色）</div>
    <div class="box3">单独设置边框（上红、左点线）</div>
    <div class="circle">圆形边框</div>
    <img src="https://via.placeholder.com/200" alt="图片边框" class="img-border">
</body>
</html>

（四）盒模型属性（控制元素大小和间距，必懂）

盒模型是CSS布局的核心，所有HTML元素都可以看作一个"盒子" ，这个盒子由4部分组成（从内到外）：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。理解盒模型，才能精准控制元素的大小、间距和布局，避免出现"设置宽高后，实际显示大小和预期不一致"的问题，新手必须重点掌握。

核心说明：盒模型的总宽度/总高度，决定了元素在页面中实际占据的空间，新手最容易忽略的是"默认盒模型的宽高不包含padding和border"，导致布局错乱，后续会重点讲解两种盒模型模式。

盒模型四部分详细解析：

内容区（content）：盒子的核心区域，用来存放元素的内容（比如文本、图片、子元素），宽度和高度由width、height属性控制，这是元素的"固有大小"，不包含padding、border和margin。
内边距（padding）：内容区和边框之间的空白区域，相当于"盒子内部的填充物"，用来控制内容和边框的距离，不会影响盒子的外部空间（不会挤压其他元素），但会增加盒子的总大小（默认盒模型下）。常用取值为px，可单独设置上下左右内边距（比如padding: 10px 20px 15px 5px;，顺序为上、右、下、左），也可简写为padding: 10px;（上下左右均为10px）。
边框（border）：内边距外面的线条，用来包裹盒子，之前在"边框样式属性"中已详细讲解，边框会增加盒子的总大小（默认盒模型下），边框宽度、样式、颜色直接影响盒子的外观和实际尺寸。
外边距（margin）：盒子外部的空白区域，用来控制当前盒子和其他元素之间的距离，相当于"盒子和其他盒子之间的空隙"，不会影响盒子自身的大小，只会影响盒子在页面中的位置和与其他元素的间距。常用取值为px，可单独设置上下左右外边距（比如margin: 20px 15px;，上下20px、左右15px），也可简写为margin: 0 auto;（实现块级元素水平居中）。

补充：padding和margin的区别是------padding是"盒子内部的空白"，会影响内容的位置；margin是"盒子外部的空白"，会影响盒子和其他元素的距离，二者都不会影响内容区本身的大小（width/height控制）。

示例（盒模型四部分直观演示）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒模型四部分演示</title>
    <style>
        /* 通配符重置，避免默认样式干扰 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: content-box; /* 默认盒模型，后续讲解 */
        }
        .box {
            width: 200px; /* 内容区宽度 */
            height: 100px; /* 内容区高度 */
            background-color: #f5f5f5; /* 内容区背景 */
            padding: 20px; /* 内边距：上下左右各20px */
            border: 3px solid #007bff; /* 边框：3px 实线 蓝色 */
            margin: 30px; /* 外边距：上下左右各30px */
        }
    </style>
</head>
<body>
    <div class="box">盒模型演示：内容区宽200px、高100px，加上内边距和边框后，实际总宽/总高会变大</div>
    <!-- 直观对比：两个盒子的间距由margin控制 -->
    <div class="box">第二个盒子，与第一个盒子的间距为30px（margin叠加）</div>
</body>
</html>

关键计算（默认盒模型）：盒子实际总宽度 = width（内容区） + padding（左右） + border（左右）；盒子实际总高度 = height（内容区） + padding（上下） + border（上下）。以上面示例为例，总宽度 = 200px + 20px2 + 3px 2 = 246px，总高度 = 100px + 20px2 + 3px2 = 146px，这也是盒子在页面中实际占据的空间大小。

（五）显示与隐藏属性（控制元素显示状态）

用于控制元素的显示和隐藏，适用于所有元素，常用於导航栏折叠、弹窗显示隐藏等场景。

核心属性及说明：

display：控制元素的显示模式，常用取值为block（块级元素，独占一行，可设置宽高）、inline（行内元素，不独占一行，无法设置宽高）、inline-block（行内块元素，不独占一行，可设置宽高）、none（隐藏元素，不占据页面空间）；
visibility：控制元素的可见性，常用取值为visible（可见，默认）、hidden（隐藏元素，占据页面空间，仅不显示）；
opacity：控制元素的透明度，取值为0~1，0表示完全透明（可见但透明），1表示完全不透明，0.5表示半透明，不影响元素的占位。

补充：display: none;和visibility: hidden;的区别的是，前者隐藏后不占据页面空间，后者隐藏后仍占据页面空间，布局不会发生变化。

五、CSS基础布局技巧

布局是CSS的核心应用之一，新手先掌握以下4种基础布局方式，能实现简单的页面排版（比如导航栏、卡片布局、图文排版），后续再学习Flex、Grid等高级布局。

（一）元素显示模式（块级元素 vs 行内元素 vs 行内块元素）

HTML元素默认分为块级元素和行内元素，它们的显示模式不同，布局效果也不同，CSS可以通过display属性修改元素的显示模式，这是布局的基础。

三种显示模式的核心区别：

块级元素：独占一行，无论宽度多少，都会占据一整行；可设置width、height、margin、padding；常见元素有div、h1~h6、p、ul、ol、table、form；默认display: block;
行内元素：不独占一行，多个行内元素可以在同一行显示；无法设置width、height，margin和padding仅左右生效，上下不生效；常见元素有span、a、strong、em、u、del；默认display: inline;
行内块元素：结合块级元素和行内元素的优点，不独占一行，多个行内块元素可在同一行显示；可设置width、height、margin、padding；常见元素有img、input、button；默认display: inline-block;

核心应用：通过修改display属性，实现元素的排列方式，比如将行内元素a标签改为inline-block，实现横向导航栏；将块级元素改为inline，实现多元素同行显示。

（二）水平居中布局（最常用）

水平居中是最常用的布局效果，新手根据元素的显示模式，选择对应的居中方式即可，无需复杂操作。

常用水平居中方式：

块级元素水平居中：给块级元素设置margin: 0 auto;，前提是该元素有固定宽度（width），且没有设置浮动；如果元素宽度为100%（默认），则无需设置，本身就是水平铺满的；
行内元素/行内块元素水平居中：给父元素设置text-align: center;，子元素（行内/行内块）会自动水平居中；
多个块级元素水平居中：将多个块级元素改为inline-block，再给父元素设置text-align: center;，即可实现多块级元素同行水平居中。

（三）垂直居中布局（新手易上手）

垂直居中比水平居中稍复杂，新手先掌握2种简单易操作的方式，适合基础场景，后续学习Flex布局后，可掌握更简洁的垂直居中方法。

常用垂直居中方式：

单行文本垂直居中：给容器设置line-height = height（行高等于容器高度），同时可配合text-align: center;实现水平+垂直居中，适用于导航栏、按钮等单行文本场景；
固定高度容器垂直居中：给子元素设置margin-top，值为（父容器高度 - 子元素高度）÷ 2，适合子元素高度固定的情况；
行内块元素垂直居中：给父元素设置line-height = 父容器高度，同时给子元素设置vertical-align: middle;，即可实现垂直居中。

（四）浮动布局（基础进阶，实现多元素排列）

浮动（float）是早期常用的布局方式，用于实现多元素横向排列（比如图文环绕、多卡片排列），新手需要掌握浮动的基础用法和清除浮动的方法，避免布局错乱。

核心要点：

float属性的常用取值：left（向左浮动）、right（向右浮动）、none（不浮动，默认）；
浮动的特点：元素浮动后，会脱离正常的文档流，不再占据原来的位置，可能会覆盖其他元素；多个浮动元素会自动同行排列，超出父容器宽度时会自动换行；
清除浮动：浮动会导致父元素高度塌陷（父元素无法包裹浮动的子元素），需要清除浮动，常用方法有3种：给父元素设置overflow: hidden;、在浮动元素末尾添加一个空的div标签并设置clear: both;、给父元素添加伪元素::after并设置clear: both;（推荐使用，不增加额外标签）。

新手提醒：浮动布局虽然常用，但容易出现布局错乱，建议先掌握基础用法，后续优先学习Flex布局，更简洁、更不易出错。

六、CSS伪类与伪元素

伪类和伪元素是CSS的进阶知识点，用于给元素添加特殊样式，无需修改HTML结构，能极大提升页面的视觉效果和交互体验，新手先掌握常用的伪类和伪元素即可。

（一）常用伪类（用于元素的特殊状态）

伪类以":"开头，用于选择元素的特殊状态（比如鼠标悬停、点击、聚焦等），常用伪类如下：

:hover：鼠标悬停在元素上时的样式，常用于按钮、链接、卡片等元素，提升交互体验；
:active：元素被点击时的样式（点击瞬间生效），常用于按钮、链接；
:link：未被访问过的链接样式；
:visited：已被访问过的链接样式；
:focus：元素获得焦点时的样式（比如输入框被点击时），常用于表单元素；
:first-child：选择父元素的第一个子元素；
:last-child：选择父元素的最后一个子元素。

核心要点：伪类必须跟在选择器后面，比如a:hover、.btn:active，用于给元素的特殊状态设置样式。

（二）常用伪元素（用于创建虚拟元素）

伪元素以"::"开头，用于在元素的前后创建虚拟元素，这些虚拟元素不属于HTML结构，仅通过CSS生成，常用伪元素如下：

::before：在元素内部的最前面创建一个虚拟元素，必须配合content属性使用（content: "";，可设置文本或空值）；
::after：在元素内部的最后面创建一个虚拟元素，同样必须配合content属性使用；
::first-letter：选择元素的第一个字符，用于设置首字放大等效果；
::first-line：选择元素的第一行文本，用于设置第一行文本的特殊样式。

核心应用：伪元素常用于添加装饰效果（比如按钮的小图标、文本的下划线、卡片的边框装饰），无需修改HTML结构，让代码更简洁。

七、CSS层叠与继承

前面提到，CSS的核心特点是层叠和继承，深入理解这两个特点，能帮助新手更好地控制样式，避免样式冲突，提升代码复用性。

（一）层叠（Cascading）

层叠是指多个CSS样式规则可以作用于同一个元素，当样式发生冲突时，CSS会按照一定的规则（优先级）决定哪个样式生效，核心规则如下：

优先级高的样式覆盖优先级低的样式（优先级顺序参考前面的选择器优先级）；
优先级相同的情况下，后定义的样式覆盖先定义的样式；
继承的样式优先级最低，无论父元素样式优先级多高，子元素单独设置的样式都会覆盖继承的样式；
使用!important的样式，优先级最高，会覆盖所有其他相同属性的样式（不推荐频繁使用）。

（二）继承（Inheritance）

继承是指子元素会自动继承父元素的部分样式，无需单独给子元素设置，减少重复代码，核心要点如下：

可继承的样式：主要是文本相关的样式，比如color、font-size、font-weight、line-height、text-align、font-family等；
不可继承的样式：主要是布局相关的样式，比如width、height、margin、padding、border、background、float等；
强制继承：可以使用inherit关键字，强制子元素继承父元素的某个样式，比如子元素设置color: inherit;，即可继承父元素的字体颜色；
禁止继承：可以使用initial关键字，强制子元素使用该属性的默认值，不继承父元素的样式。

八、CSS响应式基础

随着移动设备的普及，网页需要适配不同尺寸的屏幕（手机、平板、电脑），响应式设计就是让网页在不同尺寸的设备上都能正常显示、布局合理，新手先掌握媒体查询（media query）的基础用法，这是响应式设计的核心。

核心要点：

媒体查询的作用：根据屏幕的宽度、高度等条件，应用不同的CSS样式，实现"不同屏幕显示不同布局"；
基本语法：@media (条件) { 样式规则 }，比如@media (max-width: 768px) { ... }，表示当屏幕宽度小于等于768px时，应用花括号内的样式；
常用条件：max-width（最大宽度，小于等于）、min-width（最小宽度，大于等于）、device-width（设备宽度）；
核心思路：先编写电脑端的样式，再通过媒体查询，修改移动设备（手机、平板）的样式，比如缩小字体大小、调整元素宽度、改变布局方式（从横向排列改为纵向排列）。

补充：新手无需掌握复杂的响应式布局，先了解媒体查询的基本用法，后续结合Flex、Grid布局，可实现更灵活的响应式设计。

九、CSS3新特性

CSS3在传统CSS的基础上，增加了很多新特性，用于实现更丰富的视觉效果和动画，新手先掌握以下常用新特性，提升页面质感。

（一）渐变（Gradient）

用于实现从一种颜色到另一种颜色的平滑过渡，无需使用图片，常用渐变类型有线性渐变和径向渐变。

线性渐变（linear-gradient）：从一个方向到另一个方向的渐变，比如background: linear-gradient(red, blue);，表示从红色到蓝色的线性渐变；
径向渐变（radial-gradient）：从中心向四周的渐变，比如background: radial-gradient(red, blue);，表示从中心红色向四周蓝色的径向渐变。

（二）阴影（box-shadow、text-shadow）

用于给元素或文本添加阴影效果，增强视觉层次感。

box-shadow：给元素添加阴影，语法为box-shadow: 水平偏移垂直偏移模糊度阴影大小阴影颜色;，比如box-shadow: 0 2px 4px rgba(0,0,0,0.1);，表示轻微的阴影效果；
text-shadow：给文本添加阴影，语法和box-shadow类似，比如text-shadow: 1px 1px 2px #333;，让文本更有立体感。

（三）过渡（transition）

用于实现元素样式的平滑过渡（比如鼠标悬停时的颜色变化、尺寸变化），让动画效果更流畅，无需编写复杂的动画代码。

核心语法：transition: 过渡属性过渡时间过渡速度;，比如transition: all 0.3s ease;，表示所有样式变化都将在0.3秒内平滑过渡，ease表示过渡速度先慢后快。

（四）动画（animation）

用于实现更复杂的动画效果（比如旋转、移动、缩放），需要先定义动画关键帧（@keyframes），再给元素应用动画。

核心要点：先通过@keyframes 动画名 { ... } 定义动画的关键帧（开始状态和结束状态），再给元素设置animation属性，指定动画名、动画时间、动画次数等。

十、CSS新手避坑指南

零基础学习CSS，很容易踩一些基础坑，记住以下几点，避免浪费时间，提升学习效率：

避免样式不生效：检查选择器是否正确（比如类选择器漏写"."、id选择器漏写"#"、后代选择器漏写空格）；检查样式属性和属性值是否匹配（比如text-align写成textAlign，CSS区分大小写）；检查CSS引入路径是否正确（外链式重点）；检查元素是否被其他样式覆盖（优先级问题）。
避免宽高计算错误：统一给所有元素设置box-sizing: border-box;，此时width/height会包含padding和border，无需手动计算总宽高，避免布局错乱。
避免优先级混乱：少用行内式，少用"!important"，尽量用类选择器实现样式复用，遇到样式冲突时，先检查选择器优先级顺序，再调整样式编写顺序。
避免浏览器兼容性问题：新手优先使用常用属性（本文讲解的所有属性），避免使用冷门属性；测试时优先用Chrome浏览器，兼容性更稳定；部分CSS3新特性需要添加浏览器前缀（比如-webkit-、-moz-），确保在不同浏览器中正常显示。
避免只看不动手：CSS的核心是实操，每学一个属性、一个选择器，都要动手写代码测试，哪怕是简单的示例，亲手运行才能记住，光看教程很难真正掌握。
避免代码不规范：CSS代码建议缩进对齐，每个样式声明单独一行，添加必要的注释，便于后续修改和维护；类名、id名建议语义化（比如nav表示导航、content表示内容），避免使用无意义的名称（比如box1、box2）。

十一、CSS学习建议与进阶方向

（一）新手学习建议

循序渐进，先掌握基础：先学好核心认知、引入方式、基础语法和常用属性，再学习布局、伪类伪元素，最后学习响应式和CSS3新特性，不要急于求成；
多动手实操：每学一个知识点，就写一个简单的示例，测试样式效果，遇到问题及时调试（利用浏览器开发者工具F12，查看样式生效情况）；
多模仿、多练习：找一些简单的静态网页，模仿其样式编写CSS，逐步提升实战能力；
整理笔记：将常用的属性、选择器、布局技巧整理成笔记，便于后续查阅和复习；
遇到问题多排查：样式不生效时，先检查选择器、属性、引入路径，再检查优先级和布局问题，逐步排查，培养调试能力。

（二）进阶方向

高级选择器：子选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~）、属性选择器（[attr]）等，提升元素定位的精准度；
高级布局：Flex布局（重点）、Grid布局，这两种布局是现代前端开发的主流，比浮动布局更简洁、更灵活，能实现复杂的布局效果；
响应式设计：深入学习媒体查询，结合Flex、Grid布局，实现适配手机、平板、电脑的响应式网页；
CSS3高级特性：深入学习动画、过渡、渐变、阴影，结合JavaScript，实现更丰富的交互效果；
CSS预处理器：学习Sass、Less等预处理器，简化CSS代码编写，提升开发效率；
CSS框架：学习Bootstrap、Tailwind CSS等主流CSS框架，快速搭建美观、响应式的网页。

最后提醒：CSS学习没有捷径，多写、多测、多修改，遇到问题时，打开浏览器开发者工具（F12）查看样式，慢慢就能熟练掌握。坚持练习，你就能用CSS打造出自己喜欢的网页样式，为后续学习JavaScript、前端框架打下坚实的基础！