什么是CSS？
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档样式的样式表语言。CSS控制网页的外观和布局，包括颜色、字体、间距、定位等视觉效果，是Web开发三大核心技术之一。
CSS的核心概念
🎯 选择器
- 元素选择器：直接选择HTML标签
- 类选择器：使用.class选择具有特定类的元素
- ID选择器：使用#id选择具有特定ID的元素
- 属性选择器：根据元素属性进行选择
- 伪类选择器：选择特定状态的元素
📏 盒模型
- 内容（Content）：元素的实际内容
- 内边距（Padding）：内容与边框之间的空间
- 边框（Border）：围绕元素的边框
- 外边距（Margin）：元素与其他元素之间的空间
🌊 层叠和继承
- 层叠：多个样式规则应用于同一元素时的优先级
- 继承：子元素继承父元素的某些样式属性
- 特异性：不同选择器的权重计算
- 重要性：!important声明的优先级
现代CSS特性
🔧 Flexbox布局
- 弹性容器：display: flex创建弹性布局
- 主轴和交叉轴：控制元素排列方向
- 对齐方式：justify-content和align-items
- 弹性项目：flex-grow、flex-shrink、flex-basis
🎯 Grid布局
- 网格容器：display: grid创建网格布局
- 网格线：定义行和列的分割线
- 网格区域：命名和定位网格区域
- 自动布局：auto-fit和auto-fill
📱 响应式设计
- 媒体查询：@media根据设备特性应用样式
- 流体布局：使用百分比和相对单位
- 弹性图片：max-width: 100%自适应
- 移动优先：从小屏幕开始设计
🎨 动画和过渡
- 过渡（Transition）：平滑的属性变化
- 变换（Transform）：旋转、缩放、移动
- 动画（Animation）：关键帧动画
- 3D效果：3D变换和透视
CSS的应用场景
🎨 视觉设计
CSS控制网页的颜色、字体、间距、背景等视觉元素，创造美观的用户界面。
📐 布局控制
通过Flexbox、Grid等布局技术，CSS能够创建复杂的页面布局结构。
📱 响应式设计
媒体查询让网页能够适应不同设备的屏幕尺寸，提供良好的用户体验。
✨ 交互效果
CSS动画和过渡效果能够提升用户交互体验，使网页更加生动。
CSS预处理器
🔧 Sass/SCSS
- 变量：定义和复用样式值
- 嵌套：模拟HTML结构的嵌套写法
- 混合器：复用代码片段
- 继承：@extend继承其他选择器的样式
🎯 Less
- 动态样式：运行时编译
- 函数：内置数学和颜色函数
- 作用域：变量和混合器的作用域
- 导入：@import导入其他样式文件
CSS框架
🚀 Bootstrap
世界上最流行的CSS框架，提供响应式网格系统和预定义组件。
🎨 Tailwind CSS
实用程序优先的CSS框架，通过小的功能类组合创建自定义设计。
🌟 Bulma
基于Flexbox的现代CSS框架，提供简洁的语法和响应式设计。
学习CSS的重要性
- Web开发必备：前端开发的核心技能
- 视觉控制：完全控制网页外观
- 用户体验：直接影响用户的视觉体验
- 性能优化：优化样式可以提升页面性能
- 创意表达：实现设计师的创意想法
- 职业发展：前端开发职位的基本要求
CSS的发展历程
- 1996年：CSS1发布，基本样式功能
- 1998年：CSS2发布，增加定位和媒体类型
- 2011年：CSS3模块化发布，新增大量特性
- 2017年：CSS Grid布局得到广泛支持
- 现在：CSS持续进化，新特性不断添加