您的位置: 首页 > 技术文档 > 网站建设 > CSS锦囊
CSS超级技巧大放送合集 回到列表 CSS经典技巧十则
 CSS锦囊

作者:snwebsite 时间: 2006-06-17 文档类型:原创 来自:蓝色理想

在使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考。

有疑问,先验证
在调试时,先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。
在其他浏览器中进行测试之前,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反。
如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览器的糟糕的显示,然后在符合标准的浏览器中进行测试,看到显示结果“不正常”时,你会很沮丧的。相反,您应该先将您的代码完善,然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的,你不必再为支持其他浏览器而劳心费神。当然了,目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。

确保您期望的效果确实存在
许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter(滤镜) 或滚动条指定了样式,那么您就用了私有代码,除了IE之外,在别的浏览器中毫无作用。如果验证器告诉您代码没有定义,极有可能您用了私有样式,这样在不同的浏览器中很难达到一致的效果。

如果布局中一定要用浮动对象,别忘了适时使用清除(clear)属性。
浮动对象似易实难,而且不总是令人如愿以偿。如果您发现浮动对象伸出了容器的边界,或者不像您所期望的那样显示,请检查您的期望是否正确。关于这个问题请看Eric Meyer的教程

边距的合并:可用padding 或 border 来避免。
您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins,边距的合并可能就是问题的根源。 Andy Budd 对此的解释可能为你解惑。

避免将 padding/border 和固定宽度同时应用到同一元素。
IE5 的区块模型是错误的,是它把事情办坏了。对此也有权宜之计,不过最好是绕过这个问题,当子元素的宽度固定时,为父元素指定padding。

避免IE下未指定样式内容的闪烁。
如果您仅仅靠 @import 来输入外部样式表,早晚您会发现IE有“闪烁”的毛病。在应用CSS样式之前,未经格式化的HTML文本会短暂地出现。这是可以避免的.

别指望 min-width 在IE中有用。
IE不支持它,但是它将 width 当作 min-width,所以通过一些 IE 的过滤技巧(filtering),可以实现同样的最终效果。

把CSS过滤器(filters)当作最后的手段
CSS 技巧和过滤器可以使您有选择地应用到(或者不应用到)某些元素。应当尽可能地找到标准的跨浏览器的解决办法来实现您想要的效果,而不是动不动就使用过滤器。要将它当成走投无路时的救命手段。在这里可以找到大量的CSS 过滤技巧。[译注:不要把这里的filters和IE中的滤镜混淆。由于各个浏览器对CSS标准的支持程度不一,人们找到了许多技巧,将浏览器无法解释或错误解释的样式表或规则屏蔽掉。这就是所谓的CSS过滤器或技巧。]

如果使用了锚点,在应用超链接样式时要特别小心。
如果您在代码中使用了传统的锚点(<a name="anchor">),您会注意到 :hover 和 :active伪类也会作用于它。要避免这种情形,你可以使用 id,或者使用鲜为人知的语法: :link:hover, :link:active

记住“LoVe/HAte”(爱/恨)链接规则
要以下面的顺序指定超链接伪类:Link, Visited, Hover, Acitve。任何其他顺序都不妥当。假如用了 :focus,次序应为 LVHFA(“Lord Vader's Handle Formerly Anakin”,Matt Haughey这样建议)。

请记住“TRouBLED”(麻烦的)边框。
边框(border)、边距(margin)和补白(padding)的简写次序为:顺时针方向从上开始,即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上边距为零,右边距为1px,依此类推。

非零值要指明单位。
在用CSS指定字体、边距或大小时,必须指明所用的单位。某些浏览器对未指明单位的处理方法不足为凭。零就是零,不管是 px还是em还是其他单位,它不需要单位。例如: padding: 0 2px 0 1em;

测试不同的字体大小。
像Mozilla和Opera这样的高级浏览器允许对字体进行缩放,不管你用的是什么单位。某些用户的默认字体大小肯定和您的不同,尽最大努力去满足他们。

用嵌入式测试,发布时改为输入。
将样式表嵌入在你的HTML源代码中,在测试时可以消除许多缓存引起的错误,尤其是某些Mac下的浏览器。但在发布前,一定要记住将样式表移到外部文件,用 @import 或 <link>引入。

加上明显的边框有利于布局调试。
像 div {border: solid 1px #f00;} 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的交错或空白问题。

对图片路径不要用单引号。
当设置背景图片时,要坚持用双引号。尽管看起来有些多余,但是如果不这么做,IE5/Mac会噎住。

不要为将来的样式表(比如手持式设备或打印用样式表)留个“空位”。
Mac IE5 对空的样式表比较感冒,会增加页面的装入时间。建议样式表中至少应该有一条规则(哪怕是注释也好),免得 MacIE噎住。
另外值得一提的还有一些虽然不针对某些功能,但是在开发过程中应当注意的理论:

好好组织您的CSS文件
恰当地成块注释CSS,将相似的CSS选择符编为一组,养成一致的命名习惯和空白格式(为跨平台考虑,建议用空白字符而不是tab。)以及适当的次序。

以功能(而不是外观)为类和ID命名
假如您创建了一个 .smallblue 类,后来打算将文字改大,颜色变为红色,这个类名就不再有任何意义了。相反,您可以用更有描述性的名字如 .copyright 和 .pullquote。

组合选择符
保持CSS短小对减少下载时间非常重要。请尽量为选择符分组、 利用继承(inheritance)以及使用简写(shorthand)来减少冗余。

使用图片替换技术时要考虑亲和力
已经发现传统的FIR在屏幕阅读器,以及关闭图片显示[的浏览器]中会出问题。 对此有其他解决办法,要根据具体情况,慎重使用。

出处:蓝色理想
责任编辑:moby

◎进入论坛网站综合网页制作版块参加讨论

相关文章 更多相关链接
斜体样式的导航条
css静态滤镜 + A:Hover
CSS超级技巧大放送合集
文字链接技术基础
CSS经典技巧十则
作者文章
CSS超级技巧大放送合集
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2