学习 CSS

一个常青的 CSS 课程和参考,可提升您的 Web 样式专业知识。

 

欢迎来到 Learn CSS!

文章

一个常青的 CSS 课程和参考,可提升您的 Web 样式专业知识。

盒模型

文章

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

选择器

文章

要将 CSS 应用于元素,您需要选择它。CSS 为您提供了多种不同的方法来执行此操作,您可以在本模块中探索它们。

层叠

文章

有时,两个或多个相互竞争的 CSS 规则可能适用于一个元素。在本模块中,了解浏览器如何选择使用哪个规则,以及如何控制此选择。

特异性

文章

本模块深入探讨了特异性,它是层叠的关键部分。

继承

文章

如果您没有为某些 CSS 属性指定值,它们会继承。在本模块中,了解这是如何工作的,以及如何利用它。

颜色

文章

有几种不同的方法可以在 CSS 中指定颜色。在本模块中,我们将了解最常用的颜色值。

尺寸单位

文章

在本模块中,了解如何使用 CSS 调整元素大小,以及如何使用灵活的 Web 媒介。

布局

文章

在构建组件或页面布局时,您可以选择的各种布局方法的概述。

Flexbox

文章

Flexbox 是一种布局机制,旨在在一个维度中布局项目组。在本模块中学习如何使用它。

Grid

文章

CSS Grid 布局提供了一个二维布局系统,可在行和列中控制布局。在本模块中,探索网格所提供的一切。

逻辑属性

文章

逻辑的、流相关的属性和值链接到文本的流,而不是屏幕的物理形状。了解如何利用这种更新的 CSS 方法。

间距

文章

了解如何选择最佳的元素间距方法,同时考虑您正在使用的布局方法和需要构建的组件。

伪元素

文章

伪元素类似于添加或定位额外的元素,而无需添加更多 HTML。它们具有多种角色,您可以在本模块中了解它们。

伪类

文章

伪类允许您根据状态更改应用 CSS。这意味着您的设计可以响应用户输入,例如无效的电子邮件地址。

边框

文章

边框为您的盒子提供框架。在本模块中,了解如何使用 CSS 更改边框的大小、样式和颜色。

阴影

文章

有多种方法可以在 CSS 中向文本和元素添加阴影。在本模块中,您将学习如何使用每个选项以及它们的设计任务。

焦点

文章

了解焦点在您的 Web 应用程序中的重要性。您将了解如何管理焦点,以及如何确保页面上的路径适用于使用鼠标的人和使用键盘导航的人。

Z-index 和堆叠上下文

文章

在本模块中,了解如何通过使用 z-index 和堆叠上下文来控制事物相互堆叠的顺序。

函数

文章

CSS 有一系列内置函数。在本模块中,您将了解一些关键函数以及如何使用它们。

渐变

文章

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

动画

文章

动画是突出显示交互元素以及为您的设计增加趣味性的好方法。在本模块中,了解如何使用 CSS 添加和控制动画效果。

滤镜

文章

CSS 中的滤镜意味着您可以应用您可能只认为在图形应用程序中才可能实现的效果。在本模块中,您可以发现可用的滤镜。

混合模式

文章

通过混合两个或多个图层来创建合成效果,并在本关于混合模式的模块中学习如何隔离具有白色背景的图像。

列表

文章

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

过渡

文章

在本模块中,学习如何定义元素状态之间的过渡。使用过渡通过为用户交互提供视觉反馈来改善用户体验。

溢出

文章

溢出是指如何处理不适合设定父级大小的内容。在本模块中,您将跳出框框思考,并学习如何设置溢出内容的样式。

背景

文章

在本模块中,学习您可以使用 CSS 设置盒子背景样式的方法。

文本和排版

文章

在本模块中,学习如何在 Web 上设置文本样式。

结论和后续步骤

文章

更多资源可帮助您迈出下一步。

CSS 测验

参加测验,赢取徽章。正确回答 CSS 问题即可赢取您的 Learn CSS 徽章。