层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。HTML用于定义内容的结构和语义,CSS用于设计风格和布局。比如,您可以使用CSS来更改内容的字体、颜色、大小、间距,将内容分为多列,或者添加动画及其他的装饰效果。

学习路径

在尝试学习 CSS 之前,您应该了解 HTML 的基础知识。建议你先学习 HTML 简介模块 — 这一模块主要介绍了以下内容:

  • CSS,从 CSS 模块简介开始
  • 更高级的HTML模块
  • JavaScript,如何使用 Javascript 给网页加上动态功能

我们建议你同时学习 HTML 和 CSS,在这两个主题之间来回切换。因为有着 CSS 的 HTML 更加有趣,并且不了解 HTML 就不能真正掌握CSS。

在学习本章节之前,你应该会使用计算机,熟练的使用网页操作(哪怕只是盯着屏幕看)。你应该配置好一个基本的操作环境(见安装基本软件),知道如何创建和管理文件(见处理文件)—这两个都是 Web入门 的初学者模块的一部分。

我们建议你在学习本章内容前,先完成 Web入门,尽管这不是必须的;CSS 基础文章中涵盖的大部分内容在 CSS 模块简介中也有,而且 CSS 模块涵盖了更多的细节。

模块

本主题包含以下模块,建议按顺序阅读这些模块。你应该从第一个模块开始。

CSS 介绍
这个模块介绍了使用 CSS 的基础知识,包括选择器和属性,编写 CSS 的规则,将CSS 应用于 HTML 的方法,如何在 CSS 中指定长度、颜色和其他单位,层叠与继承,盒模型基础以及 CSS 的调试。
文本样式
这个模块介绍基础的文本样式,包括字体属性的设置,粗体和斜体,行和字母间距,阴影和其他文本功能。我们通过在网页上设置特定的字体,指定列表和链接的样式来完成这一模块。
样式框
接下来,我们来看看样式框,这是进行网页布局的基本元素之一。 这一模块我们重新学习框模型,并通过设置内边距、边框、外边距,指定自定义背景颜色、图像和其他特性以及在框上显示阴影和滤镜等奇特功能来控制样式框。
CSS 布局
到目前为止,我们已经学习了 CSS 基础知识、如何设置文本样式、如何设计并操作内容所在的框。现在应该考虑如何把你的框以合适的位置放置在视口内。我们已经学习了在深入 CSS 布局之前需要学会的必要知识,下一步我们通过设置 display 属性、使用浮动(float) 和定位(position)的传统布局方法、以及新的布局工具如flexbox,来深入学习 CSS 布局。
响应式设计 (待定)
近来一些不同类型设备有能力用不同的浏览器展现web,响应式设计已经成为一个核心的web开发技能。这个模块将涵盖基本原则和响应式工具,说明如何根据不同的设备特点如屏幕宽度、方向和分辨率来应用不同的文件,并探讨服务于不同的视频和图片基于这些特点的技术可行性。

解决常见的CSS问题

使用css解决常见问题 解释怎样使用css解决常见的问题,例如当你想要创建一个网页的时候可以参考:样式框。

参阅

CSS on MDN
MDN 上css文档的主要入口,包括详细的参考到高级的教程一系列内容。

文档标签和贡献者