CSS building blocks

该模块继续进行CSS的第一步 -现在您已经熟悉了该语言及其语法,并获得了一些使用它的基本经验,并且有时间进一步深入. 该模块研究级联和继承,所有可用的选择器类型,单位,大小,背景和边框样式,调试等.

目的是为您提供编写胜任的CSS的工具包,并帮助您了解所有基本理论,然后再继续学习诸如文本样式CSS布局之类的更具体的学科.

Prerequisites

在开始本模块之前,您应该具有:

  1. 基本了解使用计算机和被动使用Web(即,只是看着它,消费内容).
  2. 基本工作环境已设置,如安装基本软件中所述 ,以及对如何创建和管理文件的理解(如处理文件中所述) .
  3. 基本熟悉HTML,如HTML简介模块中所述.
  4. 对CSS基础的理解,如CSS第一步模块中所述.

注意 :如果您在无法创建自己的文件的计算机/平板电脑/其他设备上工作,则可以尝试(大多数)在线编码程序中的代码示例,例如JSBinGlitch .

Guides

本模块包含以下文章,涵盖CSS语言的最基本部分. 在此过程中,您将遇到大量练习,以检验您的理解.

Cascade and inheritance
本课程的目的是加深您对CSS的一些最基本概念(级联,特异性和继承)的理解,这些概念控制CSS如何应用于HTML以及如何解决冲突.
CSS selectors
有多种CSS选择器可供选择,在选择要设置样式的元素时可以实现细粒度的精度. 在本文及其子文章中,我们将详细介绍各种类型,并了解它们的工作原理. 子条款如下:
The box model
CSS中的所有内容周围都有一个框,了解这些框是能够使用CSS创建布局或将项目与其他项目对齐的关键. 在本课程中,我们将对CSS Box Model进行适当的了解,以便您可以在了解其工作方式以及与之相关的术语的基础上,进行更复杂的布局任务.
Backgrounds and borders
在本课程中,我们将介绍CSS背景和边框可以做的一些创造性的工作. 通过添加渐变,背景图像和圆角,背景和边框是CSS中许多样式问题的答案.
Handling different text directions
近年来,为了更好地支持内容的不同方向性(包括从右到左但从上到下的内容(例如日语)),CSS发生了发展-这些不同的方向性称为书写模式 . 随着学习的进展并开始使用布局,对书写模式的理解将对您非常有帮助,因此我们将在本文中对它们进行介绍.
Overflowing content
在本课程中,我们将介绍CSS中的另一个重要概念- 溢出 . 当框内容纳的内容过多时,就会发生溢出. 在本指南中,您将了解它是什么以及如何对其进行管理.
CSS values and units
Every property used in CSS has a value or set of values that are allowed for that property. In this lesson, we will take a look at some of the most common values and units in use.
Sizing items in CSS
到目前为止,在各种课程中,您遇到了许多使用CSS来调整网页上项目大小的方法. 了解设计中的不同功能有多重要很重要,在本课程中,我们将总结元素通过CSS获得尺寸的各种方式,并定义一些关于尺寸的术语,这些将在将来对您有所帮助.
Images, media, and form elements
在本课程中,我们将了解CSS如何处理某些特殊元素. 图像,其他媒体和表单元素在使用CSS设置样式上的能力方面与常规框不同. 了解什么是可能的以及什么是不可能的可以节省一些挫败感,本课程将重点介绍您需要了解的一些主要知识.
Styling tables
样式化HTML表并不是世界上最迷人的工作,但是有时我们所有人都必须这样做. 本文提供了使HTML表看起来更好的指南,并着重介绍了一些特定的表样式技术.
Debugging CSS
有时在编写CSS时,您会遇到一个问题,即CSS似乎并没有达到您的期望. 本文将为您提供有关如何调试CSS问题的指南,并向您展示所有现代浏览器中包含的DevTools如何帮助您找到正在发生的情况.
Organizing your CSS
当您开始处理较大的样式表和大型项目时,您会发现维护庞大的CSS文件可能会充满挑战. 在本文中,我们将简要介绍一些编写CSS使其易于维护的最佳实践,以及将被其他人用来帮助提高维护性的一些解决方案.

Assessments

是否想测试您的CSS技能? 以下评估将测试您对以上指南中涵盖的CSS的理解.

Fundamental CSS comprehension
此评估测试您对基本语法,选择器,特异性,框模型等的理解.
Creating fancy letterheaded paper
如果您想给人留下正确的印象,那么在漂亮的带抬头的信纸上写一封信可能是一个很好的开始. 在这项评估中,我们将挑战您创建一个在线模板来实现这种外观.
A cool looking box
在这里,您将获得一些使用背景和边框样式创建醒目的框的练习.

See also

Advanced styling effects
本文充当技巧之框,介绍了一些有趣的高级样式功能,例如框阴影,混合模式和滤镜.