原始版本: http://www.w3.org/Style/Examples/011/firstcss.en.html

翻译： Shanghai.ws

声明：原始版本（英文版）是唯一的官方版本。中文(简体)版本是根据W3C网站上的文件翻译的，可能存在某些错误。翻译不保证译文完全准确。请您自己承担风险。


CSS 教程
从 HTML + CSS开始

Contents

这个简短的教程是提供给想要开始使用CSS的，又以前从来没有编写过CSS样式表的人。

它没有太多的介绍CSS，仅仅介绍了如何创建一个HTML文件、一个CSS文件，又如何让它们一起工作。之后，你可以参考其它教程里的任何一个，再来给HTML和CSS文件添加更多功能。或者你可以切换到使用专用的HTML 或 CSS 编辑器，帮助你设置复杂的网站。

在教程的最后，你会制作出一个HTML文件，如下所示：

[Link to the final HTML page]

生成的HTML页面，有颜色和布局，都是使用CSS制作的。

请注意，我并没有说这是好看的。☺

Alert! Advanced: 像这样的区段都是可自选的。示例中包含了HTML和CSS代码一些额外的说明。标记“alert!” 在开端表明这是比文本中其它的更高级的素材。

第一步：编写HTML

对于这个教程，我建议你只使用最简单的工具。例如：Notepad（在windows里），TextEdit （在Mac上）或是KEdit （在KDE里）就可以了。一旦你了解这个原理，你就会想要切换到更高级的工具，甚至是商业程序，如Style Master，Dreamweaver或GoLive。但对于你的第一个CSS样式表，最好不要因为使用太多的高级功能而分心。

不要使用文字处理器，如Microsoft Word或OpenOffice。它们通常制作出网络浏览器不能读取文件。 对于HTML和CSS，我们需要简单的纯文本文件。

第一步打开你的文本编辑器（Notepad，TextEdit，KEdit，或是任何你喜欢的文本编辑器），在一个空的窗口开始，输入以下的内容： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>我的第一个样式页面</title>
</head>

<body>

<!-- 目录 -->
<ul class="navbar">
  <li><a href="index.html">首页</a>
  <li><a href="musings.html">连接1</a>
  <li><a href="town.html">连接2</a>
  <li><a href="links.html">连接3</a>
</ul>

<!-- 主要内容 -->
<h1>我的第一个样式页面</h1>

<p>欢迎来到我的样式页面!

<p>这里没有图片, 但至少有CSS样式. 有连接, 但只是为了举例和演示, 并不能带你到任何地方&hellip;

<p>这只是个例子, 好象没什么好写. 

<!-- 签名和日期 -->
<address>2004年4月5日制作</address>

</body>
</html>

事实上，你不需要输入它：你可以从这个网页复制并粘贴进编辑器。

（如果你在Mac 上使用TextEdit，不要忘记告诉TextEdit文本确实是纯文本，通过转到格式菜单并选择 “Make plain text”。)

Alert! Advanced: 上面HTML文件的第一行告诉浏览器HTML的类型（DOCTYPE 意思是文档类型）。在这个案例中，它是HTML 4.01 版本。

在 < 和 > 里的单词叫标签，像你看能到的，这文档包含 <html> 和 </html> 标签。在 <head> 和 </head> 间有一个位置是给没有显示在屏幕上各个种类的信息的。目前为止，它包含文档的标题，但之后我们也会在这里加上CSS样式表。

<body>是实际文档文本所在之处。原则上，除了在 <!-- 和 -->里作为对它们本身注解的内容不会显示，这里的所有内容都会被显示。浏览器会忽略它。

在该示例中的标签， <ul> 介绍了一个“无次序列表”，例如：条目没有编号的列表。 <li> 是“列表条目”的开始。 <p> 是“段”。还有<a> 是创建超链接的“锚点”。

the HTML source shown inside KEdit

编辑器展示了HTML源。

Alert! Advanced:如果你想知道在<…>里的名字是什么意思,一个好的开始地方是着手从HTML开始。但是只有一些关于我们示例HTML页面的单词。

注意，我没有关闭“li”和“p” 元素。在HTML里（但不是在XHTML 里），允许忽略</li>和</p>标签，这就是我在这里做的，为了使得文本稍微容易读一点。但是你可以加上它们，如果你喜欢的话。

让我们假设这是要成为一个有许多类似页面的网站上的一个页面。对当前网页来说很普通，此页面有一个菜单，在超链接站点，一些独特的内容和签名上链接到其它页面上去。

现在从文件菜单里选定“另存为……”，导入你想把它放入的一个目录/文件夹里（桌面也可以），再把文件存为“mypage.html”。先不要关掉编辑器，我们还会需要它。

（如果你在Mac OS X 10.4 前的版本上使用TextEdit，你会看到一个选项“不要附加保存.txt 扩展名”的存盘对话框。选定那个选项，因为名字“mypage.html”已经包含了一个扩展名。更新的版本的TextEdit会让.html自动扩展。）

接下来，在浏览器里打开文件。你可以按照下面的做：用你的文件管理器（Windows Explorer，Finder或Konqueror ）找到文件，再点击或双击“mypage.html”文件。它就会在你默认的网络浏览器里打开。（如果不可以，就打开你的浏览器，把文件拖进来。）

像你看到的那样，页面看起来非常沉闷……

第二步，添加一些颜色

你可能看到一些白色背景里的黑色文本，但它是取决于浏览器如何配置的。所以，我们能做的让页面更加时新的一件简单的事情就是添加一些颜色。（让浏览器开着，我们之后会再用到它。）

我们从嵌在HTML 文件里的样式表开始。然后，我们会把HTML和 CSS 放进单独的文件里。 单独的文件很好，因为相对于复合的HTML文件，它让相同的样式表使用起来更简单：你只需要编写样式表一遍。但是对于该步骤，我们仅仅保持所有的内容在一个文件里。

我们需要添加一个<style>元素到HTML文件中。样式表会在此元素里。所以回到编辑器窗口，再在HTML文件的抬头部分添加下面的五行。 要添加的行用红色的显示出来了。 (lines 5 to 9) 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>我的第一个样式页面</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]

第一行说的是，这是一个样式表，并且它是用CSS (“text/css”)编写的。第二行说的是，我们为“body” 元素添加了样式。第三行设定了文本的颜色是紫色，还有接下来一行设定了背景是一种泛绿的黄色。

Alert! Advanced:CSS里的样式表是由规则组成。每条规则有三个部分：

  1. 选择器 （在示例里：“body”），告诉浏览器文档的哪个部分受规则影响了；
  2. 属性（在示例里：‘color'’和‘background-color’都是属性），规定了布局的什么方面被设置了；
  3. 还有值（‘purple‘和‘#d8da3d’ ）给出了样式属性的值。

我们要设置两个属性，因此我们要做两个单独的规则： 

body { color: purple }
body { background-color: #d8da3d }

但是因为两个规则都都会影响主体，我们只要输入一次“body ”，再把属性和值放在一起。 更多的选项，请看第2章Lie & Bos。

主体元素的背景也就是整个文档的背景。我们没有把任何明确的背景给任何其它的元素（p，li，address…… ），所以默认它们会没有（或，会是透明的）。‘color ’属性设置body 元素文本的颜色，但是主体内的其它元素都要沿袭那种颜色，除非明确的覆盖。（我们之后会添加其它颜色。）

现在保存文件（从菜单里选用“保存”）再回到浏览窗口。如果你按“刷新”键，显示就会从“沉闷”的页面变成有色彩（虽然还是相当沉闷）的页面。除了顶端的链接列表，文本应该是带有泛绿的黄色背景的紫色文本。

Screenshot of the colored page in Konqueror

一个浏览器在添加了一些颜色后是如何显示页面的。

Alert! Advanced: 在CSS里颜色有多种方法来规定。此示例展示了它们的两种方法：通过名称（“purple” ）和通过十六进制代码（“#d8da3d” ）。颜色的名称大约有140种，而十六进制代码有超过16，000，000种颜色。 添加一种样式表解释了更多关于代码的详情。

第三步：添加字体

另外一件容易做的事情是，为页面多种元素的字体制造一些区别。因此让我们设置文本为“Georgia” 字体，但除了h1 标题，我们会用“Helvetica”。

在网上，你不能确定你的读者电脑上用的是什么字体，所以，我们也添加一些替代方案：如果没有Georgia，Times New Roman 或 Times 也可以，如果所有的都不行，浏览器会使用任何衬线字体。如果Helvetica 缺失，Geneva，Arial 和sunSans-Regular在形状上是很相似的，又如果没有这些运作，浏览器会选择任何其它无衬线的字体。

浏览器在文本里添加了以下的行： (lines 7-8 and 11-13) 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>我的第一个样式页面</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

如果你再次保存文件和在浏览器里按“刷新”，现在标题和其它文本就会有不同的字体。

Screenshot with fonts added

现在主要的文本有一个和标题不同的字体。

第六步：添加水平线

接下来添加的样式表是用来把文本跟底端签名分开的一个水平线规则。我们会使用‘border-top’在<address>元素上面来添加点线 (lines 34-37)： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
  <title>我的第一个样式页面</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]

现在我们的样式完成了。接下来，让我们看看如何把样式表放进单独的文件里，如此以来其它的页面能分享同样的样式。

第七步：把样式表放进单独的文件里

我们现在有一个嵌入了样式表的HTML 文件。但是如果我们的网站发展了，我们肯定会要许多页面分享相同的样式。有一个比复制样式表到每个页面更好的办法：如果我们把样式表放进单独的文件，所有的页面都可以指向它。

要制作样式表文件，我们需要创建另一个空文本文件。你可以从编辑器里的文件菜单里选择“New” 来创建一个空的窗口。（如果你使用TextEdit ，不要忘记还是要使用格式菜单让它成为纯文本。）

接下来，从HTML 文件中剪切在<style>元素里的任何内容，再粘贴进新窗口。不要复制<style>和</style> 本身。它们属于HTML ，不属于CSS。在新的编辑器窗口，现在你应该有完整的样式表： 

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

从文件目录里选择“另存为……”，确保与mypage.html 文件在同一个目录/文件夹里，再把样式表存为“mystyle.css”。

现在回到HTML 代码的窗口。移除从<style>标签开始到包括</style>标签的所有内容，再用<link>元素替换它，如下 (line 5)： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>我的第一个样式页面</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

这会告诉浏览器在文件中找到叫“mystyle.css”的样式表，又因为没有目录提到，浏览器就会在找到HTML 文件的同一个的目录里寻找。

如果你保存HTML 文件，然后在浏览器里刷新它，你应该看不到变化：页面是相同的样式，但是现在样式来自于一个外部文件。

Final result of styling

最后的结果。

接下来的步骤是把它们两个mypage.html 和mystyle.css 放到你的网站上。（你可能要先稍微改变他们……）但是如何做到这一点就取决于你的网络服务供应商。

进一步阅读

CSS介绍，见第2章Lie&Bos，或是Dave Raggett的CSS介绍.

其它信息，包括更多的教程，在学习 CSS页面都能找到。

CSS Valid CSS!Valid HTML 4.0!

Bert Bos, CSS contact
Created 5 Apr 2004. Last updated $Date: 2009/10/07 08:18:21 $ GMT