资料: 什么是 CSS
作者:  来源:   2016-04-12 00:00:00

Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。

文档 是信息的集合,它使用一门 标记语言 作为结构。

将一篇文档 呈现 给用户是指将文档转换成你的听众能够使用的一种形式。火狐、Chrome或IE等浏览器,用于将文档以可视的形式进行呈现,如在计算机屏幕、投影仪或打印机上。

示例

你现在阅读的这个网页就是文档。

网页中的信息通常使用标记语言 HTML (HyperText Markup Language) 来组织它的结构。

一个应用中的对话框,也称为模态窗口,也是文档。

这样的对话框可能也会使用类似于 XUL 这样的标记语言。Mozilla 的有些应用使用了该语言。

在该教程中,如果使用像下方这样标题为 更多细节 的框,里面会包含额外信息。如果你迫切的想完成整个教程,那么可以跳过这些方框,等到以后有时间再回来看。当然也可以在碰到方框的时候去阅读这些内容,或者更进一步的,按照里面提供的链接去了解更多细节。

更多细节

一个文档并不等同于一个文件。它甚至可能不会保存在一个文件中。

举例来说,你现在阅读的这个文档就不是保存在一个文件中。当你的浏览器请求该页面时,服务器会查询数据库生成文档,将散落在众多文件中的文档的碎片搜集起来。然而在本教程中,你使用的都是保存在文件中的文档。

关于文档与标记语言的更多信息,可以查看本网站的其他部分—例如:

HTML 用于 web 页面

XML 用于结构化文档

SVG 用于图形

XUL 用于 Mozilla 中的用户界面

在教程的第二部分,你会看到使用这些标记语言的例子。

为用户展现 文档意味着将其转换成一个可读性良好的格式。像 Firefox, Chrome 或是 Internet Explorer 这样的浏览器倾向于使用更视觉化的方式来展现文档 — 例如,在计算机屏幕,投影仪或是打印机上。

更多细节

CSS 并非仅仅用于浏览器,也不仅限于视觉展现。按照 CSS 的正式术语来讲,将文档呈现给用户的程序称为用户代理(UA)。浏览器只是用户代理的其中之一。不过在教程的第一部分中,你将只在浏览器中使用 CSS。

要了解更多 CSS 术语定义的相关内容,请查看 CSS 规范的 定义。

动手:创建一个文档

在你的电脑中创建一个新的文件夹,用于保存和管理本指南中的练习。

打开你的文本编辑器并创建一个新文件。该文件将用于保存后续练习中的文档。

将下面的内容复制粘贴进文本文件中。保存文件,将其命名为 doc1.html

Cascading

Style

Sheets

在你的浏览器中开启一个新的标签页或窗口,打开文件。

你会看到一串开头字母大写的文本,像这样:

Cascading Style Sheets

由于你的浏览器与该 wiki 的设置可能不同,所以你看到的内容与上面显示的不一定相符合。如果在字体、间距或颜色有区别,请不要担心,因为这些内容暂时无关紧要。

信息: 为何使用CSS?

CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知,如何展现文档的细节即为样式(style)。您可以将样式从它的内容分离出来,以便您能够:

避免重复

更容易维护

为不同的目的,使用不同的样式而内容相同

例如

您的网站可能有成千上万的页面外观相似。使用CSS,您可以将样式信息存储在公共的文件中以供所有的页面共用。

当用户显示页面时,用户的浏览器将样式信息和页面内容一同加载。

当用户打印页面时,您可以提供不同的样式信息,以便于打印出来的页面更易于阅读。

总之,在HTML中,您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。 (在本教程后续内容中,您会看到此种的例外情况。)

更多的细节

象HTML之类的标记语言也会提供指定样式的方法。

例如,在HTML中,您可以使用标签来加粗文字,同时,您也可以在页面的标记中指定背景颜色。

当您使用CSS时,您通常要避免使用标记语言的这些特性,以便您所有的文档样式信息保存在同一地方。

行动:创建样式表

在与前面相同的目录中,新建另一个文本文件。该文件将成为您的样式表。请将它命名为:style1.css

在您的CSS文件中,复制、粘贴下面的行,并保存该文件:

strong {color: red;}

连接您的文档和样式表

为将您的文档和样式表相连,请编辑您的HTML文件。并添加下面高亮的行:

Cascading

Style

Sheets

保存该文件并刷新您的浏览器。该样式表将首字母显示为红色,如下所示:

Cascading Style Sheets

(来源:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started/What_is_CSS


公共课