为什么要使用css样式表-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

css样式表可以帮助开发者从如何展示一个文档的琐事中分离出文档的信息内容，即把样式从内容中分离出来；这样做的好处：1、可以使用相同的内容加以不同的样式来实现不同的目的；2、避免重复；3、使得维护更容易；4、减少网页代码量，提高网页传输效率。

本文操作环境：windows10系统、css3、thinkpad t480电脑。

（推荐教程：CSS视频教程）

为什么要使用css样式表？

CSS帮助开发者从如何展示一个文档的琐事中分离出文档的信息内容。那些如何展示文档的琐事被称为文档的样式。将样式从内容中分离出来有以下好处：

避免重复
使得维护更容易
可以使用相同的内容加以不同的样式来实现不同的目的

你的网站可能有成千上万相似的页面。使用CSS，你可以将样式信息存储在通用的文件中供所有的页面共享。当用户打开了一个网页，用户的浏览器会单独加载关于页面内容的样式。当用户打印了一个网页，你应该提供不同的样式来保证打印出来的页面是易读的。

通常，你会使用HTML来描述页面内容而不是样式，使用CSS来指定页面的样式而不是内容。当然，也有例外，HTML也可以提供一些方法来指定样式。例如，在HTML中你可以使用<b>标签来加粗文本，也可以在<body>标签中指定页面的背景颜色。当你使用CSS的时候，通常会避免使用HTML的样式功能，这样所有的样式信息就都会被保存在一个地方。

使用css样式表主要是为了方便于网页设计的分工协作，比如说html部分由一个人或一个团队去完成，js程序部分也是一批人去完成，css也是交给专业人士去做，这样肯定就能提高效率，就像装修房子，硬装和软装都分别由专业的工程队去做，肯定能做得又快又好。反之，如果所有工作都交给一个工程队去完成，质量和工期就无法保证了。

此外，一个网页的css样式表，可以原封不动就给另一个网页甚至其他网站的网页使用，这就意味着css是可以重用的，这样就可以大大减少网页的代码量，提高网页传输效率，也可以使网站保持划一的外观样式，当然同时也就减轻了网页设计人员的工作强度。这就好比一个房子的装修样式，可以完全复制到另一个类似结构的房子，这可以既可以减少房子装修的成本，同时也可以让房子保持统一的装修风格。

实践：为HTML文档创建样式表

创建样式表

1.创建一个文本文件；这个文件就是你的样式表。命名为style1.css

2.在你的CSS文件中，复制下面这行代码并拷贝进去，然后保存文件：

1	`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>