CSS

状态

备忘录：正在写书本的大纲阶段。

本书的内容

这本书唯一的主题就是 CSS，因此，这本书不会告诉你 CSS 的历史，也不会著墨于 CSS 的好处与优点，因为在网路上已经有很丰富的资料。然而我鼓励读者若是时间许可，应该花些时间了解为什么网页技术怎么从 HTML 开始，后来衍生出 CSS，而最后又冒出 XHTML 。关于 CSS 的历史，你可参考 Who created CSS? CSS Early History，至于 CSS 的好处与优点，用了你就会了解。

虽然我会在适当的地方加入参考资料或是连结，但是基本上，没有阅读这些参考资料与连结并不会影响你学习 CSS。因此，除了自己动手作停下来之外，尽量别让其他的事情中断你的阅读。

CSS 3 增加了对圆角^[1]、阴影的直接支持，有助于简化开发。在以前要完成基本的边框圆角效果非常麻烦，需要自己提前制作好图片，无法仅借助CSS直接实现^[1]。

先统一辞汇

Cascading Style Sheet (CSS) 的中文翻译一直没有定调，有人称他为“层叠样式表”，也有称“串接样式表”，我想，我在这里不为 CSS 的中文译名正名，往后的文章中，中文一律用“样式表”来称呼 CSS，不过我宁可多用英文，以免造成误解。

还有一个重要的词汇“selector”，中文有“选择器”与“选取项”两种翻译，本书我采用后者。

前言：一个网页的构成

底下的说明，对于任何数位的文件来说，都会成立，但是我仍然将数位文件局限在网页这个范围，这样会让问题单纯一些。

从产生（或是制作）的过程来看，网页可以区分为：

内容（contents）
呈现（presentation）

两大元素。简单的说，我们会依照不同的重要性、不同的性质（属性）与意图，将网页的内容结构化，之后，再依据这个架构，给予各个部份合适的呈现方式。这就是我们最后看到的网页。

概述

不同性质的内容

我们先试著从不同的角度来看一分网页，先从浏览器呈现出来的画面，再到原始码，最后看看有没有什么遗漏的内容。

从浏览器看到的成品

大家可以回想一下你曾经看过或是作过的网页，从浏览器前端看得到的组成元素不外乎底下的几个要素：

标题（heading）: 网页的第一级标题、第二级标题、第三级 ... 标题。
段落（paragraph）: 指的是一段意义完整的图、文。
表格（table）: 例如价目表、行事历等等，由行、列组成的资料。
清单（list）: 有序的清单、无序清单与定义式清单。
图片（image）: 各种可以被浏览器读取的格式的图档。
超连结（hyperlink）: 超连结是网页有别于一般文件的一个很重大的分野，因此，我也把它当作是网页的一个要素。
表单（form）: 有按钮、单选选项（raido）、复选选项（check box）、输入栏位（text field）、输入文字区块（text area）等等。
多媒体（multimedia）: 影片、音乐或是 flash。

反观网页原始码

若是你熟悉原始码，上面我提到的每一个要素，你一定可以立刻对应到某个 HTML 的标签（tag），但是在原始码里面，你会发现更多东西，例如：

Javascript
meta 标签
style 标签
...

事实上，在原始码里面，我们还要提供许多很关键的资讯给浏览器或是搜寻引擎，这些资讯并不会呈现在使用者眼前，但是却与网页的呈现正确与否息息相关。这些资讯包括：利用 meta 标签告诉浏览器你的网页所使用的编码，例如：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

其他

若是你细心一点，你一定会发现，一个网页所包含的元素里面，我们漏提了许多的东西，例如：

关于整个版面的

前景、背景颜色
边界
间距

关于字体的

字型、字级与颜色
行高

HTML 与 CSS 的分工

谈到这里，我想你一定感觉到了，原来所谓的“标记语言（markup language）”确实是要替文件的内容加上注记，让一个文件的结构清晰、层次分明。熟悉 HTML 的人会说，HTML 的标签里面还是有一些用来作格式化（也就是定义呈现方式）的标签，如：、，但是，总体来说，HTML 最大的用途乃是用来描述文件的架构，让文件本身在结构上具有意义，甚至更进一步的让文件具有语义。

至于样式表的角色呢？它是用来告诉浏览器，如何装扮每一个 HTML 标签所标示的内容。所以，任何谈到样式表与 HTML 的文章都会说：“借由 CSS，我们让文件的内容与呈现可以分离。”没错，这就是学习 CSS 的目的，你应该开始想像，在不更动任何 HTML 原始码的状况下，借由修改样式表，你的网页将呈现各种风格迥异的面貌。

HTML 简单介绍（A Brief of HTML）

在真正提到 CSS 之前，弄清楚下列几个 HTML 的基本观念，可以让你更快掌握 CSS，也可以帮助你将来比较容易阅读其他相关文件，另外，用合适的术语表达概念，有助于与其他设计师的沟通。

标签与元素 (Tags and Elements)

File:Tag-n-element.png

标签与元素

标签（tag）

介于左右三角括弧 (angled brackets) 的文字，如：<body>
通常标签是成对的，分别成为“起始标签（opening tag）”与“结束标签（closing tag）”，我们将内容在两个标签之中。
一般而言，标签用来告诉浏览器采取什么处理方式：起始标签告诉浏览器开始某个处理方式，结束标签告诉浏览器终止该处理方式。

元素 (elements)

由起始标签、结束标签和其间的内容所构成，例如：This is bold text

属性 (Attribute)

我们以实际的例子来说明：

<img src="images/foo.gif" alt="範例" width="100" height="50" />

这是一个 img 标签，在原始码中，标示这里要放入一张图，图片来源（source, src）是 image/foo.gif 这个档案，万一图片无法显示时，替代的（alternative, alt）文字是 "范例"，而这张图的宽度（width）是 100 像素（pixels），高度（height）是 50 像素。

我们称呼：

src
alt
width
height

为 img 标签的属性，而等号（=）后面用双引号括起来的称为属性的“值（value）”。

不同的标签有不同的属性，数量也不一样。

区块标签（Block-level Tags）与同轴标签（Inline Tags）

我们先看一个例子，再来解释什么是 block-level 什么是 inline。

HTML 原始码

呈现

<p>
這是用來說明
<b>區塊標籤（block-level tags）</b>與
<b>同軸標籤（inline tags）</b>的例子。
</p>
<p>
你注意到例子中，兩個標籤一個會造成換行，一個卻沒有
</p>

这是用来说明区块标签（block-level tags）与同轴标签（inline tags）的例子。

你注意到例子中，两个标签一个会造成换行，一个却没有

在上面的例子当中， 标签所形成的元素，会自成一个区块（也就是会换行）， 标签所形成的元素，并不会这样，它仅在同一行里作用。在 HTML 里面，常看到的 block-level 的标签有：

blockquote - 引用的区块
center - 区块置中
div - 通用的 block-level 标签
h1 - 第一级标题
h2 - 第二级标题
h3 - 第三级标题
h4 - 第四级标题
h5 - 第五级标题
h6 - 第六级标题
hr - 水平线
p - 段落
pre - 保留文字格式

而 inline 的标签有：

a - 锚点（超连结标签）
br - 段行
iframe - 同轴框架（Inline frame）
img - 图片
q - 简短的引用
script - 用户端 script
span - 通用的 inline 标签
sub - 下标（subscript）
sup - 上标（superscript）

格式化表单的位置(Where to place Style Sheet?)

主页面：把CSS应用到HTML

内部格式化表单(Internal Style Sheet)

又称内嵌式格式化表单（Embedded style sheet）例如：

<style type="text/css">
/*CSS goes here...*/
</style>

其中 style 标签内为放置 CSS 代码的地方。

外部格式化表单(External Style Sheet)

CSS 内可用 @import 语句，在一个 CSS 内引入其它 CSS：

@import url("mystyle.css");

在html文件中，引入样式表的方法可用 link 标签，如下所示。

<link rel="stylesheet" href="mystyle.css" type="text/css" />

外部样式表的好处是令结构和表现完全分离。

内联样式表 (Inline Style Sheet)

如下所示是一个使用内联样式表的示例。通过 style 属性，可以为元素添加样式。它无法做到结构与表现的分离，但在无法引入外部样式表或 style 标签时（如维基百科）时仍然有用。

<div style="color:red; background:yellow; font-weight:bold;">
這個段落會被顯示為黃底紅字粗體。
</div>

显示为

这个段落会被显示为黄底红字粗体。

CSS结构

语法

主页面：语法

@rule argument(s) {
	selector {
		property: argument(s);
		another-property: argument(s);
		property-the-third: argument(s);
		fourth-property: argument(s);
	}
}

注解符号 (Commenting)

/* comment contents */

样式的优先顺序(Priority rules)

CSS不同定义方式的样式，其优先级为：内联指定的style > 通过id指定的style > 通过class指定的style > 通过html tag指定的style

故得名Cascading

浏览器如何工作？( How browsers work?)

方框的基本介绍 (Introduce to Box)

在CSS中，浏览器将每个标签用Box方式呈现，并分为行内Box以及区块Box。每个Box区块使用Box模式（Box model）呈现，以外距、边线、内距、内容四种属性（由外而内）的顺序组成一个Box。

几个特别的性质(properties)

注意

有时一个网页的作者会滥用CSS。有些习惯于只使用HTML的作者可能会忽视CSS提供的可能性。比如有些习惯于使用HTML的显示元素的作者可能会在所有的HTML文件内加入CSS样式。这比将HTML显示和结构指令混在一起是一个进步，但它还是有许多同样的缺点，而且维护时的工作量与混合使用差不多。

CSS与其他程式语言有著一些共同的陷阱。尤其在命名CSS的id和class时，CSS作者常选择一个比较有说明性的名称而使用显示特征作为它们的名称。比如一个作者可能使用“big-red”来命名一个用大红字体的突出显示的字节。在当时，对作者来说这个名称可能是很直觉的，但假如后来作者决定突出显示的字节应该使用绿色，而不是红色的话，他的命名就有毛病了。在上面这个例子中，一个更合适的名称应该是“emphasized”（强调），它描写的是这个“class”的用意，而不是它是如何被显示的。

另一个毛病是未记录的、未定义的和往往会被遗忘的名称。一个网页作者可能会选择上百个名称。名称如footer、footnote或者explanation、note、info、more可能是指同一回事。这样许多重复的名称就出现了。有时一个复杂的网站的设计者可能会结合HTML和CSS来解决这个问题，但这样一来他又把内容与显示黏有一起了，而且这样一来这个文件就只适合于某一媒体了。（外部样式表的一个大优点就是它是跨媒体的，因为不同的样式可以特别适用于不同的输出媒体。）

HTML本身的复杂性是另一个困难处。虽然大部分使用CSS的文件比传统的使用表格的文件要整洁，但过分使用class和过于细腻的结构层次同样使HTML变得繁庸。此外有的作者过分使用div元素。

另一个陷阱是为了解决常见的浏览器错误而引入特别的CSS样式，这些样式当然是为了除错而引入的，但它们使一个CSS文件的维护性能降低，有时这样的CSS文件的维护量甚至比过去的HTML文件的维护量还大。常见的特别CSS样式多是针对Internet Explorer（尤其IE 6、IE 7等旧版本）的显示错误而额外编写。

有时一个作者可能会过度地使用CSS来决定他的文件应该怎样被显示，如：一个作者会决定隐藏超连结底下的横线，这很容易做到，但对浏览者来说这可能会带来不便。

有些新的CSS3样式尚未成为标准，因此在使用时需要加上前缀（Prefix），使其可以在采用不同排版引擎的浏览器中正确显示。但于Internet Explorer 10 Release Preview起, transform, transition, animation和gradient渐变等属性均可不加前缀。^[2]^[3]例如使用transition时，需要额外撰写四行编码：

-webkit-transition: height 0.2s linear;　/* 針對使用WebKit排版引擎的瀏覽器，如Google Chrome、Apple Safari */
-moz-transition: height 0.2s linear;　/* 針對使用Gecko排版引擎的瀏覽器，如Mozilla Firefox */
-o-transition: height 0.2s linear;　/* 針對使用Presto排版引擎的瀏覽器，如Opera */
-ms-transition: height 0.2s linear;　/* MSIE，但Release Preview起可以不用前缀*/
transition: height 0.2s linear;　/* CSS3標準，放最後*/

CSS的大小因此增大，到这些CSS样式不需前缀时，又需要额外花时间把它们删除。

参考资料

文内引用

↑ ^1.0 ^1.1 见莫振杰《HTML与CSS进阶教程》第172页(位于第11章“CSS图形”第3节“圆”)。
↑ Unprefixed CSS3 Gradients in IE10
↑ Moving the Stable Web Forward in IE10 Release Preview

补充来源

莫振杰. HTML与CSS进阶教程 1. 中国北京: 人民邮电出版社. 2016年. ISBN 978-7-115-43295-7 （中文（中国大陆））.

其它资料

Cascading Style Sheets, Level 2
Code Style Media monitor
CSS - Cascading Style Sheets
CSS Bugs and Workarounds
CSS Panic Guide
CSS Reference Table
css-bug info
glish.com CSS layout techniques
glish.com
Guide to Cascading Style Sheets
Little Boxes
Pixellated! DesignDevelopDeliver
RichInStyle.com - Style sheet master class part 1 - writing perfect style sheets
Tableless layout HOWTO
The Layout Reservoir - BlueRobot
Web Nouveau Table-less sites list-1
Webmonkey Reference Stylesheets Guide
Working with CSS - Introduction to CSS Layout

[莫振杰_进阶_p172-1] 1.0 ^1.1 见莫振杰《HTML与CSS进阶教程》第172页(位于第11章“CSS图形”第3节“圆”)。

[2] Unprefixed CSS3 Gradients in IE10

[3] Moving the Stable Web Forward in IE10 Release Preview

[1]

[2]

[3]

CSS

状态