要学习的重要 CSS 概念。

CSS（层叠样式表）是一种基于规则的语言。它通过定义应用于元素或元素组的特定样式组来设置页面的样式和布局。

许多人会将 CSS 与 HTML 结合起来学习。这两种语言协同工作（CSS 规则用于设置 HTML 元素的样式），但由于其概念繁多，CSS 常常会让人感到困惑，难以理解。

如果您刚刚起步，请学习以下 CSS 概念以获得坚实的基础并理解基于规则的语言。

请注意：以下描述是对每个概念的简要概述。请阅读推荐阅读材料，深入了解每个 CSS 概念。

更好地理解 CSS 的第一步是了解这三个概念如何共同控制哪个 CSS 规则应用于哪个元素。

层叠是 CSS 的基本概念。顾名思义，样式表按层叠顺序排列（从上到下）。这意味着 CSS 规则的顺序很重要，当两个优先级相同的规则同时生效时，将使用 CSS 中最后一个规则。

一些在父元素上设置的 CSS 属性值会被其子元素继承，而有些则不会。这常常令人困惑，但其背后的原理实际上是为了让我们编写更少的 CSS 规则。

诸如“color”和“font-family”等属性是继承的，这就是我们经常使用 BODY 元素来分配它们的原因。

还值得了解的是，每个 CSS 属性都接受四个值来控制继承，本质上能够“打开和关闭”继承。

当多个规则应用于一个元素时，冲突的规则将按特异性排序并应用。每个选择器都有不同的特异性等级，具体如下：

当规则发生冲突时，CSS 会确定具有最高特异性的规则并将其应用于元素。

CSS 中的 !important 属性会覆盖任何指定的规则，并确保应用 !important 所指定的规则。如果不理解上述三个概念，很容易养成在每个未按预期应用的属性上使用 !important 的习惯。

然而，重要的是要理解，大多数开发人员认为使用 !important 是一种反模式。阅读以下推荐的文章，更好地理解何时以及如何使用 !important。

CSS 媒体查询用于根据所使用的屏幕分辨率或设备更改网站的样式。

当您需要将某些规则应用于特定场景时，可以组合使用媒体查询来创建特定场景。这创造了响应式和自适应设计的概念，并使它们能够在浏览器中协调一致地工作。

如果您想了解如何定义、使用和理解 CSS 媒体查询，请查看下面的推荐阅读。

多年来，CSS 的掌握和精通已变得愈发困难。值得庆幸的是，随着这门语言的发展，Flexbox 和 Grid 等概念应运而生。它们都提供了一种解决方案，使定位和页面布局更加轻松、快捷，并提升响应速度。

CSS 网格布局是一个二维布局系统。它允许你以行和列的方式布局内容，并具有许多简化复杂布局的功能。

弹性盒布局是一种基于方向的布局系统。它允许你调整元素的宽度、高度和顺序，以最佳地填充可用空间。

如果你喜欢这篇文章，或者觉得它对你有帮助，欢迎继续关注。你可以在 Twitter 上找到我，我会分享一些技巧和代码片段，@frontenddude