Learn CSS!

# 学习 CSS

这是一个经常更新的 CSS 课程和参考，可帮助你提高 web 样式专业技能。

# 欢迎来学习 CSS！

本课程将会把 CSS 的基本原理分解为可消化的并易于理解的小块。在接下来的几个模块中，你将会学习 CSS 内核是如何工作的，并如何在项目中有效地使用它们。在 "Learn CSS" logo 下面的菜单可以定位到各个模块。

你将会学习 CSS 基本知识，比如盒子模型、层叠、特殊性、flexbox、grid 和 z-index等等。当然，除了这些基本知识，你还会学习到功能、颜色类型、渐变、逻辑属性和继承的知识。让你成为全面的前端开发人员，并有能力构建任何用户界面。

每个模块都包含交互 demo 和自测来巩固你的知识。除了通过阅读和 demo 来学习之外，每个主题都有相应的播客片段，这是学习和持续扩展知识的另一种方式。

本课程是为初学者和高级 CSS 开发人员创建的。你可以重头到尾学习该课程，以从上到下全面了解 CSS。或者你可以当做一个参考手册一样进行查阅特点主题。如果你是完全新手，建议去查看 MDN 的 HTML 入门文档，来学习如何编写标签和引入你的样式表。

译者注

在这里你将会学到：

# 盒子模型

CSS 显示的每一个内容都是一个盒子。理解盒子模型是如何工作，是 CSS 的核心基础。

# 选择器

想要把 CSS 应用在某个元素上，那首选你得选中这个元素。CSS 为你提供了很多种方法，你可以在这个模块中去探索。

# 层叠

有时会有两个或者多个样式规则应用在同一个元素上。在这个模块，你可以了解浏览器是如何选择的，它的规则是什么？

# 优先级

在这个模块我们更深入研究优先级，这是层叠的关键部分。

# 继承

有一些 CSS 属性，如果你不给它写上值，它会继承一些值。在本模块中，我们去了解它的工作原理和如何使用它。

# 颜色

CSS 有好几种方式写颜色。在这个模块，我们看一看最常用的颜色值有哪些。

# 尺寸单位

在这个模块中，我们将学习如何定义元素大小，并让它运行在弹性的web界面中。

# 布局

大致介绍几种构建组件或页面布局的方法。

# Flexbox

当多个元素组在一个维度（比如一行或一列）需要各种排列时，非常适合 Flexbox 来进行布局。我们将在此模块进行学习。

# 网格

CSS 网格提供二维布局的能力，可控制行和列的同时布局。在这模块中我将学习它的一切。

# 逻辑属性

逻辑上，流相关属性与（？），而不是屏幕上的物理形状。学习如何使用这种比较新的CSS方法。

# 间距

了解如何使用元素间距技巧，当你准备构建组件或你正在使用的布局方法。

# 伪元素

伪元素就像新增了一个额外的元素且不需要新增 HTML 节点。它们具有多种角色，你可以在本模块了解它们。

# 伪类

伪类可以让你根据状态的改变来使用不同的CSS。这意味着你可以设计一些响应用户操作的表现形式，例如输入无效的电子邮件地址等。

# 边框

边框为你盒子模型提供一个框框。在这本模块中，了解使用 CSS 来改变边框的大小、样式和颜色。

# 阴影

有很多种方法，使用 CSS 给文本和元素添加阴影。在这个模块中我们将学习它们有哪些细节，和它们为什么这么设计。

# 焦点

理解焦点在你应用程序中的重要性。你将了解如何管理焦点，以及如何确保页面路径正常，不管用户是使用的鼠标，还是使用键盘导航。（无障碍）

# Z-index 和 层叠上下文

在本模块中，将了解如何使用 z-index 和层叠上下文来控制元素之间的上下位置顺序。

# 函数

CSS 有一系列内置函数。在本模块中，你将了解一些关键函数并如何使用它们。

# 渐变

在本模块中，你将了解如何使用 CSS 中的各种类型渐变。渐变可用于创建大量的实用效果，而不需要使用图片。

# 动画

动画是突出交互元素，并为你的设计增添趣味的好办法。在本模块中，学习如何使用 CSS 添加和控制动画。

# 滤镜

CSS 滤镜可以实现那些你认为只能出现在图像处理软件（比如PS）中的效果。在本模块中，你将会发现它是多么有用！

# 混合模式

通过混合两个或多个图层来创建合成效果。在本模块中，学习怎么使用白色背景切割一个图片

# 结论和下一步

这里有帮助你进行下一步的更多资源

← 001 Box Model →