此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

CSS 教程

学习 CSS 可能是一项令人望而生畏的事情。我们编写了很多的 CSS 教程来帮助你。有些教程完全面向新手,而其他文章展现了一些 CSS 的复杂特性,适合拥有丰富经验的开发者。

这个页面展现了这些文章,并且带有简短的描述。这些文章按照难度分组,因此你可以选择最适合你的。

CSS 初级教程

CSS 基础

这篇教程完全面向新手。假如你还没写过一行 CSS——这篇很适合你。这篇文章介绍了 CSS 的一些基础概念,引导你编写基础的样式表。

使用丰富多彩的背景

背景是优美样式的基础。CSS 允许你对每个容器设置不同的背景。这篇教程会讲述 CSS 与背景之间是如何相互影响,以及你如何得到想要的结果。

调整背景图片

CSS 允许你改变元素 d 背景图片的大小。这篇教程告诉你如何去实现。

使用媒体查询媒体查询

当前存在各种不同尺寸的屏幕,不同种类的设备。当你要求你的页面在各大平台都获得一个满意的渲染效果时,媒体查询将是一块基石。

理解 CSS 的 z-index

控制盒子的叠加层级是 web 开发者的一个基本需求。了解 CSS 的一些基础知识,z-index 将会变得小菜一碟。

CSS 中级教程

CSS 2(Level 1)标准放出后,CSS 增加了很多新特性。有些特性比较独立,而且很酷,你只需要对 css 的基本概念有一些直观的了解就可以使用它们。

CSS 计数器样式

对元素及页面计数对于 CSS 来讲是一项简单的事情。学习使用counter-resetcounter-incrementcounters()counter()

CSS 动画

CSS3 动画允许你通过关键帧定义样式,之后在关键帧之间变换,来形成一个动画。

CSS 过渡

CSS3 过渡可以以动画的形式来定义很多样式的过渡,也可以控制过渡的方式

CSS 变换

变换可以通过坐标改变元素的位置,可以使用位移,旋转等定义元素在 2D 或 3D 空间的状态。

CSS 渐变

渐变其实是图片,可以让一个颜色柔和的过渡到另一个颜色。CSS 中有很多渐变方式:线性渐变或者径向渐变等。这篇教程会讲解怎么使用渐变。

CSS 高级教程

CSS 也拥有一些特性来帮助你创建复杂的布局。虽然这特性可以使你用最简单的方式来达到布局效果,但对于那些没有太多经验的人来说,这些特性相当复杂。

CSS 多列布局

CSS3 引入了新的布局方式,可以让你简单的在元素中创建多列布局。尽管多列布局在很多设备上不常见,但多列布局在可打印页面或索引页中很有用。

CSS 弹性盒子布局

这个崭新的布局方式可以让盒子变得灵活,使盒子平滑的改变大小,对于复杂的界面来讲这是有力的工具。