Skip to main content

Visit Mozilla.org

CSS:Getting Started:Why use CSS

From MDC

目录

[编辑] 资料: 为什么要使用CSS?

CSS帮助我们把页面的内容与页面的表现形式分离开来。我们将如何显示文档的细节内容称之为样式。将样式与页面内容分离，我们可以：

  • 避免重复
  • 易于维护
  • 相同内容根据不同的用途使用不同的样式
例如
也许你的网站有数千张看起来相似的网页。使用CSS，你可以把样式信息保存在公共文件供所有页面使用。

当用户显示一张网页时，浏览器会把页面的内容和页面的样式分别载入。

当用户打印一张网页时，可以通过使用不同的样式让打印出来的页面具有更强的可读性。

在CSS常规应用中，我们使用标记语言描述文档的内容，而不是样式。使用CSS来指定文档的样式而不是文档的内容。（在指南后面部分，你会看到此种安排方式的例外情况).

更多资料
类似于HTML这样的标记语言也提供某些指定样式的方法。

例如，在HTML中，可以使用<B>标签加粗文本，还可以在<BODY>标签中指定页面的背景色。

当我们使用CSS时，通常要避免使用标记语言的这些功能，而要把所有文档的样式统一放在一个地方。

[编辑] 实践: 创建一个样式表

在我们上一页创建的文件夹中再创建一个新的文本文件。 这个文件就是我们的样式表。 我们将它命名为: style1.css

打开刚才创建的CSS文件, 将下面代码复制并粘贴到新创建文件中，保存文件： 

strong {color: red;}

[编辑] 将样式表链接到文档

把样式表链接到文档，首先打开我们上一部分内容创建的HTML文件。 然的将下面粗体显示的那行代码添加HTML文件相同位置: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Sample document</TITLE>
  <LINK rel="stylesheet" type="text/css" href="style1.css">
  </HEAD>
  <BODY>
    <P>
      <STRONG>C</STRONG>ascading
      <STRONG>S</STRONG>tyle
      <STRONG>S</STRONG>heets
    </P>
  </BODY>
</HTML>

保存文件，刷新浏览器。 样式表把所有单词的首字母变成了红色，如下所示：

Cascading Style Sheets
挑战
除了红色外, CSS中还可以使用其它颜色。

在不参考任何资料的前提下，找出5种以上可在CSS中使用的颜色。

[编辑] 接下来的内容是什么?

如果你对理解本页内容感到困难，或有其它意见，请发布到讨论页。

现在我们已经创建一个示例文档，并将它外链接到一个独立的样式表文件。在接下来内容中，我们将学习浏览器是如何将这两者联系到一起的。CSS工作原理

取自"http://developer.mozilla.org/cn/docs/CSS:Getting_Started:Why_use_CSS"