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

2019-03-14 19:47:52王冬梅

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

图片来源: apple.com
特异性
选择器特异性 是一种用于确定当多个规则用于同一个元素的时候哪一个起作用(优先级)的处理方法。
通常来说,每一个CSS选择器都有一些种类的关联权重,某个选择器的所有权重之和决定它在文档中的优先权。当遇到很大的CSS文件时,特异性就非常有帮助。
然而,特异性在CSS中是一个很大的领域,它不能用一些简单的语句解释清楚。这里是一些示例:

重设
全局重设可以确保一个网站在所有浏览器保持统一的外观。完全不一样的浏览器会在一个网站上应用自己的默认设置,这可能导致一个网站在不同的浏览器有不同的界面表现……一个全局重设可以解决这个问题,可以让你从一个绝对基础构建一个网站。
使用一个CSS框架不是什么时候都是恰当的,但是一个CSS 重设是你每次都需要的。从简单到复杂,有很多不同的重设方法。

Hacks
即便是完美的CSS也未必能在所有的浏览器生成完全一致的输出,因为浏览器解释你的CSS的方法不同。如果你想使你的网站在所有的浏览器中看起来一样,你不得不使用CSS hacks。

我承认使用CSS hacks会在CSS验证的时候出现错误。一个替代的方法是建一个独立的针对某个浏览器的特别CSS文件,然后在HTML代码中使用特定标签引用它。我常常在我的所有项目中使用“fuck-ie.css”文件
这样你就可以验证你的主要CSS文件,而且也可以验证 “fuck-ie.css” 文件,只是在IE中的主要CSS文件的优先级低一点儿…
验证
当你写好了CSS文件之后,验证一直是件很重要的事情。这可以确认你的CSS是没有错误的而且在不同的浏览器中的解释/表现是一样的。
W3C Validator 是一个非常流行和有用的在线验证CSS的工具。