CSS 构建块
本模块延续了 CSS 第一步 的内容 - 现在您已经熟悉了语言及其语法,并获得了一些使用它的基本经验,现在是时候深入了解了。本模块将探讨级联和继承、我们可用的所有选择器类型、单位、大小、样式化背景和边框、调试等等。
这里的目标是为您提供编写合格 CSS 的工具包,并帮助您了解所有基本理论,然后再继续学习更具体的学科,如 文本样式 和 CSS 布局.
先决条件
指南
本模块包含以下文章,涵盖了 CSS 语言最基本的部分。在学习过程中,您会遇到许多练习,让您测试您的理解程度。
- CSS 选择器
-
有多种 CSS 选择器可用,允许在选择要样式化的元素时实现精细的精度。在本篇文章及其子文章中,我们将详细介绍不同类型,看看它们是如何工作的。子文章如下:
- 级联、特异性和继承
-
本课的目的是让您了解 CSS 的一些最基本概念 - 级联、特异性和继承 - 它们控制 CSS 如何应用于 HTML 以及如何解决冲突。
- 级联层
- 盒子模型
-
CSS 中的所有内容都包含一个框,了解这些框是使用 CSS 创建布局或将项目与其他项目对齐的关键。在本课中,我们将仔细研究 CSS 盒子模型,以便您能够在了解其工作原理以及相关术语的情况下,继续进行更复杂的布局任务。
- 背景和边框
-
在本课中,我们将了解一些使用 CSS 背景和边框可以实现的创意效果。从添加渐变、背景图片和圆角到其他各种样式,背景和边框可以解决 CSS 中许多样式问题。
- 处理不同的文本方向
-
近年来,CSS 不断发展,以更好地支持不同的内容方向,包括从右到左以及从上到下的内容(例如日语) - 这些不同的方向被称为 **书写模式**。随着您学习的深入并开始处理布局,了解书写模式将对您非常有帮助,因此我们将在本文中介绍它们。
- 溢出内容
-
在本课中,我们将探讨 CSS 中另一个重要的概念 - **溢出**。溢出是指当内容过多而无法舒适地包含在盒子内时发生的情况。在本指南中,您将学习什么是溢出以及如何管理它。
- CSS 值和单位
-
CSS 中的每个属性都有一组允许的值。在本课中,我们将了解一些最常用的值和单位。
- 在 CSS 中调整项目大小
-
在之前的课程中,您已经接触到许多使用 CSS 对网页上的项目进行大小调整的方法。理解设计中不同功能的大小非常重要,在本课中,我们将总结通过 CSS 为元素设置大小的各种方法,并定义一些关于大小的术语,这些术语将帮助您在未来。
- 图像、媒体和表单元素
-
在本课中,我们将了解 CSS 如何处理某些特殊元素。图片、其他媒体和表单元素在使用 CSS 进行样式设置方面,与普通盒子有一些不同。了解什么可以做什么不可以,可以避免一些挫折,本课将重点介绍一些您需要了解的主要内容。
- 样式化表格
-
为 HTML 表格设置样式不是世界上最令人兴奋的工作,但有时我们都需要做。本文提供了一份使 HTML 表格看起来美观的指南,并重点介绍了一些特定的表格样式技巧。
- 高级样式效果
-
本文就像一个技巧宝盒,介绍了一些有趣的进阶样式功能,例如盒阴影、混合模式和滤镜。
- 调试 CSS
-
有时在编写 CSS 时,您会遇到 CSS 似乎无法按照您的预期工作的问题。本文将指导您如何调试 CSS 问题,并向您展示所有现代浏览器中包含的 DevTools 如何帮助您找出问题所在。
- 组织您的 CSS
-
当您开始处理更大的样式表和大型项目时,您会发现维护一个巨大的 CSS 文件可能很困难。在本文中,我们将简要介绍一些关于编写 CSS 以使其易于维护的最佳实践,以及您在其他人使用的一些解决方案,以帮助提高可维护性。
评估
以下评估将测试您对上面指南中所述 CSS 的理解。
- CSS 基础理解
-
本评估测试您对基本语法、选择器、特异性、盒子模型等的理解。
- 创建漂亮的信头纸
-
如果您想给别人留下好印象,在漂亮的信纸上写一封信是一个很好的开始。在本评估中,我们将挑战您创建一个在线模板来实现这样的外观。
- 一个看起来很酷的盒子
-
在这里,您将练习使用背景和边框样式创建引人注目的盒子。