欢迎学习 CSS!

本课程将 CSS 的基础知识细分为清晰易懂的片段。 在接下来的几个单元中,您将了解 CSS 的核心工作原理,以及如何在项目中有效地使用 CSS。使用带有“Learn CSS”徽标的菜单窗格可以在模块中导航。

您将学习 CSS 基础知识,例如框模型、级联和特异性、flexbox、网格和 Z-index。您还将了解函数、颜色类型、渐变、逻辑属性和继承,这可以帮助您成为多方面的前端开发者,准备好对任何界面进行开发。

每个单元都包含互动式演示和自我评估,方便您测试自己的知识掌握情况。除了通过阅读和演示进行学习之外,每个主题还附带一个播客分集,作为学习和继续拓展知识的另一种方式。

本课程面向 CSS 初级和高级开发者。您可以完整浏览这一系列系列视频,从上到下大致了解 CSS,也可以将其用作特定样式主题的参考。如果您刚开始接触 Web 开发,请参阅学习 HTML,以了解如何编写标记和关联样式表。

您将了解以下内容:

盒子模型

由于 CSS 显示的所有内容都是一个框,因此了解 CSS 框模型的工作原理是 CSS 的核心基础。

选择器

要将 CSS 应用于某个元素,您需要选择该元素。CSS 为您提供了多种不同的方法来实现这一点,您可以在本单元中探索这些方式。

级联

有时,一个元素适用两条或更多项相互竞争的 CSS 规则。了解浏览器如何选择要使用的类型,以及如何控制此选择。

特异性

本单元深入探讨了特异性,这是级联的一个关键部分。

继承

有些 CSS 属性会在您未指定值的情况下沿用。在本单元中,您将了解其工作原理,以及如何充分利用它。

颜色

您可以通过几种不同的方式在 CSS 中指定颜色。此模块会检查最常用的颜色值。

尺码单位

了解如何使用 CSS 以及灵活的网络媒介调整元素大小。

布局

简要介绍构建组件或页面布局时必须选择的各种布局方法。

Flexbox

Flexbox 是一种布局机制,旨在在一个维度中布局项目组。在本单元中,您将了解如何使用:

网格

CSS 网格布局提供了一种二维布局系统,可控制行和列的布局。了解电网提供的所有功能。

逻辑属性

逻辑相对流动属性和值与文本流相关联,而不是与屏幕的物理形状相关联。了解如何利用这种较新的 CSS 方法。

间距

了解如何根据您使用的布局方法和要构建的组件,选择最佳的元素间距方法。

伪元素

伪元素类似于无需添加更多 HTML 即可添加或定位额外元素。这些角色扮演着各种角色,您可以在本单元中了解这些角色。

伪类

借助伪类,您可以根据状态变化来应用 CSS。这意味着您的设计可以对用户输入做出响应,例如电子邮件地址无效。

边框

边框可为方框提供一个框架。了解如何使用 CSS 更改边框的大小、样式和颜色。

阴影

在 CSS 中,您可以通过多种方式为文本和元素添加阴影。 了解如何使用每个选项以及它们旨在执行的任务。

焦点

了解专注于 Web 应用的重要性。您将了解如何管理焦点,以及如何确保网页浏览路径对使用鼠标和使用键盘导航的用户均适用。

Z-index 和堆叠上下文

了解如何使用 Z-index 和堆叠上下文来控制元素相互堆叠的顺序。

函数

CSS 有一系列内置函数。了解一些关键功能及其使用方法。

渐变

在本单元中,您将了解如何使用 CSS 中提供的各种渐变类型。渐变可以创建各种有用的效果,而无需图形应用来创建图像。

动画

动画是突出互动元素的好方法,可为设计增添趣味和乐趣。了解如何使用 CSS 添加和控制动画效果。

滤镜

借助 CSS 中的滤镜,您可以应用您可能认为只有图形应用才具备的效果。在本单元中,您将了解可用的功能。

混合模式

通过混合两个或更多图层来创建合成效果,并了解如何在混合模式下分离具有白色背景的图像。

列表

从结构上讲,列表由一个填充列表项的列表容器元素组成。在本单元中,您将学习如何设置列表所有部分的样式。

转场效果

了解如何定义元素状态之间的转换。使用过渡效果可为用户互动提供视觉反馈,从而改善用户体验。

溢出

溢出是指如何处理不适合设定的父级尺寸的内容。在本单元中,您将跳出思维定式,学习如何设置溢出内容的样式。

背景

了解如何使用 CSS 为框的背景设置样式。

文字和排版

了解如何在网页上设置文本样式。

总结和后续步骤

有助于您采取后续行动的其他资源。

那么,准备好学习 CSS 了吗?让我们开始吧