CSS构建基础（一）CSS构建-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS构建基础（一）CSS构建。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本模块继续CSS第一步的内容—现在您已经熟悉了该语言及其语法，并获得了使用它的一些基本经验，是时候更深入一些了。本模块将介绍层叠和继承(cascade and inheritance)、所有可用的选择器类型、单元、大小、样式背景和边框、调试等等。

本文的目的是为您提供编写称职CSS的工具包，并帮助您理解所有基本理论，然后再转向更具体的学科，如文本样式和CSS布局。

1、指南

该模块包含以下文章，它们涵盖了CSS语言的最基本部分。在这个过程中，你会遇到大量的练习来测试你的理解。

1.1 选择器

有各种各样的CSS选择器可用，允许在选择要样式化的元素时实现细粒度的精度。在本文及其子文章中，我们将详细介绍不同的类型，了解它们是如何工作的。分条款如下:

Type, class, and ID selectors
Attribute selectors
Pseudo-classes and pseudo-elements
Combinators

1.2 层叠、特异性和继承性

本课的目的是培养您对CSS的一些最基本概念的理解——层叠、专用性和继承（cascade, specificity, and inheritance）——这些概念控制着CSS如何应用于HTML以及如何解决冲突。

1.3 层叠层

本课旨在向您介绍层叠层，这是一个更高级的功能，建立在CSS层叠和CSS特异性的基本概念之上。

1.4 盒子模型

CSS中的所有内容都有一个框，理解这些框是能够使用CSS创建布局或将项与其他项对齐的关键。在本课中，我们将适当地了解CSS盒子模型（CSS Box Model），以便您可以了解它的工作原理和与之相关的术语，从而转移到更复杂的布局任务上。

1.5 背景与边框

在本课中，我们将看看你可以用CSS背景和边框做一些创造性的事情。从添加渐变、背景图像到圆角，背景和边框是CSS中许多样式问题的答案。

1.6 处理不同的文本方向

近年来，CSS不断发展，以便更好地支持不同的内容方向，包括从右到左以及从上到下的内容(如日文)——这些不同的方向被称为书写模式（writing modes）。当你在学习中取得进展并开始使用排版时，对写作模式的理解将对你非常有帮助，因此我们将在本文中介绍它们。

1.7 Overflowing content

在本课中，我们将学习CSS中的另一个重要概念——溢出(overflow)。溢出是指当有太多的内容无法适当地包含在一个框内时发生的情况。在本指南中，您将了解它是什么以及如何管理它。

1.8 CSS值和单位

CSS中使用的每个属性都有一个或一组允许的值。在这一课中，我们将看看一些最常用的值和单位。

1.9 CSS中的设置项的大小

到目前为止，在各种课程中，您已经遇到了许多使用CSS在网页上调整项大小的方法。了解设计中不同功能的大小是很重要的，在本课中，我们将总结元素通过CSS获得大小的各种方式，并定义一些有关大小的术语，这些术语将在将来对您有所帮助。

1.10 图像、媒体和表单元素

在这一课中，我们将看看在CSS中如何处理某些特殊元素。图像、其他媒体和表单元素在使用CSS对其进行样式设置的能力方面与常规盒子（boxes）略有不同。了解什么是可能的，什么是不可能的可以避免一些挫折，这节课将强调一些你需要知道的主要事情。

1.11 样式化表格

为HTML表格设计样式并不是世界上最迷人的工作，但有时我们都必须这样做。本文提供了一个使HTML表好看的指南，重点介绍了一些特定的表格样式技术。

1.12 CSS调试

有时在编写CSS时，您会遇到一个问题，您的CSS似乎没有按照您的期望工作。本文将为您提供如何调试CSS问题的指导，并向您展示所有现代浏览器中包含的DevTools如何帮助您找出发生了什么。

1.13 组织CSS

当您开始处理更大的样式表和大型项目时，您会发现维护一个巨大的CSS文件是一项挑战。在本文中，我们将简要介绍一些编写CSS以使其易于维护的最佳实践，以及您将发现其他人正在使用的一些解决方案，以帮助提高可维护性。

2、评价

下面的评估将测试你对上面指南中涉及的CSS的理解。

2.1 CSS的基本理解

这个评估测试您对基本语法、选择器、特异性、盒子模型等的理解。

2.2 制作精美的信纸

如果你想给人留下好的印象，用漂亮的信纸写一封信是一个很好的开始。在这个评估中，我们将挑战您创建一个在线模板来实现这样的外观。

2.3 一个看起来很酷的盒子

在这里，你会得到一些练习使用背景和边框样式来创建一个引人注目的框。

3 更多

高级样式效果
本文就像一个小技巧盒，介绍了一些有趣的高级样式特性，比如框阴影、混合模式和滤镜。文章来源地址https://www.toymoban.com/news/detail-699016.html

到了这里，关于CSS构建基础（一）CSS构建的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

CSS构建基础（一）CSS构建