原文链接 http://docs.webplatform.org/wiki/tutorials/learning_why_we_use_css
概要
本次教程着眼于讲述为什么我们应该使用CSS以及为什么使用CSS设计我们的文档比使用描述性的HTML要好。
资料：为什么要使用CSS？
CSS帮助你从如何展示一个文档的琐事中分离出文档的信息内容。那些如何展示文档的琐事被称为文档的样式。将样式从内容中分离出来有以下好处：
- 避免重复
- 使得维护更容易
- 可以使用相同的内容加以不同的样式来实现不同的目的
你的网站可能有成千上万相似的页面。使用CSS，你可以将样式信息存储在通用的文件中供所有的页面共享。当用户打开了一个网页，用户的浏览器会单独加载关于页面内容的样式。当用户打印了一个网页，你应该提供不同的样式来保证打印出来的页面是易读的。
通常，你会使用HTML来描述页面内容而不是样式，使用CSS来指定页面的样式而不是内容。当然，也有例外，HTML也可以提供一些方法来指定样式。例如，在HTML中你可以使用<b>标签来加粗文本，也可以在<body>标签中指定页面的背景颜色。当你使用CSS的时候，通常会避免使用HTML的样式功能，这样所有的样式信息就都会被保存在一个地方。
实践：为HTML文档创建样式表
创建样式表
1.创建一个文本文件；这个文件就是你的样式表。命名为style1.css
2.在你的CSS文件中，复制下面这行代码并拷贝进去，然后保存文件：
strong { color: red; }
链接你的文档和样式表
1.创建另一个文本文件；这个文件就是你的文档。命名为你喜欢的任意名字
2.在你的HTML文件中，复制下面的代码并拷贝进去，<link...>那一行请引用你自己的样式表：
<!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>
3.保存文件并在浏览器中打开它。样式表会使得<strong>标签中的字母显示成红色，如下：
Cascading Style Sheets
下一步是什么？
现在你有了一个文档链接分离样式表的示例，准备学习更多关于浏览器如何结合他们并且展示文档的知识。更多信息请查阅本教程的其他章节。
时间： 2024-08-02 18:39:41