CSS 入门

级联样式表非常简单，也就是 (X)HTML 网页之上的分层设计。使样式表 “级联”，这样您就可以跨站点应用它 — 也就是说，将样式应用到网站，它就会自行应用到每个网页的每个元素。

常用缩略语

●API：应用程序接口

●CSS：层叠样式表

●HTML：超文本标记语言

●XHTML：可扩展 HTML

对于网站，将数据与设计分离是一个重要的概念：数据使用 (X)HTML 发送到 浏览器，而设计使用 CSS 应用到该数据。这种分离使人们在拥有特殊可访问性需要时无需您的设计即可渲染网页，还使机器（比如搜索引擎）能够建立网站索引而不会受到设计的阻碍。

本文详细介绍各种已经存在和现代的 CSS 技术，以增强网站观感性。本文需要一定的 (X)HTML 知识，它应被视为开发的一个参考点，充当设计网站的初始平台。

CSS 的格式

CSS 样式元素的结构很简单：

html-tag-name {
 css-property-key-1: css-value-1;
 css-property-key-2: css-value-2;
 }

其中 html-tag-name 可以是您能在 HTML 代码中找到的任何标记（比如 < a>、< /a>、< div>、< ul>< li>或 < label>）。除了 HTML 标记，在 CSS 代码中它也可以是前面带有井号（#）的 ID 引用，如下所示：

#id-of-html-tag {
 …
}

或者在 CSS 代码中这个标记可以是一个前面带有点/句点（.）的类引用：

.class-of-html-tag {
 …
 }

CSS 的这些部分（html-tag-name、id-of-html-tag 或 class-of-html-tag）称为简单选择器，可嵌套（使用空格分开）使用以在 HTML 中实现更高的粒度，如下所示：

outer-html-tag-name inner-html-tag-name { … }

或者作为一个列表来将一种设计元素应用到多个选择器：

1st-html-tag-name, 2nd-html-tag-name { … }

诚然，上述代码对于理解 CSS 形式化语法而言比较抽象。因此，本章其余部分将着重介绍更具体、更有帮助的示例，凸显 CSS 的简单性、潜能和灵活性。

基础样式

在进行 网站设计时，要做的第一件事是建立基础样式。为此，可以设置标记的样式，如清单 1 所示。

清单 1. body 标记的 CSS 基础样式

body{
 background-color: #EEEEEE;
 color: #000000;
 margin: 0;
 padding: 0;
 text-align: left;
 font-size: 100%;
 font-family: sans-serif;
 }

此标记将背景颜色设置为白色 (background-color)，以确保字体颜色是黑色的 (color)。它还可确保所有内容边缘都与浏览器窗口边框相匹配（margin 和 padding），而且标记将文本内容向左水平对齐 (text-align)。最后，该样式将字号设置为浏览器默认字号 (font-size) 并使用一个 sans-serif（也就是一种边缘四周没有细微装饰的字体）字体集 (font-family)。
当然，这是一些简单设置。一般而言，可应用以下指导原则：

●在指定颜色时，使用 Red-Green-Blue (RGB) 十六进制亮度值。

●在指定字号时，使用像素（有数字后的 px 表示）、em（由数字后的 em 表示）— 也就是说，字号乘以指定的数字 — 或百分比（由数字后的 % 表示）。

●文本可以左对齐、右对齐或居中。浮动属性也可左对齐或右对齐。垂直对齐必须是顶端、居中或底端对齐。

●字体可以是任何特定字体、字体集（serif、sans-serif 或 monospace）或任何一种可下载的字体。

在确定网站的设计时，一个最重要的决策是使用流式（fluid）布局还是固定布局。在固定布局 中，可以指定元素的高度和宽度，无论您使用何种操作系统或浏览器查看网站，这些值都是相同的。主要使用像素指定这些元素。在流式布局 中，元素的高度和宽度是灵活的，可基于浏览器窗口、操作系统或用户偏好而扩展或缩小。主要使用百分比和 em 指定这些元素。流式布局和固定布局各有其优缺点，选择哪种布局取决于内容类型、内容量和网站的访问群体。

将 CSS 应用到 (X)HTML

要开始应用您的 CSS，您需要告诉浏览器在哪里找到它。这应该是真正惟一 (X)HTML 引用 CSS 的地方。可以通过两种方式进行引用：“quick and dirty”< link> 标记。

quick and dirty：设置标记样式

此方法可能是查看应用到一个网页的样式的最快方法，它会使用非 HTML 代码 “弄脏” 网页。但是它只是您应用样式的一个网页（当然，除非使用服务器端语言来包含一个头部），如果将此样式复制并粘贴到另一个网页，会增加网页大小（这里指的是 KB 而不是宽度和高度）。因此，会增加每个网页的加载时间，让用户等待更长时间。时间对于用户而言比人们想象的更加重要，纵然您生活在超高速互联网时代。
那么它是如何完成的？非常简单，将以下标记添加到您的 HTML 标记中：

< style>
 /** Your CSS goes here **/
 < /style>

quick and clean：悄悄链接到 CSS 此方法可能是应用样式的比较整洁的方法。如果 CSS 位于外部文件中，可以从其他网页链接到它，进而确保您拥有整洁的 HTML 和较小的页面（再次说明，这里指的是 KB 而不是宽度和高度）。使用此方法更加简单：将以下代码添加到您的 HTML < head> 标记部分：  

< link href="http://www.example.com/styles/style.css"
media="screen" rel="stylesheet" type="text/css" />

 

其中 style.css 是一个纯文本文件，其中包含您的 CSS 代码。作为一种不错的做法，我为我网站的公共 html 文件夹使用以下基础结构：

●/public_html 文件夹，包含 HTML 文件或服务器端脚本（比如 PHP）

●/index.html（或用于 PHP 开发的 index.php），用于主页/启动页面

●/styles/ 目录，用于存储各种 CSS 文件

●/scripts/ 目录，用于存储各种 JavaScript 文件和库

此结构允许所有内容都整洁地包装 —— 同时保持分离并允许引用。

样式设置指南

本节详细介绍在浏览器不支持 CSS 版本 3 (CSS3) 时应用该版本会发生什么 —— 浏览器将忽略它并退回到默认设置。 本节还将介绍 CSS3 样式（以 -moz、-webkit 等开头的样式）的特定于浏览器的实现。

简单的 < div> 标记

(X)HTML 拥有非常简单的标记 < div>，可以使用它将网页划分为有用的区域。从设计角度讲，这是一个不错的想法，因为它在本质上就是一个包含内容的方框。

CSS 2.1 的标准 < div> 效果

CSS 始终支持设置 < div> 的样式。其中一些元素包括边框调整，比如：

border: size type color

其中：

●size 是一个数字值。

●type 是实线、虚线、点线、双线或一些 3D 样式的边框。

●color 通常是一个 RGB 十六进制值。

举例而言，您可以使用 border: 1px solid #000000; 表示 1 像素宽的黑色实线。

类似于 body，也可以更改标准背景颜色以及文本的字体和颜色。可以像其他基础样式一样进行这些更改。

CSS3 增强的 < div> 效果

一种呼声最高的设计元素（在 CSS2.1 中未找到）是边框的圆角边缘。这意味着过去的许多设计人员必须构建基于图像的边框或使用某种组合了 CSS 和 JavaScript 的 dirty 技术。幸运的是，在 CSS3 中不再存在此情况，它引入了 border-radius 属性（例如 border-radius: 10px;）。

要将此属性应用到一些浏览器中，必须包含类似以下形式的标记：

-webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;

此示例只是为了让该标记适用于基于 Mozilla（比如 Mozilla Firefox）和基于 Webkit（比如 Apple Safari）的旧浏览器。如果您愿意，可以将上述 3 个属性设置为不同值并让样式在 Firefox 和 Google Chrome 中显示不同的效果。

也可以在 < div> 上生成一个阴影。为此，可以使用以下 3 个属性（再次说明，一定要处理各种浏览器）：

-webkit-box-shadow: 8px 8px 6px #AAAAAA;
 -moz-box-shadow: 8px 8px 6px #AAAAAA;
 box-shadow: 8px 8px 6px #AAAAAA;

在这种情况下，第一个属性是水平阴影，第二个是垂直阴影，第三个是模糊量，第四个是阴影的颜色。可以在模糊量和阴影之间放置另一个属性（另一个与阴影的覆盖范围相关的大小值），但是此属性似乎没有广泛使用。

列表

(X)HTML 中另一个常见的元素是列表。列表具有两种形式：无序列表 (< ul>) 和有序列表 (< ol>)。它们对于为网页提供数字列表（比如步骤列表）和非数字列表（比如处方成分）很有用。在网站布局方面，列表常常对于网站导航结构的开发至关重要，因此对于样式尤其有用。

(X)HTML 列表（无论是有序还是无序的）默认将拥有所谓的列表标记。在非正式的英语中，我们可能将它们称为 “bullet points（项目符号）”。CSS2.1 拥有少量的列表标记，可以使用 list-style-type 属性设置它们。无序列表标记的常见值包括 none、disc、circle 和 square。

有序列表标记的值是基于数字的表示方式。最常用的选项包括 decimal、lower-roman 和 lower-greek。

在撰写本文时，现代 Web 浏览器支持的基于列表的新 CSS3 属性和特性不是太多。否则本文将会介绍（举例而言）全新的 list-style-type 特性。我们介绍了另一个得到更广泛支持的 CSS3 属性，称为 text-shadow。

类似于前面定义的 box-shadow，text-shadow 属性提供了一个阴影。但是，与 box-shadow 不同，text-shadow 实际上会为每个字母添加阴影。所以，当将它应用到列表项时，可以使用以下标记：

li {
 text-shadow: 2px 2px 2px #AA00FF;
 }

举例而言，如果拥有一个无序列表，它的 (X)HTML ID 为 nav，显示为一个导航栏，那么可以构建类似以下形式的内容：

ul#nav li:hover {
 text-shadow: 2px 2px 2px #AA00FF;
 }

这将仅在将鼠标悬停在 #nav 无序列表中的一个列表元素上时提供 text-shadow。

链接

在过去，CSS3 标准的开发人员认为将未单击的链接、已访问的链接、有效链接和鼠标所在的链接区分开是明智之举。在 (X)HTML 中，它们全部具有相同的标记（也就是 < a> 标记），但具有不同的浏览器状态。幸运的是，许多设计人员忽略了这些区别，他们常常向一般链接或鼠标所在的链接提供样式。

一项几乎必要的任务是向一般链接应用一种特定的样式（进而设置它，无论它是未被单击的、被访问的、有效的还是其他类型的链接）。清单 2 提供了这样一个应用程序的一个示例。

清单 2. 链接修饰的 CSS 示例

a, a:link, a:active, a:visited {
 color: #000000;
 text-decoration: none;
 font-weight: bold;
 background-color: #EEEEEE;
 }
 a:hover {
 text-decoration: underline;
 background-color: #FFFFAA;
 }

此标记设置一个一般链接，将字体颜色设置为黑色，取消默认的下划线，将字体加粗，以及还将背景颜色设置为白色。在悬停状态下，它重新应用下划线并创建一种黄色的新背景颜色来突出显示。当在浏览器中测试此标记时，您将会注意到在鼠标悬停自链接上时，背景从浅灰色更改为黄色，当鼠标移开时，从黄色变回浅灰色。前面已经看到，还可以向 a:hover 应用文本阴影。
当开发人员建立 CSS3 的概念时，他们撇开了任何与 < a> 标记相关的特定样式，将更多精力放在泛型上。因此，本文不会介绍所谓的 transform:rotate，举例而言可将它用于导航中的 < li> 标记。相反，结合本文已经介绍的内容，可以得到类似于清单 3 的样式。

清单 3. 使用一些 CSS3 属性增强的 CSS 导航示例

a, a:link, a:active, a:visited {
 color: #000000;
 text-decoration: none;
 font-weight: bold;
 background-color: #EEEEEE;
 }
 li {
 text-align: center;
 list-style-type: none;
 width: 50px;
 padding: 10px;
 margin: 10px;
 background-color:#EEEEEE;
 border: 1px solid #000000;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -moz-transform:rotate(-20deg);
 -webkit-transform:rotate(-20deg);
 transform:rotate(-20deg);
 }
 li:hover {
 text-decoration: underline;
 background-color: #FFFFAA;
 }

创建没有表格的列

一般而言，表格存在着与布局技术一样的缺陷，因为当您布局包含表格的网页时，您会搞乱数据的逻辑流程。记得在本文开头我们说过，CSS 是 (X)HTML 之上的一层，而 (X)HTML 实际上是通过一种紧凑方式呈现的数据。不错，最佳的设计方式是以 (X)HTML 形式提供数据，没有任何设计或样式：如果它看起来是紧凑的，那么您可以应用一个 CSS 样式表。如果确实需要编辑 (X)HTML 来应用某种设计，请确保您禁用了 CSS，以查看它是否仍然是紧凑的。
出于两种原因，这样做非常重要。第一个原因是让它可供拥有特殊的视觉需求的人访问（因为他们将常常拥有自己的默认样式表设置或软件）。第二个原因是机器需要能够读取您的网站。搜索引擎和其他软件需要能够读取并跟踪您网站的代码，来为它建立索引。
那么，问题是如何创建没有表格的列？很简单，使用两个 < div> 框，如清单 4 所示。

清单 4. 列 div 的 (X)HTML 示例

< div id="left" class="equal-column">
 < /div>
 < div id="right" class="equal-column">
 < /div>
 < div class="something-below">
 < /div>

然后可以在 CSS 内设置各种设计属性。清单 5 提供了一个示例。

清单 5. 创建 div 列的 CSS 样式

div.equal-column {
 width: 45%;
 height:100%:
 }
 div#left {
 float: left;
 }
 div#right {
 float: right;
 }
 div.something-below {
 width: 100%;
 clear: both;
 }

此标记将两列都设置为宽 45%，然后将左侧的列固定到左侧，将右侧的列固定到右侧。最后，使用另一个带有类 something-below 的 < div>，我们希望它占据两列下的整个屏幕。这是一种有用的技术，可用于快速、轻松地在屏幕上获得两列。

在 CSS3 中，还有另一个巧妙的概念，那就是文本列。换句话说，如果 column-count 属性设置为一个数字，一个段略会自动拆分为两段：

div#textual-columns {
 -webkit-column-count: 2;
 -moz-column-count: 2;
 column-count: 2;
 }

此标记设置一个 ID 为 textual-columns 的 < div> 来得到两个文本列。但是，您可能已注意到，它让每列的高度相等，与您可以在报纸或杂志上看到列相比，这可能有点出乎意料。

字体版式

CSS2.1 定义了 3 种一般的字体集：serif、sans-serif 和 monospace。这些字体将始终适用于每个系统，它们不一定看起来完全一样，但是一般而言，如果主要字体出现故障，它们至少可以作为备用字体。所以，举例而言，在您的 body CSS 声明中，可以使用类似以下形式的内容：

body {
 font-family: Univers, sans-serif;
 }

其中以选择了 Univers 字体，如果 Univers 在用户计算机上不可用，默认将使用 sans-serif。

CSS3 通过引入 @font-face 元素稍微改进了此功能，这是一个比较复杂的机制，用于跨 web（特别是对于您的网站）传输一个字体。如果希望使用漂亮的字体，它可能非常有用，这是一个适合排版专家的高级主题。但是，此类字形开发工作已由第三方提供商大大简化，比如字体下载 表中的 Google Font API 和 Typekit。

字体下载

Google Font API 和 Typekit 提供了它们自己的系统来跨系统下载漂亮的字体。它的工作原理类似于 (X)HTML、JavaScript 和 CSS3 的结合，所以可能仅适用于比较现代的浏览器。

至于现在，我们主要关注 Google Font API，它可以免费、轻松地使用。要应用此功能，首先在 (X)HTML 头部添加一行表明您希望使用 Google Font Directory 中的 Architects Daughter 字体：

< link href='http://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>

然后，使用 CSS 应用样式：

body {
 font-family: 'Architects Daughter', serif;
 }

您的网站现在使用了 Architects Daughter Google 字体。但是，我的建议是不要为整个网站使用 “太过漂亮的” 字体。请确保您的网站继续保持干净、紧凑和清新。

结束语

CSS2.1 和 CSS3 都是内涵丰富的主题，值得用一本书来探讨。本文仅大概介绍了如何编写高质量的样式表，您可以应用这里的知识在万维网上的其他地方查找 CSS 参考资料。

通过不引人注目的、彼此独立的方式使用 (X)HTML 和 CSS，您可以最大程度地实现标准兼容性、可访问性和搜索引擎优化。CSS 是一种优秀的技术，XHTML 和 HTML 也是，但是它必须以一种标准化的方式使用。这些标准可能是 Web 设计的基本资源，但它们不是设计本身，优秀的设计必须通过实践和不断完善来获得。

关于作者

Daniel John Lewis 是一位来自英国的自由计算机科学家，是一位图形/色彩设计专家的儿子。他使用各种语言（包括 PHP、Ruby、Java 和 XHTML）开发 Web 应用程序，自 20世纪 80 年代晚期就开始使用开发和设计软件。他的计算机科学研究和咨询工作涉及语义 Web、链接数据、人工智能、机器学习、数据挖掘和 “人类计算” 等领域。

相关文章

• 网易邮箱的CSS开发（一）
• 响应式设计的5个CSS实用技巧
• 页面前端的水有多深？再议页面开发
• Zen Coding: 一种快速编写HTML/CSS代码的方法
• 谈谈CSS Sprites技术及其优化
• Codecademy为编程初学者新增HTML和CSS两门课程
• 10个便利的CSS代码在线生成器
• 前端是否应该将CSS和JS分开设置两个不同岗位
• 10 款实用的 CSS 开发助手推荐
• 如何将页脚固定在页面底部