快速业务通道

CSS实例:CSS的10个方法和技巧

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03

CSS用于定义网站的UI和将内容从外观中分离。

CSS在几乎所有网站中被广泛应用。让我们花点时间来看看我们编写的样式是否基于比较好的标准。

下面的这些技巧将对CSS初学者在开发中有所帮助,对CSS高手或许也将有某些提高。


索引

这个定义可以帮助你和其他人更多的理解这个网站。这个索引只是一个格式化的文本段落,和CSS注释一样。

  • 给该CSS的作者以一些著作权声明
  • 定义网站的布局[卷数,固定宽度或全屏]
  • 跟踪版本[对多个编辑者和特别更新很有用]


锚点

锚点在CSS中就像书签。锚点让你很方便的浏览你的CSS而不会盲目和混乱,会让一切变得有规律。

锚点在CSS的索引中定义。CSS没有原生的锚点系统,所以我在文档中采用一种比较简单的技术来定义锚点。

这个主意是用一套特定的字符来定义注释。要找到一个锚点,你可以通过复制和查找(搜索)索引中定义的锚点,然后就可以很正确的定位到相关的内容。


多类症

多类症 是一个术语,用来描述在HTML中过度使用class定义的现象。

CSS中最美的地方之一就是上下文选择器,让我们使用这个吧:


命名规范

给你的元素声明一个恰当和简洁的名字是一个关键。这真的能够 避免混乱 并能让你更好更快的理解CSS。
事实上这涉及到代码的语义化和可读性,好的命名规则可以让自己和团队的工作更加轻松。


简写

CSS中的缩写是指,定义与单个样式拥有相同属性的一系列样式.
CSS简写可使开发工作变得更加容易,并让你的CSS保持简洁、更小而且更易用。这里是一些示例:


Sprites

合并所有的背景图片到一个单个图片里面,并通过background-position属性来使用这个图片,这就是我们所谓的CSS Sprites的全部。
CSS Sprites可以减少HTTP请求的数量,节省带宽并加快页面加载。同时,可以避免图片闪烁[例如,如果系统或网速比较慢的时候,当鼠标放到一个按钮时加载另外一个图片就可能引起闪烁/中断]。
最好和最著名的使用CSS Sprites技术的例子就是Apple公司官方网站的菜单系统。

图片来源: apple.com


特异性

选择器特异性 是一种用于确定当多个规则用于同一个元素的时候哪一个起作用(优先级)的处理方法。

通常来说,每一个CSS选择器都有一些种类的关联权重,某个选择器的所有权重之和决定它在文档中的优先权。当遇到很大的CSS文件时,特异性就非常有帮助。

然而,特异性在CSS中是一个很大的领域,它不能用一些简单的语句解释清楚。这里是一些示例:


重设

全局重设可以确保一个网站在所有浏览器保持统一的外观。完全不一样的浏览器会

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号