MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CSS 是用来样式化和排版你的网页的 —— 例如更改网页内容的字体、颜色、大小,将内容分割成多列或者加入动画以及别的装饰型效果。本文将通过讲述CSS 的工作原理,包括选择器是什么,属性是什么,如何撰写CSS规则,如何将CSS应用到HTML,CSS中如何描述长度、颜色以及其他属性的计量单位,关于层叠与继承的知识和如何进行CSS的调试工作,带你走上掌握CSS的道路。 

前提要求

在开始阅读文章前,你应该有:

  1. 熟悉基本的电脑操作,以及使用过Web的经历(即查看一些网页,并获取其内容)。
  2. 最基础的工作环境,并且了解如何创建与管理、编辑文件,比如 Installing basic software(安装基础软件),Dealing with files(处理文件)。
  3. 对HTML有一些基础的了解------如 Introduction to HTML(HTML简介)。

注意:如果您正在电脑/平板电脑/其他设备或者其他不能够创建自己的文件的环境,你可以尝试一下在线开发环境如 JSBin 或者 Thimble(译者注:这是两个可以在线编辑html/css/js并且执行的网站)。

指南

这些模块将带你了解CSS的基础知识,并提供充足的机会让你测试一些技术。

CSS是怎么工作的
首先,我们先从基础讲起来说明什么是CSS,HTML是如何被浏览器转换成 DOM 的,以及CSS样式是如何被应用到DOM里的,这里有一些最基本的语法示例,这些代码就是被用于我们所游览网页上的代码。
CSS 语法 
接下来,我们将深入了解CSS语法更多的细节,了解属性及其值会形成声明,多个声明形成声明块,声明块和选择器形成完整的CSS规则。此外我们还会了解其他的CSS模块,如注释和空白。
选择器
选择器是在前一篇文章中已经提到过的,但在这个章节会引导我们深入更多的细节,通过这篇文字可以了解所有选择器类型和它们是如何工作的。
CSS  的值和单位 
有许多类型的CSS属性值需要学习,从数值颜色函数执行某一动作(如嵌入一个背景图像,或旋转一个元素)。而这些依赖于特定单位指定的确切值代表的是什么?列如你想让你的盒子是30像素宽,或30厘米,或30 ems吗?这个章节会指导我们了解更多的CSS数值、CSS颜色和简单的CSS函数,以及探索不太常见的单位比如度,甚至没有单位的数值。
级联和继承
CSS有两种不同但相关的方式解决选择器冲突(不同的选择器选择了相同的元素,哪个会被应用?)及元素嵌套的情况(有些子元素适合继承父元素的样式,有些则不适合)。这篇文章涵盖了使用这两种方式足够用的内容,但不是所有的内容。
盒模型
CSS盒模型是网络布局的基础——每个元素表示为一个矩形框,矩形框的content、padding、border和margin像是洋葱一样嵌套(或者说是一个4层的俄罗斯套娃)。浏览器显示一个页面,它会把那些样式应用到每个盒子中,周围的“洋葱层”有多大,盒子位置间的关系。在建立CSS布局之前,您需要理解这个盒子模型。
调试 CSS 
在这个模块的最后一篇文章中,我们看看CSS调试的基本知识,包括探索CSS应用到一个页面和其他一些游览器工具,可以帮助你找到你的CSS代码中的错误。

评估

下面评估将用于检测你对上述内容的学习情况。

Fundamental CSS comprehension(基本CSS理解)
这个精心设计的评估测试将帮助测试你对CSS的理解。

另请参阅

Intermediate Web Literacy 1: Intro to CSS
一个优秀的Mozilla基金会,探索和测试的很多技能在引言中讨论CSS模块。学习HTML元素在网页中如何使用CSS选择器,属性和值。

文档标签和贡献者

 此页面的贡献者: Ende93, dagundejuzi, bugzhang, funnyChinese, Dionysus, richardzacur
 最后编辑者: Ende93,