Web前端开发技术第八周周五课堂笔记

CSS3简介

一、CSS3 基础概念

1. 定义

CSS3 是层叠样式表第三代标准（Cascading Style Sheets Level 3），是 CSS2.1 的升级与扩展，用于控制网页布局、样式、美化、动画交互，负责网页的视觉呈现，搭配 HTML 结构、JavaScript 行为，构成网页前端三大核心技术。
2. ###### 核心作用

实现结构与样式分离，统一页面风格、简化代码、提升页面美观度与交互体验，降低后期维护成本。
3. ###### 发展特点

CSS3 采用模块化拆分开发，不再是单一完整标准，分模块逐步完善8（选择器、盒模型、背景、渐变、动画、弹性布局等），兼容性逐步覆盖主流浏览器。

二、CSS3 核心新增特性（重点）

1. 强大选择器

在基础选择器（标签、类、ID）之上新增高级选择器，精准选中元素，减少多余 class 命名：

• 属性选择器： input[type="text"]
• 伪类选择器： :hover 、 :active 、 :nth-child() 、 :focus
• 伪元素选择器： ::before 、 ::after 、 ::first-letter
• 兄弟/后代高级选择器，精简结构代码。

2. 全新盒模型与边框优化

• border-radius：圆角边框，实现圆形、胶囊按钮，无需图片。
• box-shadow：盒子阴影（内阴影/外阴影），打造立体卡片效果。
• border-image：边框背景图片，自定义边框样式。
• box-sizing：标准盒模型/怪异盒模型切换，统一宽高计算规则，布局更可控。

3. 背景与渐变升级

• 多重背景：一个元素设置多张背景图。
• background-size、 background-origin 、 background-clip ：精细化控制背景尺寸、定位、裁切。
• 渐变效果：
• 线性渐变： linear-gradient()
• 径向渐变： radial-gradient()
  纯代码实现渐变背景，替代图片，提升加载速度。

4. 文字与文本美化

• text-shadow：文字阴影，立体文字、投影标题。
• text-overflow：文字溢出省略号搭配单行/多行文本截断。
• 自定义字体： @font-face 引入第三方字体，摆脱系统字体限制。
• 文字排版：字间距、行高、文字方向等精细化控制。

5. 2D / 3D 变换（Transform）

无需 JS 即可实现元素变形：

• 2D 变换：平移 translate 、缩放 scale 、旋转 rotate 、倾斜 skew 。
• 3D 变换：透视 perspective 、3D 旋转、空间位移，实现立体翻转、卡片 3D 效果。

6. 过渡与动画

7. transition 过渡

简单状态平滑过渡，如鼠标悬浮时颜色、大小、位置缓慢变化，实现柔和交互。
8. animation 关键帧动画

通过 @keyframes 定义动画流程，结合播放时长、次数、延迟、运动曲线，实现循环动画、加载动画、轮播特效等复杂动态效果。

7. 现代化布局方案

解决传统浮动布局的痛点，是移动端、响应式布局核心：

1. Flex 弹性布局
   一维布局，快速实现水平/垂直居中、自适应排列、均分间距，适配移动端。

2. Grid 网格布局
   二维布局，行+列划分区域，轻松实现复杂网页栅格、卡片流式布局。

3. 多列布局： column 实现报纸式多列文本排版。

4. 媒体查询与响应式

@media 媒体查询，根据屏幕宽度、设备类型、分辨率自动切换样式，实现响应式网页，适配电脑、平板、手机多端浏览。

三、CSS3 浏览器兼容性

1. 主流现代浏览器（Chrome、Edge、Firefox、Safari）全面支持 CSS3 大部分特性。
2. 低版本浏览器（如 IE）兼容较差，需添加私有前缀兼容：

• -webkit- ：Chrome、Safari、新版Edge
• -moz- ：Firefox
• -o- ：旧版Opera

3. 实际开发可结合 Autoprefixer 自动补全前缀，降低兼容成本。

四、CSS3 核心优势

1. 轻量化：代码替代图片、Flash，减少HTTP请求，页面加载更快。
2. 交互性强：原生过渡、动画、变换，提升用户体验。
3. 开发高效：选择器更灵活、布局更简单，大幅精简代码量。
4. 视觉丰富：圆角、阴影、渐变、3D 效果，满足现代UI设计需求。
5. 适配性广：结合媒体查询，完美适配多终端设备。

五、应用场景

• 网页UI美化：按钮、卡片、导航栏、弹窗样式设计
• 交互动效：悬浮效果、按钮动效、滚动动画
• 移动端布局：Flex/Grid 实现适配手机页面
• 可视化设计：渐变背景、立体元素、艺术文字
• 极简特效：加载动画、轮播、3D 展示模块

CSS基础选择器

标签指定选择器

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如 h3.special 或 p#one 。

后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。

并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。

字体样式属性

为了更方便的控制网页中各种各样的字体，CSS提供了一系列的字体样式属性。

1. font-size属性用于设置字号。

2. font-family属性用于设置字体。

3. font-weight属性用于定义字体的粗细。

4. font-style属性用于设置变体（字体变化）。

5. font属性用于对字体样式进行综合设置。