C301 概述

Posted 2020-11-28 mindzone

CSS (层叠样式表) 让你可以创建好看的网页，但是它具体是怎么工作的呢?

 这篇文章通过一些很简单的例子，告诉我们什么是 CSS，

同时还会涉及一些和 CSS 相关的专业术语。

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

在 HTML概述 模块我们学习了HTML是什么，以及如何使用它来组成页面。 

浏览器能够解析这些页面。

标题部分看起来会比正常文本更大，段落则会另起一行，并且相互之间会有一定间隔。

链接通过下划线和不同的颜色与其他文本区分开来。

这些都是浏览器的默认样式——当开发者没有指定样式时，浏览器通过这些最简单的样式使页面具有基本可读性。

---

 

如果所有网站都像上图那样，互联网就会非常枯燥。

但是使用 CSS 就可以完全控制浏览器如何显示 HTML 元素，从而充分展示你喜欢的设计样式。

---

 

CSS用来干什么?

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

一份文档是由标记语言组织起来的文本文件 —— 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); 的 声明(declarations)。

每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

冒号之前是属性，冒号之后是值。不同的 CSS 属性(properties) 对应不同的合法值。

在这个例子中，我们指定了 color 属性，它可以接受许多颜色值；还有 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-color 和 border-color 这两个属性在逻辑上相通。

并且它也确实如此。

---

 

CSS 规范

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

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on ios	Samsung Internet
font-family	Full support1	Full support12	Full support1 Notes 打开	Full support3	Full support3.5	Full support1	Full support1	Full support18	Full support4	Full support10.1	Full support1	Full support1.0
system-ui	Full support56	Full support79	No supportNo打开	No supportNo	Full support43	Full support9 Notes Alternate Name 打开	Full support56	Full support56	No supportNo	Full support43	Full support9 Alternate Name 打开	Full support6.0

 

 

---

What are we missing?

Legend

Full support 

Full support

No support 

No support

See implementation notes.

See implementation notes.

Uses a non-standard name.

Uses a non-standard name.

---

 

下一步

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