Chrome 将于 5 月 20-21 日重返 Google I/O!
立即注册
通过集合保持井井有条 根据您的偏好保存内容并进行分类。
check_circle
欢迎来到 Learn CSS!
keyboard_arrow_down keyboard_arrow_up
subject 文章
一个常青的 CSS 课程和参考,可提升您的 Web 样式专业知识。
check_circle
盒模型
keyboard_arrow_down keyboard_arrow_up
subject 文章
CSS 显示的所有内容都是一个盒子。因此,了解 CSS 盒模型的工作原理是 CSS 的核心基础。
check_circle
选择器
keyboard_arrow_down keyboard_arrow_up
subject 文章
要将 CSS 应用于元素,您需要选择它。CSS 为您提供了多种不同的方法来执行此操作,您可以在本模块中探索它们。
check_circle
层叠
keyboard_arrow_down keyboard_arrow_up
subject 文章
有时,两个或多个相互竞争的 CSS 规则可能适用于一个元素。在本模块中,了解浏览器如何选择使用哪个规则,以及如何控制此选择。
check_circle
特异性
keyboard_arrow_down keyboard_arrow_up
subject 文章
check_circle
继承
keyboard_arrow_down keyboard_arrow_up
subject 文章
如果您没有为某些 CSS 属性指定值,它们会继承。在本模块中,了解这是如何工作的,以及如何利用它。
check_circle
颜色
keyboard_arrow_down keyboard_arrow_up
subject 文章
有几种不同的方法可以在 CSS 中指定颜色。在本模块中,我们将了解最常用的颜色值。
check_circle
尺寸单位
keyboard_arrow_down keyboard_arrow_up
subject 文章
在本模块中,了解如何使用 CSS 调整元素大小,以及如何使用灵活的 Web 媒介。
check_circle
布局
keyboard_arrow_down keyboard_arrow_up
subject 文章
在构建组件或页面布局时,您可以选择的各种布局方法的概述。
check_circle
Flexbox
keyboard_arrow_down keyboard_arrow_up
subject 文章
Flexbox 是一种布局机制,旨在在一个维度中布局项目组。在本模块中学习如何使用它。
check_circle
Grid
keyboard_arrow_down keyboard_arrow_up
subject 文章
CSS Grid 布局提供了一个二维布局系统,可在行和列中控制布局。在本模块中,探索网格所提供的一切。
check_circle
逻辑属性
keyboard_arrow_down keyboard_arrow_up
subject 文章
逻辑的、流相关的属性和值链接到文本的流,而不是屏幕的物理形状。了解如何利用这种更新的 CSS 方法。
check_circle
间距
keyboard_arrow_down keyboard_arrow_up
subject 文章
了解如何选择最佳的元素间距方法,同时考虑您正在使用的布局方法和需要构建的组件。
check_circle
伪元素
keyboard_arrow_down keyboard_arrow_up
subject 文章
伪元素类似于添加或定位额外的元素,而无需添加更多 HTML。它们具有多种角色,您可以在本模块中了解它们。
check_circle
伪类
keyboard_arrow_down keyboard_arrow_up
subject 文章
伪类允许您根据状态更改应用 CSS。这意味着您的设计可以响应用户输入,例如无效的电子邮件地址。
check_circle
边框
keyboard_arrow_down keyboard_arrow_up
subject 文章
边框为您的盒子提供框架。在本模块中,了解如何使用 CSS 更改边框的大小、样式和颜色。
check_circle
阴影
keyboard_arrow_down keyboard_arrow_up
subject 文章
有多种方法可以在 CSS 中向文本和元素添加阴影。在本模块中,您将学习如何使用每个选项以及它们的设计任务。
check_circle
焦点
keyboard_arrow_down keyboard_arrow_up
subject 文章
了解焦点在您的 Web 应用程序中的重要性。您将了解如何管理焦点,以及如何确保页面上的路径适用于使用鼠标的人和使用键盘导航的人。
check_circle
Z-index 和堆叠上下文
keyboard_arrow_down keyboard_arrow_up
subject 文章
在本模块中,了解如何通过使用 z-index 和堆叠上下文来控制事物相互堆叠的顺序。
check_circle
函数
keyboard_arrow_down keyboard_arrow_up
subject 文章
CSS 有一系列内置函数。在本模块中,您将了解一些关键函数以及如何使用它们。
check_circle
渐变
keyboard_arrow_down keyboard_arrow_up
subject 文章
在本模块中,您将了解如何使用 CSS 中提供的各种类型的渐变。渐变可用于创建各种有用的效果,而无需使用图形应用程序创建图像。
check_circle
动画
keyboard_arrow_down keyboard_arrow_up
subject 文章
动画是突出显示交互元素以及为您的设计增加趣味性的好方法。在本模块中,了解如何使用 CSS 添加和控制动画效果。
check_circle
滤镜
keyboard_arrow_down keyboard_arrow_up
subject 文章
CSS 中的滤镜意味着您可以应用您可能只认为在图形应用程序中才可能实现的效果。在本模块中,您可以发现可用的滤镜。
check_circle
混合模式
keyboard_arrow_down keyboard_arrow_up
subject 文章
通过混合两个或多个图层来创建合成效果,并在本关于混合模式的模块中学习如何隔离具有白色背景的图像。
check_circle
列表
keyboard_arrow_down keyboard_arrow_up
subject 文章
从结构上讲,列表由填充有列表项的列表容器元素组成。在本模块中,您将学习如何设置列表所有部分的样式。
check_circle
过渡
keyboard_arrow_down keyboard_arrow_up
subject 文章
在本模块中,学习如何定义元素状态之间的过渡。使用过渡通过为用户交互提供视觉反馈来改善用户体验。
check_circle
溢出
keyboard_arrow_down keyboard_arrow_up
subject 文章
溢出是指如何处理不适合设定父级大小的内容。在本模块中,您将跳出框框思考,并学习如何设置溢出内容的样式。
check_circle
背景
keyboard_arrow_down keyboard_arrow_up
subject 文章
在本模块中,学习您可以使用 CSS 设置盒子背景样式的方法。
check_circle
文本和排版
keyboard_arrow_down keyboard_arrow_up
subject 文章
check_circle
结论和后续步骤
keyboard_arrow_down keyboard_arrow_up
subject 文章
CSS 测验
参加测验,赢取徽章。正确回答 CSS 问题即可赢取您的 Learn CSS 徽章。
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]]