CSS构建基础(一)CSS构建

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

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

1、指南

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

1.1 选择器

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

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 更多

高级样式效果
本文就像一个小技巧盒,介绍了一些有趣的高级样式特性,比如框阴影、混合模式和滤镜。

猜你喜欢

转载自blog.csdn.net/chinusyan/article/details/132734433