超文本标识语言
HTML入门 | HTML语言提高

使用CSS格式页

本文只是有关格式页的简要说明，完整的介绍来自万维网联盟(W3C)的层叠式格式页 (CSS) 。

本文的主要内容涉及：

• 使用 style 元素
• 链接到一独立的格式页
• 设置页面边白
• 设置左右及首行缩进
• 上下空白(行间距)的设置
• 设置字体的大小，类型和样式
• 增加边框和背景
• 利用名称或数值设置不同的颜色
• add style for browsers that don't understand CSS

CSS基础

让我们从设置文字和背景的颜色开始。使用STYLE元素可以为网页设置不同的样式属性：

<style type="text/css">
  body { color: black; background: white; }
</style>

在<style>和</style>之间的部分是符合CSS语法规则的特殊标记。这一规则是：在一个标识名后由大括号{和}括起来一些样(格)式列表。在本例中标识是body ，并为整个网页的body区设置了文字的颜色和背景色。

每一个样式属性由样式名、冒号和属性值组成。当其中的样式多于一个时，应使用分号来分开它们。在上面的例子中有两个属性---“color”(颜色)，它们分别是文字和网页背景的颜色。我们看到甚至在最后一个属性的后面也要写上一个分号。

颜色可以通过名字或数值给出，如rgb(255, 204, 204) 是一种粉色。其中的三个值依次为红，绿，兰三原色，可能的取值范围从 0 对 255。也可以十六进制数 #FFCCCC.标记这同一种颜色。更多的有关颜色的细节 请看后面的章节。

注意 style元素必须放置在文档的 head 区内，而不应放入网页的body区。

链接到独立的格式页

如果你希望对不同的网页使用同一种格式，则下面的方法---使用独立的格式页---很值得考虑：

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

LINK 标识应放在文档的 head区内。rel 属性必须设成"stylesheet" 以使浏览器能够识别出由href 属性所给出格式页。

设置页面的边白

网页的旁边多留些空白可能会更加漂亮。通过"margin-left"属性 和"margin-right"属性可以很容易地设置左或右边白。例如：

<style type="text/css">
  body { margin-left: 10%; margin-right: 10%; }
</style>

这一格式为左和右边均留出了窗口宽度的10%大小的空白，注意它会随着浏览器窗口的不同而放大或缩小。

设置左右缩进

请看：

<style type="text/css">
  body { margin-left: 10%; margin-right: 10%; }
  h1 { margin-left: -8%;}
  h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>

此例有三个样式规则。第一是对 body元素的,其二则是对 h1 ，最后是对其它头标元素 (h2, h3, h4, h5 和 h6)的。头标的缩进是以body的边界为基准的。body对应于窗口左右各留有10%的空白，而h1在此基础上向外移出8%。

再次提醒你，style 元素(或link元素)应放在文档的head区内。

控制上下边白

事实上浏览器对于上下边白以及标题、段落等有很好的设置，可以自动完成。但当你希望对一些特殊的标题或段落更多的空白，或是对空白有着特殊的要求，一切你都可以自己控制。这就是CSS的优点。

"margin-top" 属性指定与上面的元素的间隔，而"margin-bottom" 正好相反。如果你想对所有的h2都设置，则可以写成如下形式：

h2 { margin-top: 8em; margin-bottom: 3em; }

em 是非常有用的单位，它以字的大小缩放。1em恰是一个字的高度。在网页上使用em比使用诸如象素或磅要更加安全，因为以象素或磅为单位时如果遇到用户使用大字体则会出现麻烦。

磅常常用在字处理软件中，如10pt 字。很不幸，同样的磅值在不同的浏览器内显示的大小不同，在一个浏览器内工作良好但在另一个内则不然。使用 em作为单位可以回避这类问题。

如果想对某个特定的标题指定上下间距，则应该为这个特定的标题命名，并在标识中使用class 属性，如：

<h2 class="subsection">Getting started</h2>

样式格式如下:

h2.subsection { margin-top: 8em; margin-bottom: 3em; }

这一规则由标识名，圆点和class属性值组成。在圆点的前后注意不能有空格，否则会出错。也有其它的方法可以对某个特定的元素指定样式，但无疑class属性是最常用的。

首行缩进

有时你希望每一段落的首行有缩进。下面的样式规则给出了段落的缩进方式：

p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }

在每个段落的首行有2个字的缩进，并禁止段落内部的行间空白。

字体控制

以下解释如何设置字体的样式、大小及如何使用斜体、加重(粗体)和其它的字体修饰。

字体修饰

最常用的修饰是斜体和加重(粗体)。多数浏览器以em 标识为斜体，以strong 标识为加重(粗体)。

em { font-style: italic; font-weight: bold; }
strong { text-transform: uppercase;  font-weight: bold; }

字体大小

font-size:用来指定文字的大小。

h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }

选择不同的字体

font-family:用来选择不同的字体。如果你想使用楷体，应注意在Windows下，楷体的正式名称是：楷体_gb2312。关于字体的名称，你可以在你的系统目录(如windows)下的font目录内找到。

body { font-family: Verdana, sans-serif; }
h1,h2 { font-family: Garamond, "Times New Roman", serif; }

增加边框与背景

div.box { border: solid; border-width: thin; width: 100% }

<div class="box">
这里的文字周围会有边框出现，
你知道是如何产生的吗？</div>

边框的线框有几种选择：dotted, dashed, solid, double, groove, ridge, inset 和 outset。 border-width属性用来设置边界宽度，它的取值为： thin, medium 和 thick 或直接用数值指定，如 0.1em。border-color 属性允许你设置边框的颜色。

  div.color {
    background: rgb(204,204,255);
    padding: 0.5em;
    border: none;
  }

你可以仅仅为某个边设定边框。你可以独立地控制每个边框的各种属性。分开设置使用 border-left, border-top, border-right and border-bottom ，整体设置则用style, width 或 color等等。如：

  p.changed {
    padding-left: 0.2em;
    border-left: solid;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-left-width: thin;
    border-color: red;
  }

这为class(名) 为"changed"的段落只设置了左手边的一条红线。

设置颜色

在前面我们已有些设置颜色的例子。这里再次说明：

  body {
    color: black;
    background: white;
  }
  strong { color: red }

这里设置了默认的黑色文字和白色背景，但对于加重(粗体)文字则以红色显示。共有16种标准的颜色名(后面会给出)。也可以使用三原色：红、绿、兰的十进制数值(取值范围从0到255，如rgb(255, 0, 0)是红色)来指定。也可以使用十六进制颜色值来设置，其格式为以#开头的6位十六进制数。其后有RGB与十六进制颜色值转换表。

设置链接色

使用CSS也可以设置超链接的颜色。

  :link { color: rgb(0, 0, 153) }  /* 未访问过的链接 */
  :visited { color: rgb(153, 0, 153) } /* 已访问过的链接 */
  :active { color: rgb(255, 0, 102) } /*正在单击的链接*/
  :hover { color: rgb(0, 96, 255) } /* 当鼠标在其上时 */

有时你可能希望链接没有下划线，使用 text-decoration 属性这也是可以实现的。如：

  a.plain { text-decoration: none }

在网页中的文字如下:

这个链接<a class="plain" href="what.html">无下划线</a>

大多数人在网页上见到有下划线的文字通常都认为是链接。所以最好你还是保留链接的下划线。类似地，对于链接的颜色也是如此。所以也不要试图修改它，除非它们与背景色相同或近似而不得于阅读。

色盲的问题

当使用颜色时，就注意有大约 5%到 10% 的人有各种形式的色盲。这会引起红与绿或黄与兰之间的分辨困难，极少数情况下对于所有颜色均无识别能力。所以应记住尽量避免前/背景色上使用上述搭配。

颜色名

标准的颜色名是： aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white,和 yellow. 这16种颜色是在HTML3.2 T 4.01 中定义的符合PC机上的基本VGA集。大多浏览器接受更多的颜色名，但它们的使用是非推荐的。

所以颜色值"#800080" 与"purple"相同。

十六进制颜色值

值"#FF9999"是由红绿蓝三原色组成的颜色，#号后的两位表示红，其后的两位为绿，最后的两位为蓝。

浏览器安全色

最新的计算机支持几千或几百万种颜色，但多数旧的颜色系统仅仅能显示256种色彩。为克服这一困难，浏览器从一固定的色板中提取颜色。

大多数浏览器支持名为“浏览器安全色”的色板。

浏览器安全色表