CSS学习4——规划、组织和维护样式表

CSS学习4——规划、组织和维护样式表

添加样式表

在文档中添加样式表的方式有以下几种：

• 可以将样式放在style标签之间，从而直接在文档头上添加样式。
• 可以将样式放在一个或多个外部样式表中，然后在文档中链接或者导入样式表。

需要注意的是，导入样式表比链接样式表慢。

在使用多个CSS文件时，还有两个与速度相关的问题。首先，多个文件会导致从服务器发送更多数据包，这些数据包得到数量（而不是内容）会影响下载时间。另外，浏览器只能从同一个域同时下载数量有限的文件。由于这些原因，使用结构良好的单一CSS文件可以显著提高下载速度。

CSS注释

CSS注释以/*开头，*/结尾。注释可以是单行的，也可以是多行的，而且可以出现在代码中的任何地方。

设计代码的结构

• 一般性样式
  • 主体样式
  • reset样式
  • 链接
  • 标题
  • 其他元素
•  辅助样式
  • 表单
  • 通知和错误
  • 一致的条目
• 页面结构
  • 标题、页脚和导航
  • 布局
  • 其他页面结构元素
• 页面组件
  • 各个页面
• 覆盖

这里使用一种风格统一的大注释快分隔每个部分

/* @group general styles */

----------------------------------------------------------

/* @group helper styles */

----------------------------------------------------------

/* @group page structure */

----------------------------------------------------------

/* @group page components */

----------------------------------------------------------

/* @group overrides */

----------------------------------------------------------

 

优化样式表

使用CSS优化器删除注释和空白。

创建一个部署脚本，当你让修改的内容在生产环境生效时，能自动删除注释。

启动服务端压缩，如果使用Apache服务器，那么应该安装mod_gzip或mod_deflate。服务器端压缩能够将HTML和CSS文件减小大约80%，这可以减少对带宽的占用，大大加快页面的下载速度。

建立样式指南