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

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

 

本文的讲解将帮助你了解网站和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最佳并且最受欢迎的例子是苹果公司网站上的菜单系统:

共2页上一页12下一页
来源:模板无忧//所属分类:Div+CSS教程/更新时间:2012-03-01
相关Div+CSS教程