本课程需要具备的知识：

• HTML5 (opens new window)

CSS3教程 - 1 CSS简介

在 HTML5 教程中，已经介绍了前端页面的构成，主要包括：

• HTML：用于描述页面的结构
• CSS：用于控制页面中元素的样式
• JavaScript：用于响应用户操作

通过 CSS，我们可以让页面上的内容和样式分离，使得网页的内容可以被不同的样式装饰，最终以不同的方式显示，而无需改变HTML的结构，从而提高网页的可维护性和可读性。就像王者荣耀中，一个英雄可以有很多的皮肤，使用不同的皮肤可以显式不同的效果，CSS就像网页的皮肤，相同的 HTML 使用不同的CSS样式，可以让网页显示不同的效果。

1.1 CSS3的新特性

简单了解一下，可以跳过...

• 强大的选择器：CSS3 新增了许多实用的选择器，如属性选择器、伪类选择器和伪元素选择器等。例如input[type="text"]可以直接选择所有类型为文本的输入框；:hover伪类可以在鼠标悬停时改变元素的样式；::before和::after伪元素可以在元素内容之前或之后插入生成的内容。
• 丰富的文本效果：提供了更多的文本样式和排版功能，如text-shadow属性可以为文本添加阴影效果，word-wrap和word-break属性可以更好地控制文本的换行和断字，@font-face规则允许使用自定义字体，极大地丰富了网页的字体选择。
• 灵活的盒模型：引入了弹性盒模型（Flexbox）和网格布局（Grid Layout）。Flexbox 可以轻松实现元素的水平和垂直居中、自适应布局等，使页面布局更加灵活和高效；Grid Layout 则提供了一种基于网格的二维布局系统，能够方便地创建复杂的页面布局，如多栏布局、响应式布局等。
• 过渡与动画：通过transition属性可以实现元素在不同状态之间的平滑过渡效果，如颜色变化、大小变化、位置移动等，无需使用 JavaScript。@keyframes规则和animation属性则可以创建复杂的动画效果，如动画的循环播放、延迟执行、速度曲线等，为网页添加动态交互效果。
• 背景与边框：背景方面新增了background-size属性可以控制背景图像的大小，background-origin和background-clip属性可以更精确地控制背景图像的显示区域；边框方面可以使用border-radius属性创建圆角边框，还可以使用box-shadow属性为元素添加阴影效果，使元素的外观更加丰富和立体。
• 响应式设计：媒体查询（Media Queries）是 CSS3 中用于响应式设计的重要特性，通过@media规则可以根据不同的设备特性，如屏幕宽度、高度、分辨率等，应用不同的样式规则，从而实现网页在不同设备上的自适应显示，提高用户体验。

其他的介绍就不多逼逼了，赶紧学习！