AI 时代，快速学习是必备的能力。
CSS 其实没那么难，我将通过三节课让大家对CSS有大概的了解，我将其分为：
入门-熟练-精通。
这一节课是熟练。
布局技术
浮动（Floats）
浮动是CSS布局的传统方法之一。当你对一个元素应用浮动时，它将被提取出常规的文档流，并且可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。
作用：浮动最常见的用途是实现多列布局，例如，一个侧边栏和一个主内容区域并排显示。
/* 创建基本的两列布局 */ .left-column { float: left; width: 20%; } .right-column { float: right; width: 80%; }
定位（Positioning）
定位是另一种布局技术，它允许你控制元素在页面上的确切位置。有几种定位方式：static、relative、absolute、fixed 和 sticky。
作用：绝对定位（absolute）可以用来创建一个元素位置与文档流无关的效果，这在创建模态窗口、弹出菜单和其他浮动内容时非常有用。
/* 创建一个绝对定位的盒子在页面右下角 */ .absolute-box { position: absolute; bottom: 0; right: 0; }
显示属性（Display）
display属性决定了元素如何显示在页面上。除了常用的block和inline之外，inline-block是另一种显示选项，它允许元素并排排列，而不会开始一个新行，并且保留了块级元素的特性（如设置宽高）。
作用：inline-block在无需整个块级元素的情况下，对于小组件或按钮这样的元素非常有用，同时需要它们并排排列。
/* 将元素设置为inline-block，可以让它们并排且设置宽度 */ .inline-block-element { display: inline-block; width: 100px; margin: 10px; }
Flexbox
Flexbox是一个强大的布局工具，它提供了一种更有效的方式来布局、对齐和分配容器内的项目，即使它们的大小是未知或动态的。
作用：Flexbox使得在多种屏幕和设备大小上创建灵活的响应式布局成为可能。它可以轻松地对齐元素、分配空间以及反转元素的顺序。
/* 创建一个Flexbox容器，项目平均分布并垂直居中 */ .flex-container { display: flex; justify-content: space-around; /* 水平分布 */ align-items: center; /* 垂直居中 */ } .flex-item { flex: 1; /* 允许项目根据需要伸展和收缩 */ }
CSS3新特性
圆角（Border-radius）
通过border-radius属性，你可以为元素添加圆角，创建出更柔和、更现代的界面元素，而不是单调的直角边框。
作用：圆角在提高用户界面的美观性方面尤为重要，特别是在按钮、图片和卡片设计中。
/* 给盒子添加圆角 */ .rounded-box { border: 1px solid #333; border-radius: 10px; /* 可以是px或% */ padding: 20px; }
阴影（Box-shadow & Text-shadow）
box-shadow和text-shadow属性允许你为元素添加阴影，这可以在视觉上增加页面元素的深度，提升整体的美感。
作用：阴影对于强调界面中的某些元素（如按钮或悬停状态的卡片）特别有用。
/* 给盒子添加外阴影 */ .box-with-shadow { box-shadow: 5px 5px 10px rgba(0,0,0,0.3); } /* 给文本添加阴影 */ .text-with-shadow { text-shadow: 2px 2px 2px rgba(0,0,0,0.5); }
渐变（Gradients）
渐变是CSS3的强大特性之一，允许你在两个或多个颜色之间创建平滑的过渡，而不再局限于单一的颜色填充。
作用：可以用作背景、按钮或任何元素的装饰，创建生动和现代化的设计效果。
/* 创建线性渐变背景从左到右 */ .gradient-background { background: linear-gradient(to right, red, yellow); }
过渡（Transitions）
过渡可以让CSS属性的变化不再那么突兀，而是平滑地过渡，为用户交互增加视觉反馈。
作用：经常用于按钮、链接和其他交互元素上，当用户鼠标悬停、聚焦或点击时，提供平滑的视觉反应。
/* 创建一个背景颜色变化的过渡效果 */ .transition { background-color: white; transition: background-color 0.3s ease; } .transition:hover { background-color: blue; }
动画（Animations）
CSS动画让你能够创建长时间的动画序列，其中你可以定义动画的每个阶段。
作用：动画可以吸引用户注意，指导用户流程，或简单地增加页面的趣味性。
/* 使用关键帧创建背景颜色的动画 */ @keyframes color-change { from {background-color: red;} to {background-color: yellow;} } .animated-box { width: 100px; height: 100px; animation: color-change 4s infinite; }
响应式设计原则
媒体查询（Media Queries）
媒体查询是响应式设计的核心。它允许你根据设备屏幕大小、方向或分辨率等特性来应用不同的CSS规则。
作用：通过在不同的断点应用不同的样式，你的网站可以在手机、平板以及桌面上提供最优的视觉体验。
/* 如果屏幕宽度小于600px，则应用以下样式 */ @media screen and (max-width: 600px) { .responsive-box { width: auto; margin: 20px; } }
预处理器简介
Sass和Less等预处理器扩展了CSS，通过引入变量、条件语句、循环、混入（mixins）、函数和嵌套等特性，提高了CSS的动态性和可重用性。
作用：它们使得编写大型和复杂的样式表更加容易和高效，同时也减少了代码重复和错误。
/* 使用Sass的例子 */ $primary-color: #333; .container { background: $primary-color; padding: 20px; nav { list-style: none; } nav li { display: inline; margin-right: 20px; } }
哈哈，你们感觉咋样？
