CSS基础学习

当然可以！很高兴你对CSS学习充满热情。以下是一份更为详尽的零基础CSS教程，涵盖CSS的所有基础操作，并配有丰富的代码片段和详细讲解，帮助你全面掌握CSS的核心概念和应用。教程将包括目录跳转，以便你可以方便地导航到感兴趣的部分。

什么是CSS？
CSS的基本语法
将CSS应用到HTML中
CSS选择器
CSS颜色与背景
- 5.1 颜色表示法
- 5.2 背景属性
CSS文本样式
CSS盒模型
CSS布局
响应式设计
CSS过渡与动画
CSS变量（自定义属性）
CSS预处理器简介
CSS最佳实践
实战项目：创建美观的个人简介网页
学习资源推荐
总结

1. 什么是CSS？

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML文档外观和格式的样式表语言。它允许开发者分离内容与样式，通过定义样式规则来控制网页的布局、颜色、字体、间距等视觉表现。

CSS的作用

美化网页：通过设置颜色、字体、边框等属性，使网页更加美观。
布局控制：定义元素的位置、大小、排列方式，实现复杂的网页布局。
响应式设计：适应不同设备和屏幕尺寸，提供良好的用户体验。
提高维护性：样式集中管理，便于修改和维护。

CSS与HTML的关系

HTML负责网页的结构和内容。
CSS负责网页的样式和布局。
JavaScript负责网页的交互和动态效果。

2. CSS的基本语法

CSS由选择器和声明块组成，用于指定要应用样式的HTML元素及其样式属性。

2.1 选择器

选择器用于指定应用样式的HTML元素。常见的选择器有元素选择器、类选择器、ID选择器等。

2.2 声明块

声明块包含一对大括号 {}，其中包含一个或多个样式声明。每个声明由属性和属性值组成，使用冒号 : 分隔，声明之间用分号 ; 结束。

2.3 基本语法结构

选择器 {
    属性1: 属性值1;
    属性2: 属性值2;
    /* 更多属性 */
}

2.4 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS基本语法示例</title>
    <style>
        /* 选择所有段落元素 */
        p {
            color: blue; /* 设置文本颜色为蓝色 */
            font-size: 16px; /* 设置字体大小为16像素 */
        }
    </style>
</head>
<body>
    <p>这是一个蓝色的段落。</p>
</body>
</html>

解释：

选择器：p，选择所有<p>元素。
属性1：color，设置文本颜色。
属性值1：blue，蓝色。
属性2：font-size，设置字体大小。
属性值2：16px，16像素。

3. 将CSS应用到HTML中

CSS可以通过三种方式应用到HTML文档中：内联样式、内部样式表和外部样式表。推荐使用外部样式表，以实现样式与内容的分离，增强代码的可维护性。

3.1 内联样式

内联样式直接在HTML元素的style属性中定义样式。这种方法适用于少量的样式调整，但不利于维护和复用。

语法

<元素 style="属性1: 属性值1; 属性2: 属性值2;">内容</元素>

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内联样式示例</title>
</head>
<body>
    <p style="color: red; font-weight: bold;">这是一个红色且加粗的段落。</p>
</body>
</html>

注意：内联样式会覆盖内部样式表和外部样式表中相同属性的设置，因此应谨慎使用。

3.2 内部样式表

内部样式表位于HTML文档的<head>部分，使用<style>标签定义。这种方法适用于单个HTML文件的样式管理。

语法

<head>
    <style>
        /* CSS规则 */
        选择器 {
            属性: 值;
        }
    </style>
</head>

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>这是一个绿色且居中的标题</h1>
</body>
</html>

3.3 外部样式表

外部样式表将CSS代码写在独立的.css文件中，通过<link>标签引入。这种方法适用于多个HTML文件共享同一套样式，便于维护和管理。

语法

<head>
    <link rel="stylesheet" href="styles.css">
</head>

示例

styles.css

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: purple;
    text-align: left;
}

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>这是一个紫色且左对齐的标题</h1>
    <p>这是一个段落，背景色为浅灰色。</p>
</body>
</html>

优势：

代码复用：多个HTML文件可以共享同一个CSS文件。
维护方便：只需修改一个CSS文件，即可更新所有关联的网页样式。
清晰结构：样式与内容分离，代码更易读、易管理。

4. CSS选择器

选择器用于选择要应用样式的HTML元素。掌握各种选择器的使用，可以更高效地控制网页样式。

4.1 基本选择器

4.1.1 元素选择器

选择所有指定类型的HTML元素。

p {
    color: blue;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素选择器示例</title>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是一个蓝色的段落。</p>
    <p>这是另一个蓝色的段落。</p>
</body>
</html>

4.1.2 类选择器

选择具有指定类名的元素。类选择器使用点号.表示。

.highlight {
    background-color: yellow;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>类选择器示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="highlight">这是一个高亮显示的段落。</p>
    <p>这是一个普通的段落。</p>
</body>
</html>

注意：一个元素可以拥有多个类，类之间用空格分隔。

<p class="highlight important">这是一个高亮且重要的段落。</p>

4.1.3 ID选择器

选择具有指定ID的元素。ID选择器使用井号#表示。每个ID在页面中应唯一。

#header {
    background-color: gray;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ID选择器示例</title>
    <style>
        #header {
            background-color: gray;
            color: white;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="header">这是页头</div>
    <p>这是一个段落。</p>
</body>
</html>

4.1.4 通用选择器

选择所有元素。通用选择器使用星号*表示。

* {
    margin: 0;
    padding: 0;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>通用选择器示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        p {
            padding: 10px;
            background-color: white;
            margin: 10px;
        }
    </style>
</head>
<body>
    <p>这是一个应用了通用选择器的段落。</p>
</body>
</html>

注意：通用选择器可能会影响页面性能和特定元素的默认样式，应谨慎使用。

4.2 组合选择器

组合选择器允许你更精确地选择元素，通过组合多个选择器来限定目标元素。

4.2.1 后代选择器

选择某元素的所有后代元素，不限层级。

div p {
    color: green;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>后代选择器示例</title>
    <style>
        div p {
            color: green;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个绿色的段落。</p>
        <section>
            <p>这是另一个绿色的段落。</p>
        </section>
    </div>
    <p>这是一个默认颜色的段落。</p>
</body>
</html>

4.2.2 子元素选择器

选择某元素的直接子元素。

ul > li {
    list-style-type: square;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器示例</title>
    <style>
        ul > li {
            list-style-type: square;
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>直接子元素 - 项目 1</li>
        <li>直接子元素 - 项目 2
            <ul>
                <li>嵌套子元素 - 项目 2.1</li>
                <li>嵌套子元素 - 项目 2.2</li>
            </ul>
        </li>
        <li>直接子元素 - 项目 3</li>
    </ul>
</body>
</html>

解释：只有<ul>的直接子元素<li>会应用样式，嵌套的<li>不受影响。

4.2.3 相邻兄弟选择器

选择紧接在某元素之后的兄弟元素。

h2 + p {
    margin-top: 10px;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器示例</title>
    <style>
        h2 + p {
            margin-top: 10px;
            color: orange;
        }
    </style>
</head>
<body>
    <h2>标题 1</h2>
    <p>紧接在标题 1 之后的段落，应用了样式。</p>
    <p>这是另一个段落，没有应用样式。</p>
</body>
</html>

解释：只有紧接在<h2>之后的第一个<p>会应用样式，其他段落不受影响。

4.2.4 通用兄弟选择器

选择在某元素之后的所有兄弟元素。

h2 ~ p {
    color: red;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟选择器示例</title>
    <style>
        h2 ~ p {
            color: red;
        }
    </style>
</head>
<body>
    <h2>标题 1</h2>
    <p>这是第一个段落，应用了样式。</p>
    <p>这是第二个段落，也应用了样式。</p>
    <h2>标题 2</h2>
    <p>这是第三个段落，不应用样式。</p>
</body>
</html>

解释：所有紧随在<h2>之后的<p>元素都会应用样式，但<h2>之后的元素如<div>不受影响。

4.3 属性选择器

属性选择器根据元素的属性或属性值选择元素。

4.3.1 基本属性选择器

选择具有特定属性的元素。

a[href] {
    color: blue;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>属性选择器示例</title>
    <style>
        a[href] {
            color: blue;
            text-decoration: none;
        }
        a[href^="https"] {
            color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.example.com">这是一个HTTPS链接</a><br>
    <a href="http://www.example.com">这是一个HTTP链接</a><br>
    <a>这是一个没有href属性的链接</a>
</body>
</html>

解释：

a[href]：选择所有具有href属性的<a>元素。
a[href^="https"]：选择所有href属性值以https开头的<a>元素。

4.3.2 属性值包含选择器

=：精确匹配属性值。
~=：匹配属性值中包含指定单词的元素。
|=：匹配属性值以指定值开头，后跟-的元素。
^=：匹配属性值以指定值开头的元素。
$=：匹配属性值以指定值结尾的元素。
*=：匹配属性值中包含指定值的元素。

示例

/* 精确匹配 */
input[type="text"] {
    border: 1px solid #ccc;
}

/* 包含指定单词 */
[class~="highlight"] {
    background-color: yellow;
}

/* 以指定值开头 */
a[href^="https"] {
    color: green;
}

/* 以指定值结尾 */
img[src$=".png"] {
    border: 2px solid red;
}

/* 包含指定值 */
div[class*="container"] {
    padding: 20px;
}

HTML示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>属性值包含选择器示例</title>
    <style>
        input[type="text"] {
            border: 1px solid #ccc;
        }
        [class~="highlight"] {
            background-color: yellow;
        }
        a[href^="https"] {
            color: green;
        }
        img[src$=".png"] {
            border: 2px solid red;
        }
        div[class*="container"] {
            padding: 20px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="这是一个文本输入框"><br><br>
    
    <div class="container highlight">
        这是一个带有类名"container"和"highlight"的`<div>`元素。
    </div><br>
    
    <a href="https://www.secure.com">这是一个HTTPS链接</a><br>
    <a href="http://www.insecure.com">这是一个HTTP链接</a><br><br>
    
    <img src="image.png" alt="PNG图片">
    <img src="image.jpg" alt="JPG图片">
</body>
</html>

4.4 伪类和伪元素

4.4.1 伪类

伪类用于选择处于特定状态的元素，或元素的特定部分。

常见伪类

:hover：当鼠标悬停在元素上时应用样式。
:active：当元素处于激活状态时应用样式（如按钮被点击时）。
:focus：当元素获得焦点时应用样式（如输入框被选中时）。
:nth-child(n)：选择第n个子元素。
:first-child 和 :last-child：选择第一个和最后一个子元素。
:not(selector)：选择不匹配指定选择器的元素。

示例

/* 鼠标悬停时改变背景色 */
button:hover {
    background-color: #45a049;
}

/* 激活状态时改变文本颜色 */
a:active {
    color: red;
}

/* 获得焦点时添加边框 */
input:focus {
    border: 2px solid #4CAF50;
}

/* 选择偶数行 */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* 选择不是第一个子元素的段落 */
p:not(:first-child) {
    color: gray;
}

HTML示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类示例</title>
    <style>
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        a:active {
            color: red;
        }

        input:focus {
            border: 2px solid #4CAF50;
        }

        table {
            width: 50%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        table, th, td {
            border: 1px solid black;
        }

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

        p:not(:first-child) {
            color: gray;
        }
    </style>
</head>
<body>
    <button>点击我</button><br><br>
    
    <a href="#">点击链接（点击时颜色变红）</a><br><br>
    
    <input type="text" placeholder="点击输入框，边框变绿"><br><br>
    
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </table>
    
    <p>这是第一个段落。</p>
    <p>这是第二个段落，颜色为灰色。</p>
</body>
</html>

4.4.2 伪元素

伪元素用于选择元素的特定部分，并对其应用样式。

常见伪元素

::before 和 ::after：在元素内容之前或之后插入内容。
::first-letter 和 ::first-line：选择元素的首字母或首行。
::selection：选择被用户选中的文本部分。

示例

/* 在段落前插入引号 */
.quote::before {
    content: "“";
    font-size: 2em;
    color: #555555;
}

/* 在段落后插入引号 */
.quote::after {
    content: "”";
    font-size: 2em;
    color: #555555;
}

/* 设置首字母样式 */
p::first-letter {
    font-size: 3em;
    font-weight: bold;
    color: #4CAF50;
}

/* 设置选中文本样式 */
::selection {
    background: #4CAF50;
    color: white;
}

HTML示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪元素示例</title>
    <style>
        .quote::before {
            content: "“";
            font-size: 2em;
            color: #555555;
        }

        .quote::after {
            content: "”";
            font-size: 2em;
            color: #555555;
        }

        p::first-letter {
            font-size: 3em;
            font-weight: bold;
            color: #4CAF50;
        }

        ::selection {
            background: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <p class="quote">这是一个引用的段落，通过伪元素在前后添加了引号。</p>
    <p>这是一个普通的段落，首字母被放大和加粗。</p>
</body>
</html>

注意：伪元素前应使用双冒号::，但为了兼容旧版本浏览器，单冒号也可使用。

5. CSS颜色与背景

颜色和背景是网页设计中最基础也是最重要的部分之一。掌握CSS中的颜色表示方法和背景属性，可以为网页赋予生动的视觉效果。

5.1 颜色表示法

CSS中有多种方式表示颜色：

5.1.1 颜色名称

使用预定义的颜色名称，如red、blue、green等。

p {
    color: red;
    background-color: lightblue;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>颜色名称示例</title>
    <style>
        p {
            color: red;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <p>这是一个使用颜色名称的段落。</p>
</body>
</html>

5.1.2 十六进制颜色

以#开头，后面跟随6位或3位的十六进制数。

6位表示：#RRGGBB
3位表示：#RGB（每个数字重复一次）

p {
    color: #FF0000; /* 红色 */
    background-color: #ADD8E6; /* 浅蓝色 */
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>十六进制颜色示例</title>
    <style>
        p {
            color: #FF0000;
            background-color: #ADD8E6;
        }
    </style>
</head>
<body>
    <p>这是一个使用十六进制颜色的段落。</p>
</body>
</html>

5.1.3 RGB颜色

使用红、绿、蓝三种颜色的值表示，每个值在0到255之间。

p {
    color: rgb(255, 0, 0); /* 红色 */
    background-color: rgb(173, 216, 230); /* 浅蓝色 */
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>RGB颜色示例</title>
    <style>
        p {
            color: rgb(255, 0, 0);
            background-color: rgb(173, 216, 230);
        }
    </style>
</head>
<body>
    <p>这是一个使用RGB颜色的段落。</p>
</body>
</html>

5.1.4 RGBA颜色

在RGB基础上增加透明度（Alpha），值在0到1之间。

p {
    color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
    background-color: rgba(173, 216, 230, 0.3); /* 半透明浅蓝色 */
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>RGBA颜色示例</title>
    <style>
        p {
            color: rgba(255, 0, 0, 0.5);
            background-color: rgba(173, 216, 230, 0.3);
        }
    </style>
</head>
<body>
    <p>这是一个使用RGBA颜色的段落，带有透明度。</p>
</body>
</html>

5.1.5 HSL颜色

使用色相、饱和度和亮度表示。

hsl(H, S%, L%)
- H（Hue）：色相，0到360度。
- S（Saturation）：饱和度，0%到100%。
- L（Lightness）：亮度，0%到100%。

p {
    color: hsl(0, 100%, 50%); /* 红色 */
    background-color: hsl(195, 53%, 79%); /* 浅蓝色 */
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HSL颜色示例</title>
    <style>
        p {
            color: hsl(0, 100%, 50%);
            background-color: hsl(195, 53%, 79%);
        }
    </style>
</head>
<body>
    <p>这是一个使用HSL颜色的段落。</p>
</body>
</html>

5.1.6 HSLA颜色

在HSL基础上增加透明度（Alpha）。

p {
    color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
    background-color: hsla(195, 53%, 79%, 0.3); /* 半透明浅蓝色 */
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HSLA颜色示例</title>
    <style>
        p {
            color: hsla(0, 100%, 50%, 0.5);
            background-color: hsla(195, 53%, 79%, 0.3);
        }
    </style>
</head>
<body>
    <p>这是一个使用HSLA颜色的段落，带有透明度。</p>
</body>
</html>

5.2 背景属性

CSS提供了丰富的背景属性，用于设置元素的背景颜色、图片、位置等。

5.2.1 背景颜色

使用background-color属性设置元素的背景颜色。

div {
    background-color: #f0f0f0;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景颜色示例</title>
    <style>
        div {
            background-color: #f0f0f0;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>这是一个带有背景颜色的`<div>`元素。</div>
</body>
</html>

5.2.2 背景图片

使用background-image属性嵌入背景图片。

body {
    background-image: url('background.jpg');
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景图片示例</title>
    <style>
        body {
            background-image: url('background.jpg');
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
    <p>这是一个带有背景图片的页面。</p>
</body>
</html>

5.2.3 背景重复

控制背景图片是否重复以及重复的方式。

background-repeat: 设置背景图片是否重复。
- repeat：默认值，背景图片在水平和垂直方向上重复。
- repeat-x：仅在水平方向上重复。
- repeat-y：仅在垂直方向上重复。
- no-repeat：不重复。

div {
    background-image: url('pattern.png');
    background-repeat: repeat-x;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景重复示例</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-image: url('pattern.png');
            background-repeat: repeat-x;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>这是一个背景图片在水平方向上重复的`<div>`元素。</div>
</body>
</html>

5.2.4 背景定位

设置背景图片的位置。

background-position: 定义背景图片的起始位置。
- 关键字：left、center、right、top、bottom。
- 长度单位或百分比。

body {
    background-image: url('background.jpg');
    background-position: center center;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景定位示例</title>
    <style>
        body {
            background-image: url('background.jpg');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
    <p>这是一个带有居中背景图片的页面。</p>
</body>
</html>

5.2.5 背景大小

控制背景图片的大小和缩放方式。

background-size: 定义背景图片的尺寸。
- auto：保持原始大小。
- cover：覆盖整个元素，保持纵横比。
- contain：使背景图片完全可见，保持纵横比。
- 指定具体的尺寸，如100px 200px。

div {
    background-image: url('background.jpg');
    background-size: cover;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景大小示例</title>
    <style>
        div {
            width: 400px;
            height: 300px;
            background-image: url('background.jpg');
            background-size: cover;
            background-position: center center;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>这是一个背景图片覆盖整个`<div>`元素的示例。</div>
</body>
</html>

5.2.6 背景混合模式

定义背景图片与背景颜色的混合方式。

background-blend-mode: 设置背景图层之间的混合模式。
- 常见值：multiply、screen、overlay、darken、lighten等。

div {
    background-color: rgba(255, 0, 0, 0.5);
    background-image: url('background.jpg');
    background-blend-mode: multiply;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景混合模式示例</title>
    <style>
        div {
            width: 400px;
            height: 300px;
            background-color: rgba(255, 0, 0, 0.5);
            background-image: url('background.jpg');
            background-blend-mode: multiply;
            background-size: cover;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>这是一个带有背景混合模式的`<div>`元素。</div>
</body>
</html>

5.2.7 复合背景属性

可以使用简写属性一次性设置多个背景属性。

body {
    background: url('background.jpg') no-repeat center center / cover #f0f0f0;
}

解释：

background-image: url('background.jpg')
background-repeat: no-repeat
background-position: center center
background-size: cover
background-color: #f0f0f0

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>复合背景属性示例</title>
    <style>
        body {
            background: url('background.jpg') no-repeat center center / cover #f0f0f0;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            color: white;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
</body>
</html>

6. CSS文本样式

文本样式是网页设计中非常重要的一部分，影响着内容的可读性和美观性。CSS提供了多种属性来控制文本的外观。

6.1 字体属性

font-family：定义文本的字体系列。
font-size：设置文本的大小。
font-weight：设置文本的粗细。
font-style：设置文本的样式，如斜体。
line-height：设置文本行高。

示例

p {
    font-family: 'Georgia', serif;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    line-height: 1.6;
}

HTML示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>字体属性示例</title>
    <style>
        p {
            font-family: 'Georgia', serif;
            font-size: 18px;
            font-weight: bold;
            font-style: italic;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <p>这是一个应用了多种字体属性的段落。</p>
</body>
</html>

6.2 文本对齐

text-align：设置文本的水平对齐方式。
- 取值：left、right、center、justify。

p {
    text-align: center;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本对齐示例</title>
    <style>
        p.center {
            text-align: center;
        }
        p.justify {
            text-align: justify;
        }
    </style>
</head>
<body>
    <p class="center">这是一个居中文本的段落。</p>
    <p class="justify">这是一个两端对齐的段落。通过设置text-align属性为justify，可以让文本在每一行的左右两端对齐，从而使段落看起来更加整齐。</p>
</body>
</html>

vertical-align：设置文本的垂直对齐方式，通常用于行内元素或表格单元格。
- 取值：baseline、top、middle、bottom等。

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>垂直对齐示例</title>
    <style>
        .container {
            height: 100px;
            border: 1px solid #ccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">垂直居中的文本</div>
</body>
</html>

6.3 文本装饰

text-decoration：设置文本的装饰，如下划线、删除线等。
- 取值：none、underline、overline、line-through、blink（已弃用）。

a {
    text-decoration: none; /* 去除下划线 */
}

del {
    text-decoration: line-through; /* 删除线 */
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本装饰示例</title>
    <style>
        a {
            text-decoration: none;
            color: blue;
        }
        a:hover {
            text-decoration: underline;
        }
        del {
            text-decoration: line-through;
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">这是一个没有下划线的链接（鼠标悬停时有下划线）</a><br><br>
    <p>这是一个<del>删除的文本</del>。</p>
</body>
</html>

6.4 文本变换

text-transform：设置文本的大小写转换。
- 取值：none、capitalize（首字母大写）、uppercase（全部大写）、lowercase（全部小写）。

p.uppercase {
    text-transform: uppercase;
}

p.capitalize {
    text-transform: capitalize;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本变换示例</title>
    <style>
        p.uppercase {
            text-transform: uppercase;
            color: green;
        }
        p.capitalize {
            text-transform: capitalize;
            color: purple;
        }
    </style>
</head>
<body>
    <p class="uppercase">这是一个全部大写的段落。</p>
    <p class="capitalize">这是一个首字母大写的段落。</p>
</body>
</html>

6.5 文本阴影

text-shadow：为文本添加阴影效果。
- 语法：text-shadow: h-shadow v-shadow blur color;
- 参数：
  - h-shadow：水平阴影偏移量。
  - v-shadow：垂直阴影偏移量。
  - blur（可选）：模糊半径。
  - color：阴影颜色。

h1 {
    text-shadow: 2px 2px 4px #000000;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本阴影示例</title>
    <style>
        h1 {
            text-shadow: 2px 2px 4px #000000;
            color: white;
            background-color: #333333;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>这是一个带有文本阴影的标题</h1>
</body>
</html>

6.6 字符间距和单词间距

letter-spacing：设置字符之间的间距。
word-spacing：设置单词之间的间距。

p {
    letter-spacing: 2px;
    word-spacing: 4px;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>字符间距和单词间距示例</title>
    <style>
        p {
            letter-spacing: 2px;
            word-spacing: 4px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一个设置了字符间距和单词间距的段落。</p>
</body>
</html>

7. CSS盒模型

盒模型是理解CSS布局的基础概念。每个HTML元素都被视为一个矩形盒子，盒模型定义了这个盒子的组成部分及其计算方式。

7.1 盒模型组成

盒模型由四部分组成：

内容区（Content）：显示文本和其他内容。
内边距（Padding）：内容区与边框之间的空白区域。
边框（Border）：围绕内边距和内容的边框。
外边距（Margin）：盒子与其他元素之间的空白区域。

盒模型示意图

---------------------------------
|           Margin              |
|  ---------------------------  |
|  |        Border           |  |
|  |  ---------------------  |  |
|  |  |     Padding        |  |  |
|  |  |  -------------    |  |  |
|  |  |  | Content |    |  |  |
|  |  |  -------------    |  |  |
|  |  |                   |  |  |
|  |  ---------------------  |  |
|  |                         |  |
|  ---------------------------  |
|                                 |
---------------------------------

7.2 盒模型的调整

7.2.1 设置宽度和高度

使用width和height属性设置元素的宽度和高度。

div {
    width: 300px;
    height: 200px;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>宽度和高度示例</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>这是一个设置了宽度和高度的`<div>`元素。</div>
</body>
</html>

7.2.2 设置内边距

使用padding属性设置内容区与边框之间的空白区域。

div {
    padding: 20px; /* 四边内边距相同 */
    padding-top: 10px; /* 上边内边距 */
    padding-right: 15px; /* 右边内边距 */
    padding-bottom: 10px; /* 下边内边距 */
    padding-left: 15px; /* 左边内边距 */
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内边距示例</title>
    <style>
        .box {
            padding: 20px;
            background-color: #e0e0e0;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box">这是一个设置了内边距的`<div>`元素。</div>
</body>
</html>

7.2.3 设置边框

使用border属性设置元素的边框。

div {
    border: 2px solid #000000; /* 2像素实线黑色边框 */
    border-radius: 10px; /* 圆角边框 */
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>边框示例</title>
    <style>
        .box {
            border: 2px solid #000000;
            border-radius: 10px;
            padding: 20px;
            background-color: #f9f9f9;
            width: 300px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="box">这是一个带有边框和圆角的`<div>`元素。</div>
</body>
</html>

7.2.4 设置外边距

使用margin属性设置元素与其他元素之间的空白区域。

div {
    margin: 20px; /* 四边外边距相同 */
    margin-top: 10px; /* 上边外边距 */
    margin-right: 15px; /* 右边外边距 */
    margin-bottom: 10px; /* 下边外边距 */
    margin-left: 15px; /* 左边外边距 */
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外边距示例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: #f9f9f9;
            margin: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box">这是一个带有外边距的`<div>`元素。</div>
    <div class="box">这是另一个带有外边距的`<div>`元素。</div>
</body>
</html>

7.2.5 盒模型示例

综合运用宽度、高度、内边距、边框和外边距。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒模型示例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid #333333;
            margin: 30px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="box">
        这是一个盒模型示例。
    </div>
</body>
</html>

解释：

内容区：200px宽，100px高。
内边距：20px。
边框：5px实线，颜色#333333。
外边距：30px。
实际占用空间：内容区 + 内边距 + 边框 = 200 + 40 (左右内边距) + 10 (左右边框) = 250px宽；100 + 40 (上下内边距) + 10 (上下边框) = 150px高。

7.3 盒模型的盒尺寸（Box Sizing）

默认情况下，CSS的width和height只包含内容区的尺寸，不包括内边距和边框。可以通过设置box-sizing属性改变这一行为。

7.3.1 `box-sizing`属性

content-box（默认）：width和height只包含内容区。
border-box：width和height包含内容区、内边距和边框。

.box-content {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 5px solid #333;
    background-color: #f9f9f9;
}

.box-border {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid #333;
    background-color: #f9f9f9;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒模型尺寸示例</title>
    <style>
        .box-content, .box-border {
            height: 100px;
            margin: 20px;
            float: left;
        }
        .box-content {
            box-sizing: content-box;
            width: 200px;
            padding: 20px;
            border: 5px solid #333;
            background-color: #e0e0e0;
        }
        .box-border {
            box-sizing: border-box;
            width: 200px;
            padding: 20px;
            border: 5px solid #333;
            background-color: #c0c0c0;
        }
    </style>
</head>
<body>
    <div class="box-content">
        Content Box: 实际宽度为 200px + 20px * 2 + 5px * 2 = 250px
    </div>
    <div class="box-border">
        Border Box: 实际宽度为 200px
    </div>
</body>
</html>

解释：

.box-content：宽度为200px，不包括内边距和边框，实际占用宽度250px。
.box-border：宽度为200px，包括内边距和边框，实际内容宽度150px。

8. CSS布局

布局是网页设计中至关重要的部分。掌握各种布局技术，可以帮助你创建响应式、灵活且美观的网页结构。

8.1 流式布局

流式布局是最基础的布局方式，元素按照HTML文档中的顺序依次排列。适用于简单的布局需求。

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>流式布局示例</title>
    <style>
        .container {
            width: 80%;
            margin: auto;
        }
        .header, .footer {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            text-align: center;
        }
        .content {
            background-color: #f1f1f1;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">页头</div>
        <div class="content">
            <p>这是内容区域。</p>
            <p>元素按照顺序排列。</p>
        </div>
        <div class="footer">页脚</div>
    </div>
</body>
</html>

解释：

.container：设置宽度为80%，居中对齐。
.header、.footer：设置背景色、文字颜色、内边距和文本对齐方式。
.content：设置背景色和内边距。

优点：

简单易懂。
适用于线性、顺序排列的内容。

缺点：

不适合复杂布局。
控制元素位置有限。

8.2 浮动布局

浮动布局利用float属性将元素从文档流中浮动到左侧或右侧，实现多列布局。注意，浮动布局可能导致父元素高度塌陷，需要清除浮动。

8.2.1 使用`float`属性

float: left;：将元素浮动到左侧。
float: right;：将元素浮动到右侧。

.left {
    float: left;
    width: 50%;
    background-color: #ffdddd;
}

.right {
    float: right;
    width: 50%;
    background-color: #ddddff;
}

8.2.2 清除浮动

在浮动元素之后添加一个清除浮动的元素，通常使用clear: both;。

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浮动布局示例</title>
    <style>
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden; /* 简单清除浮动 */
        }
        .left {
            float: left;
            width: 48%;
            background-color: #ffdddd;
            padding: 10px;
            margin-right: 4%;
        }
        .right {
            float: left;
            width: 48%;
            background-color: #ddddff;
            padding: 10px;
        }
        /* 清除浮动的方法之一 */
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="left">左侧内容</div>
        <div class="right">右侧内容</div>
    </div>
</body>
</html>

解释：

.left 和 .right：分别浮动到左侧，设置宽度和背景色。
.container：设置宽度和居中，通过overflow: hidden;清除浮动。
.clearfix：通过伪元素清除浮动，确保父元素包含浮动子元素。

优点：

支持多列布局。
兼容性好，适用于旧版本浏览器。

缺点：

浮动元素脱离文档流，可能导致布局问题。
清除浮动需要额外的CSS代码。
不支持复杂的二维布局。

8.3 定位

定位属性允许你精确地控制元素的位置。CSS提供了几种定位方式：静态定位（默认）、相对定位、绝对定位和固定定位。

8.3.1 静态定位（Static）

默认的定位方式，元素按文档流排列。

div {
    position: static;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>静态定位示例</title>
    <style>
        .static-box {
            position: static;
            background-color: #f0f0f0;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="static-box">这是一个静态定位的`<div>`元素。</div>
</body>
</html>

8.3.2 相对定位（Relative）

元素相对于其正常位置进行偏移，保留其在文档流中的位置。

.relative {
    position: relative;
    top: 10px;
    left: 20px;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>相对定位示例</title>
    <style>
        .relative-box {
            position: relative;
            top: 20px;
            left: 30px;
            background-color: #ffebcd;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="relative-box">这是一个相对定位的`<div>`元素。</div>
</body>
</html>

解释：

偏移：top: 20px;和left: 30px;将元素向下和向右偏移。
保留空间：元素的原始位置仍被占据，不会影响其他元素。

8.3.3 绝对定位（Absolute）

元素相对于最近的已定位祖先元素进行定位，脱离文档流。

.absolute {
    position: absolute;
    top: 50px;
    right: 30px;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>绝对定位示例</title>
    <style>
        .container {
            position: relative; /* 作为绝对定位的参照 */
            width: 400px;
            height: 300px;
            background-color: #e0e0e0;
            border: 1px solid #ccc;
        }
        .absolute-box {
            position: absolute;
            top: 50px;
            right: 30px;
            background-color: #add8e6;
            padding: 10px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="absolute-box">这是一个绝对定位的`<div>`元素。</div>
    </div>
</body>
</html>

解释：

.container：设置position: relative;作为绝对定位的参照。
.absolute-box：设置position: absolute;，相对于.container定位。

8.3.4 固定定位（Fixed）

元素相对于浏览器窗口进行定位，固定在指定位置，即使页面滚动也不移动。

.fixed {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: yellow;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>固定定位示例</title>
    <style>
        .fixed-box {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #90ee90;
            padding: 10px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="fixed-box">这是一个固定定位的`<div>`元素。</div>
    <p>滚动页面，固定定位的元素始终保持在浏览器窗口的右下角。</p>
    <div style="height: 1500px;"></div>
</body>
</html>

解释：

.fixed-box：无论页面如何滚动，始终固定在浏览器窗口的右下角。

8.4 Flexbox布局

Flexbox（弹性盒布局）是一种现代的CSS布局模式，提供了高效的方式来排列、对齐和分配空间。Flexbox适用于一维布局（即行或列）。

8.4.1 基本概念

容器（Flex Container）：定义为display: flex;的父元素。
项目（Flex Items）：容器内的子元素。

8.4.2 主要属性

容器属性：
- flex-direction：定义主轴方向（行、列等）。
- justify-content：沿主轴对齐项目。
- align-items：沿交叉轴对齐项目。
- flex-wrap：控制项目是否换行。
项目属性：
- flex-grow：定义项目的放大比例。
- flex-shrink：定义项目的缩小比例。
- flex-basis：定义项目的初始大小。
- align-self：允许单个项目有不同于容器的对齐方式。

8.4.3 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flexbox布局示例</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row; /* 水平方向 */
            justify-content: space-around; /* 主轴上的对齐 */
            align-items: center; /* 交叉轴上的对齐 */
            height: 200px;
            background-color: #f0f0f0;
            padding: 10px;
        }
        .flex-item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 10px;
            font-size: 1.2em;
            text-align: center;
            flex: 1; /* 允许项目放大 */
            transition: background-color 0.3s;
        }
        .flex-item:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">项目 1</div>
        <div class="flex-item">项目 2</div>
        <div class="flex-item">项目 3</div>
    </div>
</body>
</html>

解释：

.flex-container：
- display: flex;：启用Flexbox布局。
- flex-direction: row;：主轴方向为水平方向。
- justify-content: space-around;：主轴上项目之间的间隔相等。
- align-items: center;：交叉轴上项目居中对齐。
.flex-item：
- flex: 1;：所有项目均等分配剩余空间。
- transition：添加过渡效果，鼠标悬停时背景色变化。

更多Flexbox属性示例

垂直布局

.flex-container-column {
    display: flex;
    flex-direction: column; /* 垂直方向 */
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
}
.flex-item {
    background-color: #ff6347;
    color: white;
    padding: 15px;
    margin: 5px;
    width: 80%;
    text-align: center;
}

HTML

<div class="flex-container-column">
    <div class="flex-item">项目 A</div>
    <div class="flex-item">项目 B</div>
    <div class="flex-item">项目 C</div>
</div>

换行

.flex-container-wrap {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between;
    background-color: #f0f0f0;
    padding: 10px;
}
.flex-item {
    flex: 1 1 30%; /* 放大、缩小、基础宽度30% */
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    margin: 10px;
    text-align: center;
}

HTML

<div class="flex-container-wrap">
    <div class="flex-item">项目 1</div>
    <div class="flex-item">项目 2</div>
    <div class="flex-item">项目 3</div>
    <div class="flex-item">项目 4</div>
    <div class="flex-item">项目 5</div>
</div>

8.5 Grid布局

Grid（网格布局）是CSS的一种二维布局系统，允许你在水平和垂直方向上同时排列元素。Grid适用于复杂的布局需求。

8.5.1 基本概念

容器（Grid Container）：定义为display: grid;的父元素。
项目（Grid Items）：容器内的子元素。

8.5.2 主要属性

容器属性：
- grid-template-columns 和 grid-template-rows：定义列和行的数量及尺寸。
- gap：设置网格间隙。
- justify-items 和 align-items：对齐项目。
- grid-template-areas：定义网格区域。
项目属性：
- grid-column 和 grid-row：定义项目在网格中的位置和跨度。
- grid-area：定义项目所在的网格区域。

8.5.3 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Grid布局示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 三列，等分 */
            grid-template-rows: 100px 100px; /* 两行，各100px */
            gap: 10px;
            background-color: #f0f0f0;
            padding: 10px;
        }
        .grid-item {
            background-color: #ff6347;
            color: white;
            text-align: center;
            line-height: 100px;
            font-size: 1.2em;
        }
        .span-2 {
            grid-column: span 2; /* 跨两列 */
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item span-2">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>

解释：

.grid-container：
- display: grid;：启用Grid布局。
- grid-template-columns: repeat(3, 1fr);：创建三列，每列占等分宽度。
- grid-template-rows: 100px 100px;：创建两行，每行高度100px。
- gap: 10px;：设置网格间隙为10px。
.grid-item：
- 设置背景色、文字颜色、对齐方式和行高。
.span-2：
- grid-column: span 2;：使项目跨两列。

8.5.4 网格区域

通过grid-template-areas定义网格区域，并将项目放置到指定区域。

.grid-container-areas {
    display: grid;
    grid-template-areas:
        'header header'
        'sidebar main'
        'footer footer';
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 60px 1fr 40px;
    gap: 10px;
}

.header {
    grid-area: header;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    line-height: 60px;
}

.sidebar {
    grid-area: sidebar;
    background-color: #ff6347;
    color: white;
    padding: 10px;
}

.main {
    grid-area: main;
    background-color: #add8e6;
    padding: 10px;
}

.footer {
    grid-area: footer;
    background-color: #333333;
    color: white;
    text-align: center;
    line-height: 40px;
}

HTML

<div class="grid-container-areas">
    <div class="header">页头</div>
    <div class="sidebar">侧边栏</div>
    <div class="main">主要内容</div>
    <div class="footer">页脚</div>
</div>

解释：

grid-template-areas：定义网格区域的名称和排列。
.header、.sidebar、.main、.footer：通过grid-area将项目放置到指定的网格区域。

9. 响应式设计

响应式设计（Responsive Design）旨在使网页在各种设备和屏幕尺寸上都有良好的显示效果。通过使用媒体查询和灵活的布局，可以实现自适应不同环境的网页。

9.1 媒体查询

媒体查询允许根据设备的特性（如屏幕宽度、分辨率）应用不同的CSS规则。

9.1.1 基本语法

@media (条件) {
    /* CSS规则 */
}

条件可以包括max-width、min-width、max-height、min-height等。

9.1.2 示例

/* 默认样式 */
.container {
    width: 100%;
    background-color: lightblue;
}

/* 屏幕宽度小于800px时应用 */
@media (max-width: 800px) {
    .container {
        background-color: lightgreen;
    }
}

/* 屏幕宽度小于600px时应用 */
@media (max-width: 600px) {
    .container {
        background-color: lightcoral;
    }
}

HTML示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>媒体查询示例</title>
    <style>
        /* 默认样式 */
        .container {
            width: 80%;
            margin: auto;
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }

        /* 屏幕宽度小于800px时 */
        @media (max-width: 800px) {
            .container {
                background-color: lightgreen;
            }
        }

        /* 屏幕宽度小于600px时 */
        @media (max-width: 600px) {
            .container {
                background-color: lightcoral;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>调整浏览器窗口大小，观察背景颜色的变化。</h1>
    </div>
</body>
</html>

解释：

当浏览器窗口宽度小于800px时，.container的背景颜色变为浅绿色。
当宽度小于600px时，背景颜色变为浅珊瑚色。

9.1.3 多条件媒体查询

可以组合多个条件，使用and、or等逻辑运算符。

@media (min-width: 600px) and (max-width: 800px) {
    .container {
        background-color: lightgreen;
    }
}

示例

/* 仅在屏幕宽度介于600px和800px之间时应用 */
@media (min-width: 600px) and (max-width: 800px) {
    .container {
        background-color: lightgreen;
    }
}

9.2 弹性布局

弹性布局结合了Flexbox和Grid的优势，使用百分比宽度、相对单位等，使布局在不同设备上自适应。

9.2.1 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应式弹性布局示例</title>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap; /* 允许换行 */
            justify-content: space-between;
            background-color: #f0f0f0;
            padding: 10px;
        }
        .flex-item {
            flex: 1 1 30%; /* 允许放大，允许缩小，基础宽度30% */
            background-color: #ff6347;
            color: white;
            margin: 10px;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        .flex-item:hover {
            background-color: #e5533d;
        }

        /* 媒体查询：屏幕宽度小于600px时 */
        @media (max-width: 600px) {
            .flex-item {
                flex: 1 1 100%; /* 全宽 */
            }
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">项目 1</div>
        <div class="flex-item">项目 2</div>
        <div class="flex-item">项目 3</div>
        <div class="flex-item">项目 4</div>
        <div class="flex-item">项目 5</div>
    </div>
</body>
</html>

解释：

.flex-container：启用Flexbox布局，允许项目换行。
.flex-item：
- flex: 1 1 30%;：项目的放大比例为1，缩小比例为1，基础宽度为30%。
- 鼠标悬停时，背景颜色变化。
媒体查询：当屏幕宽度小于600px时，所有.flex-item的宽度调整为100%，即全宽显示。

效果：

宽屏设备：项目以三列排列，每列约占30%宽度。
窄屏设备：项目以单列排列，宽度为100%。

9.3 视口单位

视口单位基于视口的大小，用于实现响应式设计。

vw：视口宽度的百分比。
- 1vw = 1% 视口宽度。
vh：视口高度的百分比。
- 1vh = 1% 视口高度。
vmin：视口宽度和高度中较小的一个的百分比。
vmax：视口宽度和高度中较大的一个的百分比。

示例

header {
    height: 10vh; /* 高度为视口高度的10% */
    background-color: #4CAF50;
    color: white;
    text-align: center;
    line-height: 10vh;
    font-size: 2em;
}

p {
    font-size: 2vw; /* 字体大小为视口宽度的2% */
}

HTML示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>视口单位示例</title>
    <style>
        header {
            height: 10vh;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            line-height: 10vh;
            font-size: 2em;
        }
        p {
            font-size: 2vw;
            padding: 20px;
        }
    </style>
</head>
<body>
    <header>这是一个使用视口单位的页头</header>
    <p>这是一个使用视口单位的段落。字体大小会根据视口宽度自动调整。</p>
</body>
</html>

解释：

height: 10vh;：页头的高度为视口高度的10%。
font-size: 2vw;：段落的字体大小为视口宽度的2%。

优势：

灵活性：元素尺寸随视口变化而自动调整。
简洁性：无需复杂的媒体查询即可实现部分响应式效果。

10. CSS过渡与动画

CSS过渡与动画可以为网页元素添加动态效果，提高用户体验和视觉吸引力。

10.1 CSS过渡

过渡允许属性值在一段时间内平滑地从一个值变化到另一个值。

10.1.1 基本语法

元素 {
    transition: 属性 过渡时间 过渡曲线 延迟时间;
}

属性：需要过渡的CSS属性。
过渡时间：过渡的持续时间（如2s）。
过渡曲线：过渡的速度曲线（如ease、linear）。
延迟时间：过渡开始前的等待时间（可选）。

10.1.2 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS过渡示例</title>
    <style>
        .transition-box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: background-color 2s, width 2s;
        }

        .transition-box:hover {
            background-color: red;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="transition-box"></div>
</body>
</html>

解释：

.transition-box：
- 初始状态：100px宽，100px高，蓝色背景。
- transition: background-color 2s, width 2s;：背景色和宽度在2秒内平滑过渡。
:hover状态：
- 背景色变为红色，宽度变为200px。

10.1.3 多属性过渡

可以在一个声明中设置多个属性的过渡。

div {
    transition: all 0.5s ease;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多属性过渡示例</title>
    <style>
        .transition-box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: all 0.5s ease;
        }

        .transition-box:hover {
            background-color: green;
            width: 150px;
            height: 150px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="transition-box"></div>
</body>
</html>

解释：

transition: all 0.5s ease;：所有可过渡的属性在0.5秒内以缓和曲线过渡。
鼠标悬停时，背景色变为绿色，宽高变为150px，并旋转45度。

10.2 CSS动画

动画允许你定义关键帧，使元素在多个状态之间过渡，创建复杂的动态效果。

10.2.1 关键帧

使用@keyframes定义动画的各个阶段。

@keyframes animation-name {
    0% {
        /* 起始状态 */
    }
    50% {
        /* 中间状态 */
    }
    100% {
        /* 结束状态 */
    }
}

10.2.2 应用动画

使用animation属性将关键帧应用到元素上。

元素 {
    animation: animation-name 持续时间 计次 方向 延迟 时间函数;
}

持续时间：动画的总时间（如3s）。
计次：动画播放的次数（如infinite表示无限循环）。
方向：动画播放的方向（如alternate交替播放）。
延迟：动画开始前的等待时间。
时间函数：动画的速度曲线（如ease-in-out）。

10.2.3 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS动画示例</title>
    <style>
        @keyframes slide {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(200px);
            }
            100% {
                transform: translateX(0);
            }
        }

        .animated-box {
            width: 100px;
            height: 100px;
            background-color: green;
            animation: slide 4s infinite ease-in-out;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="animated-box"></div>
</body>
</html>

解释：

@keyframes slide：定义动画名称为slide，元素在水平方向上移动。
.animated-box：
- animation: slide 4s infinite ease-in-out;：应用slide动画，持续时间4秒，无限循环，缓和曲线。

10.2.4 多动画

一个元素可以同时应用多个动画，动画之间用逗号分隔。

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes changeColor {
    0% { background-color: blue; }
    100% { background-color: red; }
}

div {
    animation: rotate 2s linear infinite, changeColor 4s ease-in-out infinite;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多动画示例</title>
    <style>
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes changeColor {
            0% { background-color: blue; }
            100% { background-color: red; }
        }

        .multi-animated-box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: rotate 2s linear infinite, changeColor 4s ease-in-out infinite;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="multi-animated-box"></div>
</body>
</html>

解释：

元素同时进行旋转和颜色变化的动画。
rotate：每2秒旋转360度，无限循环，线性曲线。
changeColor：每4秒从蓝色变为红色，无限循环，缓和曲线。

10.3 动画关键帧

关键帧定义了动画的多个状态，使动画更为复杂和细腻。

10.3.1 定义关键帧

使用@keyframes定义不同阶段的样式。

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-150px);
    }
    60% {
        transform: translateY(-75px);
    }
}

10.3.2 应用关键帧

将定义好的关键帧应用到元素上。

.bouncing-ball {
    width: 50px;
    height: 50px;
    background-color: #ff6347;
    border-radius: 50%;
    position: relative;
    animation: bounce 2s infinite;
}

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>关键帧动画示例</title>
    <style>
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-150px);
            }
            60% {
                transform: translateY(-75px);
            }
        }

        .bouncing-ball {
            width: 50px;
            height: 50px;
            background-color: #ff6347;
            border-radius: 50%;
            position: relative;
            animation: bounce 2s infinite;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="bouncing-ball"></div>
</body>
</html>

解释：

@keyframes bounce：定义一个弹跳动画，元素在不同时间点有不同的垂直位置。
.bouncing-ball：
- animation: bounce 2s infinite;：应用bounce动画，持续时间2秒，无限循环。

多关键帧动画

可以在关键帧中定义更多阶段，创造更复杂的动画效果。

@keyframes complex-animation {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: scale(1.5) rotate(90deg);
        opacity: 0.75;
    }
    50% {
        transform: scale(1) rotate(180deg);
        opacity: 0.5;
    }
    75% {
        transform: scale(0.5) rotate(270deg);
        opacity: 0.75;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

.complex-animated-box {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    animation: complex-animation 4s infinite ease-in-out;
    margin: 50px auto;
}

HTML示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>复杂关键帧动画示例</title>
    <style>
        @keyframes complex-animation {
            0% {
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }
            25% {
                transform: scale(1.5) rotate(90deg);
                opacity: 0.75;
            }
            50% {
                transform: scale(1) rotate(180deg);
                opacity: 0.5;
            }
            75% {
                transform: scale(0.5) rotate(270deg);
                opacity: 0.75;
            }
            100% {
                transform: scale(1) rotate(360deg);
                opacity: 1;
            }
        }

        .complex-animated-box {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            animation: complex-animation 4s infinite ease-in-out;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="complex-animated-box"></div>
</body>
</html>

解释：

complex-animation：定义了一个同时改变尺寸、旋转和透明度的复杂动画。
.complex-animated-box：
- animation: complex-animation 4s infinite ease-in-out;：应用复杂动画，持续时间4秒，无限循环，缓和曲线。

11. CSS变量（自定义属性）

CSS变量（自定义属性）是一种在CSS中定义可复用值的方式，增强了CSS的灵活性和可维护性。通过使用变量，可以减少重复代码，提高样式的统一性。

11.1 定义和使用变量

定义变量

使用--前缀定义变量，通常在:root选择器中定义全局变量。

:root {
    --primary-color: #4CAF50;
    --secondary-color: #ff6347;
    --font-size: 16px;
}

使用变量

使用var()函数引用变量。

p {
    color: var(--primary-color);
    font-size: var(--font-size);
}

.button {
    background-color: var(--secondary-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS变量示例</title>
    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #ff6347;
            --font-size: 16px;
            --padding: 10px;
        }

        body {
            font-family: Arial, sans-serif;
            font-size: var(--font-size);
            background-color: #f9f9f9;
            color: #333333;
        }

        h1 {
            color: var(--primary-color);
            text-align: center;
        }

        p {
            margin: 20px;
        }

        .button {
            background-color: var(--secondary-color);
            color: white;
            padding: var(--padding) 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .button:hover {
            background-color: darken(var(--secondary-color), 10%);
        }
    </style>
</head>
<body>
    <h1>这是一个使用CSS变量的标题</h1>
    <p>这是一个段落，字体大小由CSS变量控制。</p>
    <button class="button">点击我</button>
</body>
</html>

解释：

:root：全局变量定义。
var(--variable-name)：引用变量。
darken()：注意：CSS本身不支持darken函数，这是Sass中的功能。如果要在纯CSS中实现，可以使用RGBA或HSL颜色值手动调整颜色。

11.2 变量的作用域

CSS变量的作用域取决于它们的定义位置。

全局变量：在:root选择器中定义，适用于整个文档。
局部变量：在特定选择器中定义，仅适用于该选择器及其子元素。

:root {
    --main-color: blue;
}

.container {
    --main-color: green;
}

.container p {
    color: var(--main-color); /* 绿色 */
}

p {
    color: var(--main-color); /* 蓝色 */
}

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>变量作用域示例</title>
    <style>
        :root {
            --main-color: blue;
        }

        .container {
            --main-color: green;
            background-color: #f0f0f0;
            padding: 20px;
        }

        .container p {
            color: var(--main-color);
        }

        p {
            color: var(--main-color);
        }
    </style>
</head>
<body>
    <p>这是一个使用全局变量的段落，颜色为蓝色。</p>
    <div class="container">
        <p>这是一个使用局部变量的段落，颜色为绿色。</p>
    </div>
</body>
</html>

11.3 变量的优势

减少重复代码：使用变量代替重复的值，便于维护。
统一管理：集中管理主题颜色、字体大小等常用值。
动态调整：通过JavaScript可以动态修改CSS变量，实现主题切换等功能。
增强可读性：变量名称具有语义，代码更易读懂。

示例

:root {
    --primary-color: #4CAF50;
    --secondary-color: #ff6347;
    --font-size-base: 16px;
    --font-size-large: 20px;
}

body {
    font-size: var(--font-size-base);
    color: var(--primary-color);
}

h1 {
    font-size: var(--font-size-large);
    color: var(--secondary-color);
}

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS变量优势示例</title>
    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #ff6347;
            --font-size-base: 16px;
            --font-size-large: 20px;
        }

        body {
            font-size: var(--font-size-base);
            color: var(--primary-color);
            background-color: #f9f9f9;
            margin: 20px;
        }

        h1 {
            font-size: var(--font-size-large);
            color: var(--secondary-color);
            text-align: center;
        }

        p {
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>CSS变量的优势</h1>
    <p>通过使用CSS变量，我们可以统一管理颜色和字体大小，减少重复代码，提高样式的可维护性和可读性。</p>
</body>
</html>

12. CSS预处理器简介

CSS预处理器是一种扩展CSS的脚本语言，提供变量、嵌套、混合等高级功能，提高CSS代码的可维护性和复用性。常见的CSS预处理器有Sass、Less和Stylus。

12.1 Sass

特点：支持变量、嵌套、混合（Mixins）、继承等。
语法：支持两种语法，.sass（缩进语法）和.scss（类似CSS语法）。

12.1.1 示例（SCSS语法）

$primary-color: #333;
$secondary-color: #4CAF50;
$font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;

body {
    font-family: $font-stack;
    color: $primary-color;

    .container {
        width: 80%;
        margin: auto;

        .header {
            background-color: lighten($primary-color, 20%);
            padding: 20px;
        }

        .button {
            @include button-style($secondary-color);
        }
    }
}

@mixin button-style($color) {
    background-color: $color;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;

    &:hover {
        background-color: darken($color, 10%);
    }
}

解释：

变量：$primary-color、$secondary-color、$font-stack。
嵌套：在body中嵌套.container，在.container中嵌套.header和.button。
混合（Mixin）：@mixin button-style($color)定义了一个按钮样式的混合。
包含混合：.button使用@include button-style($secondary-color);应用混合。

12.1.2 编译Sass

Sass需要被编译成标准的CSS才能被浏览器识别。可以使用以下工具进行编译：

命令行工具：通过安装Sass CLI，使用命令sass input.scss output.css进行编译。
集成开发环境（IDE）插件：如VS Code的Live Sass Compiler插件。
构建工具：如Webpack、Gulp等，通过相应的插件集成Sass编译。

12.2 Less

特点：类似于Sass，支持变量、混合、嵌套等。
语法：与CSS非常相似，易于上手。

12.2.1 示例

@primary-color: #333;
@secondary-color: #4CAF50;
@font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;

body {
    font-family: @font-stack;
    color: @primary-color;

    .container {
        width: 80%;
        margin: auto;

        .header {
            background-color: lighten(@primary-color, 20%);
            padding: 20px;
        }

        .button {
            .button-style(@secondary-color);
        }
    }
}

.button-style(@color) {
    background-color: @color;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;

    &:hover {
        background-color: darken(@color, 10%);
    }
}

解释：

变量：@primary-color、@secondary-color、@font-stack。
嵌套：类似于Sass，在body中嵌套.container，在.container中嵌套.header和.button。
混合（Mixin）：.button-style(@color)定义了一个按钮样式的混合。
包含混合：.button使用.button-style(@secondary-color);应用混合。

12.2.2 编译Less

Less同样需要被编译成标准的CSS。可以使用以下工具进行编译：

命令行工具：通过安装Less CLI，使用命令lessc input.less output.css进行编译。
集成开发环境（IDE）插件：如VS Code的Easy LESS插件。
构建工具：如Webpack、Gulp等，通过相应的插件集成Less编译。

12.3 使用预处理器的优势

代码复用：通过变量和混合减少重复代码。
模块化：将CSS拆分为多个文件，便于管理。
逻辑控制：支持条件语句和循环，提高灵活性。
嵌套：使样式结构更接近HTML结构，提升可读性。
扩展性：预处理器提供更多功能，如函数、运算等，增强CSS能力。

示例

$font-stack: 'Arial', sans-serif;
$primary-color: #333;

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    font-family: $font-stack;
    color: $primary-color;
    @include flex-center;
    height: 100vh;
    background-color: #f0f0f0;
}

编译后的CSS

.container {
    font-family: 'Arial', sans-serif;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

解释：

变量：$font-stack、$primary-color。
混合：@mixin flex-center定义了一个居中Flexbox布局的混合。
包含混合：.container使用@include flex-center;应用混合。

注意：预处理器的高级功能在标准CSS中无法实现，且需要额外的编译步骤。

13. CSS最佳实践

遵循CSS最佳实践有助于编写高效、可维护、易读的代码，提高开发效率和项目质量。

13.1 代码组织

分层结构：将CSS代码按功能或页面模块进行分层组织。
- 基础层：重置样式、全局变量等。
- 布局层：定义页面结构和布局。
- 组件层：定义按钮、卡片等可复用组件的样式。
- 主题层：定义主题颜色、字体等可定制属性。

/* 基础层 */
@import 'reset.css';
@import 'variables.css';

/* 布局层 */
@import 'header.css';
@import 'footer.css';

/* 组件层 */
@import 'button.css';
@import 'card.css';

/* 主题层 */
@import 'theme.css';

优势：

可维护性：模块化代码，便于查找和修改。
可复用性：共享组件样式，减少重复代码。
可扩展性：易于添加新功能和样式。

13.2 命名规范

采用一致且有意义的命名规范，提高代码可读性和团队协作效率。

常见命名规范

BEM（块-元素-修饰符）：

/* 块（Block） */
.button { ... }

/* 元素（Element） */
.button__icon { ... }

/* 修饰符（Modifier） */
.button--primary { ... }
.button--large { ... }

OOCSS（面向对象的CSS）：

/* 结构类 */
.media { ... }

/* 外观类 */
.media-left { ... }
.media-body { ... }

SMACSS（可扩展和模块化的架构CSS）：

/* Base */
h1 { ... }

/* Layout */
.header { ... }

/* Module */
.card { ... }

/* State */
.is-active { ... }

/* Theme */
.theme-dark { ... }

示例（BEM命名）

/* CSS */
.button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button__icon {
    margin-right: 5px;
}

.button--primary {
    background-color: #008CBA;
}

<!-- HTML -->
<button class="button button--primary">
    <span class="button__icon">👍</span>
    主要按钮
</button>

解释：

.button：块，定义按钮的基本样式。
.button__icon：元素，按钮内的图标样式。
.button--primary：修饰符，定义按钮的主要样式。

13.3 重用和模块化

通过创建可复用的CSS类和模块，减少重复代码，提高开发效率。

13.3.1 创建可复用的组件

/* CSS */
.button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #45a049;
}

.button--secondary {
    background-color: #555555;
}

HTML

<button class="button">主要按钮</button>
<button class="button button--secondary">次要按钮</button>

解释：

.button：定义按钮的基本样式。
.button--secondary：定义次要按钮的样式，基于.button。

13.3.2 使用组合类

组合多个类以应用不同的样式。

/* CSS */
.text-center {
    text-align: center;
}

.margin-top-large {
    margin-top: 30px;
}

HTML

<p class="text-center margin-top-large">这是一个居中且有较大上边距的段落。</p>

解释：

.text-center：定义文本居中。
.margin-top-large：定义较大的上边距。

13.4 性能优化

编写高效的CSS代码，提升网页加载速度和渲染性能。

13.4.1 减少CSS文件大小

删除未使用的样式：定期清理无用的CSS规则。
压缩CSS文件：通过工具如CSSNano、UglifyCSS等压缩CSS代码，减少文件大小。
合并CSS文件：将多个CSS文件合并为一个，减少HTTP请求次数。

13.4.2 优化选择器

避免过于复杂的选择器：复杂的选择器会增加浏览器的解析时间。
- 优先使用类选择器和ID选择器。
- 避免深层嵌套的选择器。
提高选择器的效率：将常用选择器放在CSS文件的前面。

/* 高效选择器 */
.button { ... }
.button--primary { ... }

/* 低效选择器 */
div > ul li a { ... }

13.4.3 使用CSS简写属性

通过使用CSS简写属性，减少代码冗余，提高可读性。

/* 详细写法 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* 简写写法 */
margin: 10px 20px;

示例

/* 详细写法 */
.padding-top {
    padding-top: 10px;
}
.padding-right {
    padding-right: 20px;
}

/* 简写写法 */
.padding {
    padding: 10px 20px;
}

13.5 使用CSS预处理器的优势

（详见第12章）

13.6 使用工具和框架

CSS框架：如Bootstrap、Tailwind CSS等，提供预定义的样式和组件，帮助快速搭建页面。
CSS方法论：如BEM、OOCSS、SMACSS，指导CSS代码的组织和命名，提升可维护性。
开发工具：使用浏览器开发者工具（如Chrome DevTools）调试和优化CSS代码。

14. 实战项目：创建美观的个人简介网页

通过一个完整的项目，巩固所学的CSS知识。我们将创建一个响应式、具有美观布局和样式的个人简介网页。

14.1 项目结构

personal_profile/
│
├── index.html
├── styles.css
├── script.js (可选)
└── images/
    └── profile.jpg

14.2 HTML文件：`index.html`

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人简介</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>张伟的个人简介</h1>
            <nav>
                <ul>
                    <li><a href="#about">关于我</a></li>
                    <li><a href="#skills">技能</a></li>
                    <li><a href="#contact">联系我</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section id="about" class="container">
            <h2>关于我</h2>
            <img src="images/profile.jpg" alt="张伟的照片" class="profile-img">
            <p>你好！我是张伟，一名前端开发工程师，热爱编程和设计。在过去的五年里，我参与了多个网页和移动应用的开发项目，积累了丰富的经验。</p>
        </section>

        <section id="skills" class="container">
            <h2>技能</h2>
            <ul class="skills-list">
                <li>HTML5 & CSS3</li>
                <li>JavaScript & ES6</li>
                <li>React.js</li>
                <li>Node.js</li>
                <li>Git & GitHub</li>
            </ul>
        </section>

        <section id="contact" class="container">
            <h2>联系我</h2>
            <form action="/submit" method="post">
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name" required>

                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email" required>

                <label for="message">留言：</label>
                <textarea id="message" name="message" rows="5" required></textarea>

                <input type="submit" value="发送">
            </form>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>© 2025 张伟. 版权所有.</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

解释：

<header>：包含网站标题和导航菜单。
<main>：包含三个主要部分：关于我、技能、联系我。
<section>：每个部分使用<section>标签，并赋予唯一的id。
<form>：联系表单，包含姓名、邮箱和留言输入字段。
<footer>：页脚，包含版权信息。

14.3 CSS文件：`styles.css`

/* 1. 基础重置 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 2. 全局样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333333;
}

/* 3. 容器 */
.container {
    width: 80%;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

/* 4. 头部样式 */
header {
    background-color: #4CAF50;
    color: white;
    padding: 20px 0;
}

header h1 {
    text-align: center;
    margin-bottom: 10px;
}

nav ul {
    list-style: none;
    text-align: center;
}

nav ul li {
    display: inline-block;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #ddd;
}

/* 5. 主体样式 */
main {
    padding: 20px 0;
}

/* 6. 关于我部分 */
#about {
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.profile-img {
    display: block;
    margin: 20px auto;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 3px solid #4CAF50;
}

#about p {
    text-align: center;
    margin-top: 10px;
}

/* 7. 技能部分 */
#skills {
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.skills-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.skills-list li {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    margin: 10px;
    border-radius: 20px;
    font-size: 1em;
    transition: background-color 0.3s;
}

.skills-list li:hover {
    background-color: #45a049;
}

/* 8. 联系我部分 */
#contact {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
}

#contact form {
    display: flex;
    flex-direction: column;
}

#contact label {
    margin-bottom: 5px;
    font-weight: bold;
}

#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 1em;
}

#contact input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 1em;
}

#contact input[type="submit"]:hover {
    background-color: #45a049;
}

/* 9. 页脚样式 */
footer {
    background-color: #333333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

解释：

基础重置：通过*选择器，设置所有元素的box-sizing为border-box，并清除默认的margin和padding。
全局样式：定义body的字体、行高、背景色和文本颜色。
容器：设置页面内容的最大宽度和居中对齐。
头部样式：设置背景色、文本颜色、内边距和导航菜单样式。
关于我部分：设置背景色、内边距、边框半径和个人照片样式。
技能部分：使用Flexbox创建技能标签的多列布局，并添加悬停效果。
联系我部分：设置表单布局和样式，包括输入框和提交按钮。
页脚样式：设置页脚的背景色、文本颜色和对齐方式。

14.4 图片文件

将个人照片（如profile.jpg）放在images文件夹内。确保图片路径正确，以便在网页中正确显示。

目录结构

personal_profile/
│
├── index.html
├── styles.css
├── script.js (可选)
└── images/
    └── profile.jpg

示例

<img src="images/profile.jpg" alt="张伟的照片" class="profile-img">

说明：

src：图片的路径，需根据实际目录结构调整。
alt：替代文本，提升无障碍性。
class="profile-img"：应用CSS类以设置样式。

14.5 JavaScript文件（可选）：`script.js`

在这个简单的项目中，JavaScript不是必需的，但可以添加一些基本的交互功能。例如，表单提交后的提示。

document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    alert('感谢您的留言，我们会尽快回复您！');
    this.reset(); // 重置表单
});

解释：

document.querySelector('form')：选择第一个<form>元素。
addEventListener('submit', function(event) { ... })：为表单提交事件添加监听器。
event.preventDefault();：阻止表单的默认提交行为，防止页面刷新。
alert(...)：显示提示消息。
this.reset();：重置表单，清空输入字段。

集成到HTML

<script src="script.js"></script>

完整HTML示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人简介</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 头部、主体和页脚内容 -->
    <script src="script.js"></script>
</body>
</html>

14.6 项目展示

完成上述步骤后，打开index.html，你将看到一个结构清晰、美观的个人简介网页，包括：

页头：包含网站标题和导航菜单。
关于我：个人照片和简介。
技能：技能列表，以标签形式展示。
联系我：联系表单，用户可以提交姓名、邮箱和留言。
页脚：版权信息。

响应式效果

调整浏览器窗口大小，查看网页在不同屏幕尺寸下的表现。利用Flexbox和媒体查询，网页将自动适应各种设备。

效果说明：

宽屏设备：技能标签以多列排列，布局宽松。
窄屏设备：技能标签自动换行，单列排列，布局紧凑。

添加媒体查询增强响应式

/* 14.3 CSS文件：styles.css */

/* 添加媒体查询，优化不同屏幕尺寸的布局 */
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin: 10px 0;
    }

    .skills-list {
        flex-direction: column;
        align-items: center;
    }

    .skills-list li {
        width: 80%;
    }
}

@media (max-width: 480px) {
    .container {
        width: 95%;
        padding: 10px;
    }

    .profile-img {
        width: 100px;
        height: 100px;
    }

    #contact form {
        padding: 10px;
    }
}

解释：

屏幕宽度小于768px：
- 导航菜单项垂直排列。
- 技能列表以单列排列，技能标签宽度调整为80%。
屏幕宽度小于480px：
- 容器宽度调整为95%，内边距减少。
- 个人照片尺寸缩小。
- 联系表单内边距减少，适应小屏设备。

最终效果：

桌面设备：布局宽松，技能标签多列排列。
平板设备：导航菜单垂直排列，技能标签单列排列。
移动设备：容器宽度几乎全屏，照片和表单尺寸缩小，布局紧凑。

15. 学习资源推荐

在线教程

W3Schools 中文站：提供详细的CSS教程和示例，适合初学者。
MDN Web 文档：“Mozilla Developer Network”提供全面的Web开发文档，包括CSS。
菜鸟教程：简明易懂的CSS教程，适合快速学习。
CSS-Tricks：丰富的CSS技巧和教程，包含大量实用示例。

书籍

《CSS权威指南》 - Eric A. Meyer：深入解析CSS的各种概念和技术。
《CSS揭秘》 - Lea Verou：提供了大量实用的CSS技巧和最佳实践。
《HTML与CSS：设计与构建网站》 - Jon Duckett：图文并茂，适合初学者。
《响应式Web设计：HTML5和CSS3实战》 - Ben Frain：深入讲解响应式设计和现代CSS技术。

实践平台

CodePen：在线编码平台，方便你编写和分享HTML、CSS和JavaScript代码。
JSFiddle：另一个在线编码和测试平台。
CSSBattle：通过挑战游戏提升CSS技能。
Frontend Mentor：提供真实世界的项目挑战，提升前端开发能力。

社区与论坛

Stack Overflow：全球最大的开发者社区，遇到问题可以在这里提问。
掘金：中国的开发者社区，包含大量技术文章和讨论。
知乎：搜索相关的技术问题和回答，与其他开发者交流。
Reddit - r/webdev：国际知名的Web开发社区，讨论前端技术和趋势。

视频教程

慕课网：提供丰富的前端开发视频课程。
Bilibili：搜索“CSS教程”，有许多高质量的免费视频资源。
Udemy：国际知名的在线学习平台，提供系统的CSS课程。
YouTube - Traversy Media：知名的前端开发频道，提供丰富的CSS教程。

16. 总结

学习CSS是迈向前端开发的重要一步。通过本文的详细讲解，你已经掌握了CSS的基本语法、选择器、颜色与背景、文本样式、盒模型、布局、响应式设计、过渡与动画、变量、自定义属性以及预处理器等核心概念。以下是一些学习建议：

多动手实践：尝试编写不同的CSS样式，观察效果，巩固理解。
模仿优秀设计：选择一些你喜欢的网站，尝试模仿其布局和样式。
参与项目：创建自己的项目，如个人博客、作品集等，提升实战能力。
持续学习：CSS不断发展，关注新技术和新方法，如CSS Grid、Flexbox等。
参考文档：定期查阅MDN Web 文档和W3Schools等权威资源。
学习最佳实践：遵循CSS最佳实践，编写高效、可维护的代码。
使用开发工具：利用浏览器开发者工具（如Chrome DevTools）调试和优化CSS代码。

保持耐心和热情，前端技术领域丰富多彩，通过不断的学习和实践，你将成为一名出色的前端开发者！

祝你学习顺利，早日实现自己的网页设计梦想！

分享

目录

1. 什么是CSS？

CSS的作用

CSS与HTML的关系

2. CSS的基本语法

2.1 选择器

2.2 声明块

2.3 基本语法结构

2.4 示例

3. 将CSS应用到HTML中

3.1 内联样式

语法

示例

3.2 内部样式表

语法

示例

3.3 外部样式表

语法

示例

4. CSS选择器

4.1 基本选择器

4.1.1 元素选择器

4.1.2 类选择器

4.1.3 ID选择器

4.1.4 通用选择器

4.2 组合选择器

4.2.1 后代选择器

4.2.2 子元素选择器

4.2.3 相邻兄弟选择器

4.2.4 通用兄弟选择器

4.3 属性选择器

4.3.1 基本属性选择器

4.3.2 属性值包含选择器

4.4 伪类和伪元素

4.4.1 伪类

4.4.2 伪元素

5. CSS颜色与背景

5.1 颜色表示法

5.1.1 颜色名称

5.1.2 十六进制颜色

5.1.3 RGB颜色

5.1.4 RGBA颜色

5.1.5 HSL颜色

5.1.6 HSLA颜色

5.2 背景属性

5.2.1 背景颜色

5.2.2 背景图片

5.2.3 背景重复

5.2.4 背景定位

5.2.5 背景大小

5.2.6 背景混合模式

5.2.7 复合背景属性

6. CSS文本样式

6.1 字体属性

示例

6.2 文本对齐

6.3 文本装饰

6.4 文本变换

6.5 文本阴影

6.6 字符间距和单词间距

7. CSS盒模型

7.1 盒模型组成

盒模型示意图

7.2 盒模型的调整

7.2.1 设置宽度和高度

7.2.2 设置内边距

7.2.3 设置边框

7.2.4 设置外边距

7.2.5 盒模型示例

7.3 盒模型的盒尺寸（Box Sizing）

7.3.1 box-sizing属性

8. CSS布局

8.1 流式布局

示例

8.2 浮动布局

8.2.1 使用float属性

8.2.2 清除浮动

示例

7.3.1 `box-sizing`属性

8.2.1 使用`float`属性

14.2 HTML文件：`index.html`

14.3 CSS文件：`styles.css`