CSS是什么？—— 网页的“化妆师”

  <!-- 1. 内联样式（优先级最高，少用） -->
  <div style="color: red;">内容</div>
  
  <!-- 2. 内部样式表（适合小项目） -->
  <head>
    <style>
      body { background: #f0f0f0; }
    </style>
  </head>
  
  <!-- 3. 外部样式表（最推荐！） -->
  <head>
    <link rel="stylesheet" href="style.css">
  </head>

CSS语法：

语法1

选择器{

样式属性键：样式属性值

Eg:color:red

样式属性键：样式属性值1 样式属性值2 样式属性值3····（样式属性值之间使用空格）

语法2:

style="样式属性键：样式属性值"

}

2：选择器------精准定位元素的"GPS"

css 复制代码

/* 1. 标签选择器 */
p { color: blue; }

/* 2. 类选择器（最常用） */
.text-red { color: red; }
/* HTML: <p class="text-red">红色文字</p> */

/* 3. ID选择器（唯一性） */
#header { height: 80px; }
/* HTML: <div id="header"></div> */

/* 4. 后代选择器 */
nav a { text-decoration: none; } /* nav下的所有a标签 */

/* 5. 伪类选择器（交互状态） */
a:hover { color: orange; } /* 鼠标悬停时 */

2.1、标签选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器.html</title>
    <!--
        标签选择器
        标签名称{

        }
    -->

    <style type="text/css">
        a{
            color:aqua
        }
    </style>
</head>
<body>
    <a>
        This is my HTML.page
    </a>
</body>
</html>

2.2、id选择器

注意：使用id时，要保证id的值在页面中是唯一的
例如：使用两个a标签，是第一个a标签的内容变黄色，而第二个不变

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器.html</title>
    <!--
        id选择器
        #标签id{

        }
    -->

    <style type="text/css">
        #one{
            color:yellow
            
        }
    </style>
</head>
<body>
    <a id="one">
        This is my HTML.page
    </a><br>
    
    <a>
        This is my HTML.page
    </a>
</body>
</html>

2.3、class选择器

实例：页面上有《a》和《p》标签，希望第一个a标签和p标签颜色变化

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class选择器.html</title>
    <!--
        class选择器
        .class标签名称{

        }
    -->

    <style type="text/css">
        .one{
            color:green
            
        }
    </style>
</head>
<body>
    <a class="one">  This is my HTML.page  </a><br>
      
    <a>This is my HTML.page </a>
   
    <p class="one">This is my HTML.page </p>

    <p>This is my HTML.page </p>
    
    
        
   
</body>
</html>

2.4、伪类选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器.html</title>
    <!--
        伪类选择器
        选择标签的某个状态，需要配合其他选择器来使用
        link:表示未访问过
        visited:表示访问过
        hover:表示悬浮
        active:表示激活，点击
    -->

    <style type="text/css">
        a:link{
            color:green
            
        }
        a:visited{
            color:aqua
            
        }
        a:hover{
            color:rgb(228, 131, 168)
            
        }
        a:active{
            color:rgb(196, 52, 8)
            
        }


    </style>
</head>
<body>
   <a href="类选择器.html">点我</a>
    
    
        
   
</body>
</html>

2.5、后代选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器.html</title>
    

    <style type="text/css">
        #one,.two,font{
            color: #3366ff
            
        }
    </style>
</head>
<body>
    <p id="one">This is my HTML.page</p><br>
    <a class="two">This is my HTML.page</a><br>
    <font>This is my HTML.page</font>
        
        
        
    
</body>
</html>

2.6、常见的css属性

3：盒模型------所有元素的"生存空间"

块级标签：div => 占据的范围是一行

行内标签 : span => 占据的是行中的一部分

css 复制代码

div {
  width: 200px;     /* 内容宽度 */
  height: 100px;    /* 内容高度 */
  padding: 20px;    /* 内边距（内容与边框的间距） */
  border: 2px solid black;  /* 边框 */
  margin: 30px;     /* 外边距（元素与其他元素的间距） */
  
  /* 重要！改变盒模型计算方式 */
  box-sizing: border-box; /* width包含padding和border */
}

4：常用样式属性

css 复制代码

/* 文字样式 */
p {
  font-family: "Microsoft YaHei", sans-serif; /* 字体栈 */
  font-size: 16px;
  font-weight: bold;
  text-align: center; /* 左left/中center/右right */
  line-height: 1.6;   /* 行高（重要！） */
}

/* 颜色与背景 */
div {
  color: #ff0000;        /* 文字颜色 */
  background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */
  background-image: url("bg.jpg");
  background-size: cover;
}

实战小任务

复制代码

创建一个200x200px的div，要求：
① 背景渐变色 ② 内部文字垂直水平居中
③ 有1px黑色边框 ④ 距离上方元素50px

最终实现代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实战任务：渐变Div与居中文字</title>
    <style>
        /* 重置默认样式以确保一致性 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 900px;
            width: 100%;
            text-align: center;
        }
        
        header {
            margin-bottom: 40px;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }
        
        .instructions {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .task-container {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }
        
        /* 代码演示区域样式 */
        .code-demo {
            background: #2d2d2d;
            color: #f8f8f2;
            border-radius: 8px;
            padding: 20px;
            width: 400px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            text-align: left;
        }
        
        .code-demo h3 {
            color: #ff6b6b;
            margin-bottom: 15px;
            border-bottom: 1px solid #444;
            padding-bottom: 8px;
        }
        
        pre {
            background: #1e1e1e;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
            line-height: 1.5;
            white-space: pre-wrap;
        }
        
        .css-code {
            color: #a5e844;
        }
        
        .comment {
            color: #75715e;
        }
        
        /* 任务要求实现的目标div */
        .target-div {
            /* 设置div尺寸为200x200像素 */
            width: 200px;
            height: 200px;
            
            /* 添加渐变背景 - 从左上到右下的蓝紫色渐变 */
            background: linear-gradient(135deg, #4b6cb7, #182848);
            
            /* 添加1px黑色实线边框 */
            border: 1px solid #000;
            
            /* 设置距离上方元素50px的间距 */
            margin-top: 50px;
            
            /* 使用flexbox实现内部文字垂直水平居中 */
            display: flex;
            align-items: center;
            justify-content: center;
            
            /* 文字样式 */
            color: white;
            font-weight: bold;
            font-size: 18px;
            
            /* 添加一些圆角使视觉效果更柔和 */
            border-radius: 8px;
            
            /* 添加阴影增强立体感 */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        
        .visual-output {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .visual-output h3 {
            color: #4ecdc4;
            margin-bottom: 20px;
        }
        
        footer {
            margin-top: 40px;
            color: white;
            text-align: center;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>CSS实战任务：渐变Div与居中文字</h1>
            <p>学习如何创建一个符合特定样式要求的div元素</p>
        </header>
        
        <div class="instructions">
            <h2>任务要求</h2>
            <p>创建一个200x200px的div，要求：</p>
            <ol>
                <li>背景渐变色</li>
                <li>内部文字垂直水平居中</li>
                <li>有1px黑色边框</li>
                <li>距离上方元素50px</li>
            </ol>
        </div>
        
        <div class="task-container">
            <div class="code-demo">
                <h3>实现代码</h3>
                <pre><span class="css-code">.target-div {
  <span class="comment">/* 设置div尺寸 */</span>
  width: 200px;
  height: 200px;
  
  <span class="comment">/* 添加渐变背景 */</span>
  background: linear-gradient(135deg, #4b6cb7, #182848);
  
  <span class="comment">/* 添加1px黑色边框 */</span>
  border: 1px solid #000;
  
  <span class="comment">/* 设置上方间距 */</span>
  margin-top: 50px;
  
  <span class="comment">/* 使用flexbox实现文字居中 */</span>
  display: flex;
  align-items: center;
  justify-content: center;
  
  <span class="comment">/* 文字样式 */</span>
  color: white;
  font-weight: bold;
}</span></pre>
            </div>
            
            <div class="visual-output">
                <h3>视觉效果</h3>
                <!-- 这是上方的元素，用于演示margin-top的效果 -->
                <div style="background: #f8f9fa; padding: 10px; border-radius: 5px; margin-bottom: 10px;">
                    上方元素
                </div>
                
                <!-- 这是我们要创建的目标div -->
                <div class="target-div">
                    居中文字
                </div>
                
                <div style="margin-top: 20px; background: #f8f9fa; padding: 10px; border-radius: 5px;">
                    下方元素
                </div>
            </div>
        </div>
        
        <footer>
            <p>CSS实战练习 - 通过实践掌握CSS布局与样式技巧</p>
        </footer>
    </div>
</body>
</html>

2.最终实现效果

3、代码解析，

设置Div尺寸

css 复制代码

/* 设置div尺寸为200x200像素 */
width: 200px;
height: 200px;

创建渐变背景

css 复制代码

/* 添加渐变背景 - 从左上到右下的蓝紫色渐变 */
background: linear-gradient(135deg, #4b6cb7, #182848);

linear-gradient() 函数创建线性渐变

135deg 设置渐变方向为从左上到右下

可以添加多个颜色值创建更复杂的渐变

添加边框

css 复制代码

/* 添加1px黑色实线边框 */
border: 1px solid #000;

border 是边框的简写属性

1px 设置边框宽度

solid 设置边框样式为实线

#000 设置边框颜色为黑色

设置上方间距

css 复制代码

/* 设置距离上方元素50px的间距 */
margin-top: 50px;

argin-top 控制元素上方的外边距

这会在此div和它上方的元素之间创建50px的空间

实现文字居中

css 复制代码

/* 使用flexbox实现内部文字垂直水平居中 */
display: flex;
align-items: center;
justify-content: center;

display: flex 将元素设置为Flex容器

align-items: center 垂直居中子元素

justify-content: center 水平居中子元素

第三阶段：布局艺术

5：传统布局方案

css 复制代码

/* 1. 浮动布局（传统方案） */
.left { float: left; width: 70%; }
.right { float: right; width: 28%; }
.clearfix::after { /* 清除浮动 */
  content: "";
  display: block;
  clear: both;
}

/* 2. 定位布局 */
.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 经典居中方案 */
}

6：Flex布局

css 复制代码

.container {
  display: flex;
  justify-content: center;   /* 主轴对齐方式 */
  align-items: center;       /* 交叉轴对齐方式 */
  flex-wrap: wrap;           /* 换行 */
}

.item {
  flex: 1;                   /* 弹性比例 */
  align-self: flex-start;    /* 单个项目对齐 */
}

7：Grid布局（二维布局之王）

css 复制代码

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3列，中间列是两侧2倍 */
  grid-gap: 20px;           /* 间距 */
}

.item {
  grid-column: 1 / 3;        /* 从第1列到第3列 */
  grid-row: 1;               /* 在第1行 */
}

复制代码

实战任务3：
用Flex布局实现：

一个水平居中的容器，内部有3个等宽按钮 用Grid布局实现：
3x3的九宫格布局，每个格子100x100px

最终实现代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex与Grid布局实战</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 20px;
            color: #fff;
        }
        
        .container {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }
        
        .task-section {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 40px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            color: #333;
        }
        
        h2 {
            color: #1a2a6c;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #ddd;
        }
        
        h3 {
            color: #b21f1f;
            margin: 20px 0 15px;
        }
        
        /* Flex布局任务样式 */
        .flex-container {
            /* 设置为flex容器 */
            display: flex;
            /* 主轴（水平方向）上居中 */
            justify-content: center;
            /* 设置容器宽度为80% */
            width: 80%;
            /* 水平居中容器 */
            margin: 0 auto;
            /* 添加内边距 */
            padding: 20px;
            /* 添加背景色 */
            background-color: #f8f9fa;
            /* 添加圆角 */
            border-radius: 10px;
            /* 添加阴影效果 */
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .flex-btn {
            /* 设置按钮弹性增长，使它们等宽 */
            flex: 1;
            /* 设置内边距 */
            padding: 12px 0;
            /* 设置字体大小 */
            font-size: 16px;
            /* 设置字体粗细 */
            font-weight: 600;
            /* 设置背景颜色 */
            background: linear-gradient(to right, #4b6cb7, #182848);
            /* 设置文字颜色 */
            color: white;
            /* 移除按钮默认边框 */
            border: none;
            /* 添加圆角 */
            border-radius: 6px;
            /* 添加光标指针样式 */
            cursor: pointer;
            /* 添加过渡效果 */
            transition: all 0.3s ease;
            /* 设置最大宽度，避免在大屏幕上过宽 */
            max-width: 150px;
            /* 添加按钮间距 */
            margin: 0 8px;
        }
        
        .flex-btn:hover {
            /* 鼠标悬停时变换背景 */
            background: linear-gradient(to right, #182848, #4b6cb7);
            /* 添加悬停时的阴影效果 */
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
            /* 轻微向上移动 */
            transform: translateY(-2px);
        }
        
        /* Grid布局任务样式 */
        .grid-container {
            /* 设置为grid容器 */
            display: grid;
            /* 创建3列，每列100px */
            grid-template-columns: 100px 100px 100px;
            /* 创建3行，每行100px */
            grid-template-rows: 100px 100px 100px;
            /* 设置网格项之间的间隙 */
            gap: 10px;
            /* 水平居中容器 */
            margin: 0 auto;
            /* 添加内边距 */
            padding: 20px;
            /* 添加背景色 */
            background-color: #f8f9fa;
            /* 添加圆角 */
            border-radius: 10px;
            /* 添加阴影效果 */
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            /* 设置容器宽度以适应内容 */
            width: fit-content;
        }
        
        .grid-item {
            /* 设置背景颜色 */
            background: linear-gradient(45deg, #fdbb2d, #b21f1f);
            /* 添加圆角 */
            border-radius: 8px;
            /* 设置文字颜色 */
            color: white;
            /* 设置字体大小 */
            font-size: 24px;
            /* 设置字体粗细 */
            font-weight: bold;
            /* 使用flex让数字在格子中居中 */
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
            /* 添加阴影效果 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            /* 添加过渡效果 */
            transition: all 0.3s ease;
        }
        
        .grid-item:hover {
            /* 鼠标悬停时变换背景 */
            background: linear-gradient(45deg, #b21f1f, #fdbb2d);
            /* 添加悬停时的阴影效果 */
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
            /* 旋转效果 */
            transform: rotate(5deg);
        }
        
        .code-container {
            background: #2d2d2d;
            color: #f8f8f2;
            border-radius: 8px;
            padding: 20px;
            margin-top: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        pre {
            background: #1e1e1e;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
            line-height: 1.5;
            white-space: pre-wrap;
        }
        
        .css-code {
            color: #a5e844;
        }
        
        .comment {
            color: #75715e;
        }
        
        .flex-example, .grid-example {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 25px 0;
        }
        
        footer {
            margin-top: 40px;
            color: white;
            text-align: center;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Flex与Grid布局实战</h1>
            <p>掌握现代CSS布局的强大技术</p>
        </header>
        
        <div class="task-section">
            <h2>实战任务</h2>
            <p>使用Flex布局实现水平居中的等宽按钮，使用Grid布局实现3×3九宫格。</p>
            
            <div class="flex-example">
                <h3>Flex布局：水平居中的等宽按钮</h3>
                <div class="flex-container">
                    <button class="flex-btn">首页</button>
                    <button class="flex-btn">产品</button>
                    <button class="flex-btn">联系</button>
                </div>
                
                <div class="code-container">
                    <h3>Flex布局代码实现</h3>
                    <pre><span class="css-code"><span class="comment">/* Flex容器样式 */</span>
.flex-container {
  display: flex;           <span class="comment">/* 设置为flex容器 */</span>
  justify-content: center; <span class="comment">/* 主轴（水平方向）上居中 */</span>
  width: 80%;             <span class="comment">/* 设置容器宽度 */</span>
  margin: 0 auto;         <span class="comment">/* 水平居中容器 */</span>
}

<span class="comment">/* Flex项目（按钮）样式 */</span>
.flex-btn {
  flex: 1;                <span class="comment">/* 使按钮等宽 */</span>
  max-width: 150px;       <span class="comment">/* 设置最大宽度 */</span>
  margin: 0 8px;          <span class="comment">/* 添加按钮间距 */</span>
}</span></pre>
                </div>
            </div>
            
            <div class="grid-example">
                <h3>Grid布局：3×3九宫格（每个格子100×100px）</h3>
                <div class="grid-container">
                    <div class="grid-item">1</div>
                    <div class="grid-item">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 class="grid-item">7</div>
                    <div class="grid-item">8</div>
                    <div class="grid-item">9</div>
                </div>
                
                <div class="code-container">
                    <h3>Grid布局代码实现</h3>
                    <pre><span class="css-code"><span class="comment">/* Grid容器样式 */</span>
.grid-container {
  display: grid;                    <span class="comment">/* 设置为grid容器 */</span>
  grid-template-columns: 100px 100px 100px; <span class="comment">/* 创建3列，每列100px */</span>
  grid-template-rows: 100px 100px 100px;    <span class="comment">/* 创建3行，每行100px */</span>
  gap: 10px;                        <span class="comment">/* 设置网格项之间的间隙 */</span>
  margin: 0 auto;                   <span class="comment">/* 水平居中容器 */</span>
}

<span class="comment">/* Grid项目（格子）样式 */</span>
.grid-item {
  width: 100px;          <span class="comment">/* 设置宽度 */</span>
  height: 100px;         <span class="comment">/* 设置高度 */</span>
  display: flex;          <span class="comment">/* 使用flex让内容居中 */</span>
  justify-content: center; <span class="comment">/* 水平居中内容 */</span>
  align-items: center;    <span class="comment">/* 垂直居中内容 */</span>
}</span></pre>
                </div>
            </div>
        </div>
        
        <footer>
            <p>CSS布局实战练习 - 掌握Flex和Grid布局技术</p>
        </footer>
    </div>
</body>
</html>

实现效果

Flex布局实现步骤

创建Flex容器

css 复制代码

   .flex-container {
     display: flex;           /* 设置为flex容器 */
     justify-content: center; /* 主轴（水平方向）上居中 */
     width: 80%;             /* 设置容器宽度 */
     margin: 0 auto;         /* 水平居中容器 */
   }

2、设置Flex项目（按钮）

css 复制代码

   .flex-btn {
     flex: 1;                /* 使按钮等宽 */
     max-width: 150px;       /* 设置最大宽度 */
     margin: 0 8px;          /* 添加按钮间距 */
   }

Grid布局实现步骤

创建Grid容器

css 复制代码

   .grid-container {
     display: grid;                    /* 设置为grid容器 */
     grid-template-columns: 100px 100px 100px; /* 创建3列，每列100px */
     grid-template-rows: 100px 100px 100px;    /* 创建3行，每行100px */
     gap: 10px;                        /* 设置网格项之间的间隙 */
     margin: 0 auto;                   /* 水平居中容器 */
   }

2设置Grid项目（格子）

css 复制代码

   .grid-item {
     width: 100px;          /* 设置宽度 */
     height: 100px;         /* 设置高度 */
     display: flex;          /* 使用flex让内容居中 */
     justify-content: center; /* 水平居中内容 */
     align-items: center;    /* 垂直居中内容 */
   }

Flex布局要点

display: flex 创建一个flex容器

justify-content 控制主轴（默认水平方向）对齐方式

flex: 1 使flex项目等分可用空间

Grid布局要点

display: grid 创建一个grid容器

grid-template-columns 定义列数和列宽

grid-template-rows 定义行数和行高

gap 设置网格项之间的间距

区别

特性	Flexbox (一维)	Grid (二维)
维度	一次处理一行或一列	同时处理行和列
核心思想	内容流、弹性	预先定义的结构、精准放置
控制方式	在主轴和交叉轴上对齐、分布内容	将项目放置到明确定义的网格单元格中
最适合	小型组件、线性布局、内容动态的布局	大型布局、整体页面架构、需要精确控制的布局

第四阶段：高级技巧与响应式

8：响应式设计

css 复制代码

/* 1. 媒体查询（断点） */
@media (max-width: 768px) { /* 平板 */
  .container { flex-direction: column; }
}

@media (max-width: 480px) { /* 手机 */
  .item { width: 100%; }
}

/* 2. 响应式单位 */
div {
  width: 80vw;    /* 视口宽度的80% */
  height: 50vh;   /* 视口高度的50% */
  font-size: 2rem;/* 基于根元素字体大小 */
}

9：炫酷特效

css 复制代码

/* 1. 过渡动画 */
.button {
  transition: all 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* 2. 关键帧动画 */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.element {
  animation: slideIn 0.5s ease forwards;
}

CSS是什么？—— 网页的“化妆师”

第一阶段：CSS基础理念

1：CSS是什么？------ 网页的"化妆师"

2：选择器------精准定位元素的"GPS"

2.1、 标签选择器

2.2、id选择器

2.3、class选择器

2.4、伪类选择器

2.5、后代选择器

2.6、常见的css属性

3：盒模型------所有元素的"生存空间"

4：常用样式属性

设置Div尺寸

创建渐变背景

添加边框

设置上方间距

实现文字居中

第三阶段：布局艺术

5：传统布局方案

6：Flex布局

7：Grid布局（二维布局之王）

最终实现代码

实现效果

Flex布局实现步骤

Grid布局实现步骤

Flex布局要点

Grid布局要点

第四阶段：高级技巧与响应式

8：响应式设计

9：炫酷特效

2.1、标签选择器