什么是CSS?

您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!

CSS (层叠样式表) 让你可以创建好看的网页,但是它具体是怎么工作的呢? 这篇文章就是告诉我们什么是CSS,通过一些很简单的例子,同时还有一些专业术语。

先决条件: 基本的计算机知识,安装基础软件文件处理 的基础知识, 还有HTML基础 (学习 HTML概述。)
目标: 了解什么是CSS。

HTML概述 模块我们学习了HTML是什么,以及如何使用它来组成页面。 浏览器能够解析这些页面。标题 看起来会比正常文本更大,段落(p) 会另起一行,并且互相会有一定间隔。链接(Links)有下划线和不同的颜色,能够更好的和其他文本区分开来. 这些都是浏览器的默认样式 — 当开发者没有指定样式(style)时,浏览器通过这些最简单的样式使页面具有基本可读性。

The default styles used by a browser

如果所有网站都像上图那样,互联网就会非常枯燥。但是使用CSS就可以完全掌握浏览器如何显示HTML元素,可以充分展示你喜欢的设计样式。

CSS用来干什么?

前文提到过, CSS 是一门用于指定网页文件如何展示给用户的语言— 包括网页的样式,布局,等等。

一份网页文件是由标记语言组织起来的文本文件 — HTML 是最常见的标记语言, 但你可能也听说过 SVG 或 XML

译者注:原文使用document一词来指代HTML、SVG、XML等文档, 而不是“网页文件”。

展示一份文档给用户实际上是将文档变成用户可用的文件. Browsers, 如 Firefox, Chrome, 或 Edge , 都用于将文档可视化, 例如电脑屏幕、投影仪或打印机等。

注意: 浏览器有时候也被称为 user agent,大致可以当这个程序是一个存在于计算机系统中的人。 当我们讨论CSS时,浏览器是User agent的主要形式, 然而它并不是唯一的一个。还有其他可用的user agents — 像是那些可以把HTML和CSS文档转换为可以打印的PDF文档的软件。

CSS 可以用于给文档添加样式 — 比如改变标题和链接的颜色大小。 也可用于创建布局 — 比如 一个单列的文本变成包含主要内容区域和存放相关信息的侧边栏区域的 布局。它甚至还可以用来做一些特效 比如 动画。查看一下这段内容中给出的特定案例。

CSS 语法

CSS是一门基于规则的语言 — 你能定义用于你的网页中特定元素样式的一组规则. 比如“我希望页面中的主标题是红色的大字”

下面这段代码使用非常简单的CSS语法实现了之前提到的效果:

h1 {
    color: red;
    font-size: 5em;
}

语法由一个 选择器(selector)起头。 它 选择(selects) 了我们将要用来添加样式的 HTML元素。 在这个例子中我们为一级标题(主标题<h1>)添加样式。

接着输入一对大括号{ }。 在大括号内部定义一个或多个形式为 属性(property):值(value);声明(eclarations)。每个声明都指定了我们所选择元素的一个属性,之后跟一个我们想赋给这个属性的值。

冒号之前是属性,冒号之后是值。不同的CSS 属性(properties) 对应不同的合法值。在这个例子中,我们指定了 color 属性,它可以接受许多   颜色值(lor values)。 还有 font-size 属性, 它可以接收许多 size units 值。

一个 CSS 样式表可以包含很多个规则。

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

你会发现你已经很快掌握了一些属性的值,但是属性可以接受的值远不止这些。在MDN上每个属性都有单独的页面,不论你是忘记了某个属性,还是想要知道一个属性还能接受什么其它的值,这些页面都可以帮助你。

注意:在MDN上的 CSS reference 页面列举了所有的 CSS属性页面(同时也包括其它的CSS特性)。 另外,当你想要寻找一个CSS特性的更多内容时,多使用你的搜索引擎来搜索 "mdn css-feature-name" 。例如,搜索 "mdn color" 和 "mdn font-size"!

CSS 模块

你可以通过CSS 为许多东西添加样式,CSS 由许多模块(modules) 构成。你可以在 MDN 上浏览这些模块的参考内容(MDN reference),许多模块都被组织在自己单独的文档页面。例如,我想查找一下MDN reference的 Backgrounds and Borders 模块的相关内容,来了解它是用来做什么的、它还包括什么属性、它还有什么其它特性等。你也可以在 CSS Specification 查找(见下文),它定义了CSS规范 。

在这个阶段你不必过于担心 CSS 是如何组织的(how CSS is structured),但是它能帮助你更好的掌握 CSS。例如,你注意到某个属性和另外一些属性的相似点,并且它们可能确实是相同的格式。

举个具体点的例子:如上文中的 Backgrounds and Borders 模块 — 你会发现 background-colorborder-color 这两个属性在逻辑上相通。并且它也确实如此。

CSS 规范

所有的标准Web技术(HTML, CSS, JavaScript等) 都被定义在一个巨大的文档中,称作 规范specifications (或者简称为 "specs"),它是由 (像是 W3C, WHATWG, ECMAKhronos) 这些规范化组织所发布的,其中还定义了各种技术是如何工作的。

CSS 也不例外 — 它是由W3C(万维网联盟)中的一个名叫 CSS Working Group 团体发展起来的。这个团体是由浏览器厂商和其他公司中对 CSS 感兴趣的人作为代表组成的。也有其他的人员,比如 受邀专家(invited experts),他们作为不从属于任何组织的独立声音加入团体。

新的 CSS 特性被开发出来,或是因为某个浏览器热衷于开发新功能,或是因为Web设计人员与开发者要求增加一个新特性,又或是 CSS Working Group 内部的讨论决定。CSS 始终在发展,并伴随着新的特性。然而,有一件事情从始至终都未改变,那就是不让新的改变破坏旧的网站,即使是2000年建立的网站,如今也能正常访问!

作为一个 CSS 新手,你会发现阅读 CSS 规范 中的内容非常吃力 — 它旨在为工程师在用户代理(user agents)中实现对 CSS 各种特性的支持,而不是作为一本为Web开发者理解 CSS 内容的教程。即使是有经验的开发者,也更倾向于使用 MDN 文档或者其它教程。但是,知晓它的存在,理解 CSS、规范 和 浏览器支持(见下文) 之间的关系是很有价值的。

浏览器支持

当一个浏览器支持 CSS 后,我们就可以用它来进行Web开发了。这意味着我们写在 CSS 文件中的代码可以被指令执行,展示到荧幕中。在 CSS 如何工作 一节中我们会学习到更多的相关知识。但是让所有的浏览器都同时支持一个 CSS 新特性是不现实的,通常都会一个空档期 — 一些浏览器已经支持而另一些仍未支持。因此,查看特性的实现状态(implementation status)是非常有用的。在 MDN 上的每个属性的页面中都标有它们对应的状态,你可以通过这种方法来查看你是否可以去使用它。

以下是 CSS font-family 属性的兼容数据表。

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-familyChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Not supported on option elements. See bug 1536148.
IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes
system-ui
Experimental
Chrome Full support 56Edge No support NoFirefox No support No
No support No
Full support 43
Notes Alternate Name
Notes Supported on macOS only.
Alternate Name Uses the non-standard name: -apple-system
IE No support NoOpera Full support 43Safari Full support 9
Notes Alternate Name
Full support 9
Notes Alternate Name
Notes Supported since macOS 10.11.
Alternate Name Uses the non-standard name: -apple-system
WebView Android Full support 56Chrome Android Full support 56Firefox Android No support NoOpera Android Full support 43Safari iOS Full support 9
Alternate Name
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: -apple-system
Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

下一步

现在你对 CSS 已经有了一定的理解,接下来,通过 CSS 入门 的学习,你将可以自己写一些 CSS 代码了。

本章目录

  1. 什么是 CSS?
  2. CSS 入门
  3. How CSS is structured
  4. CSS 如何工作
  5. 用用你刚学到的知识