为何使用CSS?

这是CSS入门教程 的第二章节,解释了CSS与文档的关系。在下面的练习中,你将学习如何给你在第一章节中创建的示例文档添加CSS样式表。

信息: 为何使用CSS?

CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知,如何展现文档的细节即为样式(style)。您可以将样式从它的内容分离出来,以便您能够:

  • 避免重复
  • 更容易维护
  • 为不同的目的,使用不同的样式而内容相同
例如

您的网站可能有成千上万的页面外观相似。使用CSS,您可以将样式信息存储在公共的文件中以供所有的页面共用。

当用户显示页面时,用户的浏览器将样式信息和页面内容一同加载。

当用户打印页面时,您可以提供不同的样式信息,以便于打印出来的页面更易于阅读。

总之,在HTML中,您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。 (在本教程后续内容中,您会看到此种的例外情况。)

更多的细节

象HTML之类的标记语言也会提供指定样式的方法。

例如,在HTML中,您可以使用<b>标签来加粗文字,同时,您也可以在页面的<body>标记中指定背景颜色。

当您使用CSS时,您通常要避免使用标记语言的这些特性,以便您所有的文档样式信息保存在同一地方。

行动:创建样式表

  1. 在与前面相同的目录中,新建另一个文本文件。该文件将成为您的样式表。请将它命名为:style1.css
  2. 在您的CSS文件中,复制、粘贴下面的行,并保存该文件:
    strong {color: red;}
    

连接您的文档和样式表

  1. 为将您的文档和样式表相连,请编辑您的HTML文件。并添加下面高亮的行:
    <!DOCTYPE html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Sample document</title>
      <link rel="stylesheet" href="style1.css">
      </head>
      <body>
        <p>
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
      </body>
    </html>
    
  2. 保存该文件并刷新您的浏览器。该样式表将首字母显示为红色,如下所示:
    Cascading Style Sheets
挑战

除了红色外,CSS允许使用其它的颜色名称。

不查询参考手册,请在您使用的样式表找出五个以上的颜色名称。

Possible solution

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

Hide solution
请参考解答。

下一节?

现在您将示例文档与独立的样式表连在了一起,您已准备好学习更多的关于您的浏览器在显示文档时如何将它们组合在一起。

文档标签和贡献者

 此页面的贡献者: fbwfbi, ziyunfei, haofu, teoli, Chajn, aihua
 最后编辑者: fbwfbi,