CSS 基础（一）

层叠样式表(Cascading Style Sheets，CSS)是一种样式表语言，用于描述用HTML或XML(包括XML方言，如SVG、MathML或XHTML)编写的文档的表示。CSS描述了元素应该如何在屏幕上、纸上、演讲中或其他媒体上呈现。

CSS是开放web的核心语言之一，并根据W3C规范在web浏览器之间进行了标准化。以前，CSS规范的各个部分的开发是同步完成的，这允许对最新的建议进行版本控制。您可能听说过CSS1、CSS2.1甚至CSS3。永远不会有CSS3或CSS4;更确切地说，现在所有东西都是没有版本号的CSS。

在CSS 2.1之后，规范的范围显著增加，不同CSS模块的进展开始有很大的不同，因此对每个模块单独开发和发布推荐变得更加有效。W3C现在不再对CSS规范进行版本控制，而是定期对CSS规范的最新稳定状态和各个模块的进度进行快照。CSS模块现在有版本号或级别，例如CSS Color Module Level 5。

1、核心资源

1.1 CSS的介绍

如果您是web开发新手，请务必阅读我们的CSS基础文章，了解CSS是什么以及如何使用它。

1.2 CSS教程

我们的CSS学习区包含丰富的教程，带你从初学者到熟练，涵盖所有的基础知识。

1.3 CSS参考

我们为经验丰富的Web开发人员提供了详尽的CSS参考，描述了CSS的每个属性和概念。

2、教程

我们的CSS学习区有多个模块，从基础开始教CSS -不需要以前的知识。

2.1 CSS的第一步

CSS(层叠样式表)用于样式和布局网页-例如，改变内容的字体，颜色，大小和间距，将其分成多个列，或添加动画和其他装饰功能。本模块为您掌握CSS的基础知识提供了一个温和的开端，包括它是如何工作的，语法是什么样子的，以及如何开始使用它向HTML添加样式。

2.2 CSS构建块

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

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

1.3 CSS文本样式

介绍了CSS语言的基础知识后，下一个CSS主题是文本样式化——这是使用CSS最常见的事情之一。在这里，我们看一下文本样式基础，包括设置字体、粗体、斜体、行和字母间距、阴影和其他文本功能。我们将通过查看将自定义字体应用到页面以及样式列表和链接来完善该模块。

1.4 CSS布局

到目前为止，我们已经了解了CSS基础知识，如何设置文本样式，以及如何设置和操作内容所在的框。现在是时候看看如何将框放置在与视口相关的正确位置，以及彼此之间的位置。我们已经介绍了必要的先决条件，所以我们现在可以深入了解CSS布局，查看不同的显示设置，现代布局工具，如flexbox, CSS网格和定位，以及一些您可能仍然想知道的遗留技术。

1.5 使用CSS解决常见问题

本模块提供的链接指向的内容部分解释如何使用CSS来解决创建网页时的常见问题。

3、参考

• CSS参考:这是为经验丰富的Web开发人员提供的详尽的参考，描述了CSS的每个属性和概念。
• CSS关键概念:
  • 语言的语法和形式
  • 特异性、继承性和级联性
  • CSS单位、值和函数符号
  • 盒子模型和边缘崩溃
  • 包含块
  • Stacking和块格式上下文
  • 初始值、计算值、使用值和实际值
  • CSS简写属性
  • 网格布局
  • 选择器
  • 媒体查询
  • 动画

4、Cookbook

CSS布局cookbook的目的是汇集常见的布局模式的cookbook，你可能需要在你的网站中实现的东西。除了提供可以作为项目起点的代码外，这些cookbook还强调了使用布局规范的不同方式以及作为开发人员可以做出的选择。

5、CSS开发工具

• 您可以使用W3C CSS验证服务来检查您的CSS是否有效。这是一个非常有用的调试工具。
• 火狐开发者工具允许你通过检查器和样式编辑器查看和编辑页面的实时CSS。
• Firefox的Web Developer扩展可以让您跟踪和编辑观看网站上的实时CSS。

CSS demos

通过探索最新的CSS技术实例来激发你的创造力。