CSS初学者技巧：谈CSS的标准和最佳示例_Div+CSS教程

 

本文的讲解将帮助你了解网站和CSS文件，还将帮助你们了解CSS文件中的内容。索引部分知识一个格式化了的CSS注释段落，CSS的标准和最佳示例。

 

CSS是用来定义网站的用户界面或将显示和内容区分开来的。

由于CSS被广泛地使用在几乎所有网站上，所以让我们花些时间来创建样式表并确保它符合良好的标准。下面的技巧会极大地在开发过程中帮助CSS初学者。

索引

本处的定义将帮助你和其他开发者了解网站和CSS文件，还将帮助你们了解CSS文件中的内容。索引部分知识一个格式化了的CSS注释段落。

1给出CSS文件的作者信息

2定义网站的设计（列数，静态/动态）［columns， static/liquid］

3持续跟踪文件版本（当文件有多个作者或未来需要有升级更新的时候非常有用）

 

锚点

锚点就好像在同一个CSS文件中的书签一样，锚点使你清晰地浏览整个CSS文件按并且使它很有组织。

锚点需要在CSS的索引（上面提到的）处定义，因为CSS没有自己的锚点系统，所以我在文档中使用了一个简单的技巧定义锚点。

方法是用一个比较罕见的字符来定义注释，当你想找某个锚点时，你就可以从索引处复制并查找锚点的定义符，并找到该锚点。

 

重定义

重定义是用来覆盖HTML默认的标签样式，把它们进行重定义的方法。你是否见过这样的CSS代码，它只是想把那个特定的元素加上样式！

CSS中一个非常美丽的用法是上下文选择器，让我们使用它：

 

 

命名规则

一个很关键的因素将元素给出精确无误并且干净有效的名字，这将避免混乱并让你更容易快捷地读懂你的CSS。

 

速写

CSS中的速写功能是你可以将许多同类型的属性合并成一个的属性。

CSS速写使开发过程更简单并且让你的CSS文件干净、简短、可读，下面是几个例子：

 

Sprites

（译者注：翻译成精灵好像并不能对文章加深感性认识，反倒在真正看到英文的时候不理解了，所以干脆不译。）

将所有的背景图片合并到一张并且使用背景定位来显示不同的部分，这就是我们所说的CSS Sprites。

CSS Sprites能够减少HTTP请求的数量，节省带宽，使得读取更快。同时也可以避免图像不稳定现象（比如当鼠标经过一张图片时可以显示另一张图片的效果，后一张图片将在慢速的因特网连接中等待半天才会出现）。

CSS Sprites最佳并且最受欢迎的例子是苹果公司网站上的菜单系统：