CSS实例【DOC精选】.docVIP

第12章CSS实例 课前导读 前面，我们已经较为全面地介绍了CSS技术以及与CSS相关的几种技术。应该说CSS技术本身不难理解，运用CSS技术最关键的是经验的积累。本章将以一系列的实例来展示CSS的使用技巧。 本章重点 在本章我们将重点学习： 如何解决CSS属性在IE和FF浏览器下显示不一致的问题 几种菜单效果的实现 12.1 CSS兼容问题解决 我们在学习CSS基本属性的时候已经了解到，很多CSS属性在IE浏览器和FF浏览器下的显示效果是不同的，这是使用CSS技术最让人头痛的问题之一。实际上很多大型网站通常通过判断访问者浏览器的类型、版本以及分辨率的大小来以不同的页面来响应，这当然是一个安全的解决办法，但是对于大多数的网站来说这有些小题大做了，我们可以使用一些小技巧在一定程度上解决这一问题。 12.1.1 条件注释 借助于微软的私有属性条件注释，可以针对于IE浏览器单独定义一些样式，而不影响主样式表的定义。条件注释在IE5以上的版本里被支持，但我想对于今天的IE浏览器用户来说这包括了绝大多数，更重要的是即使在不支持这种条件注释的低版本浏览器中也不会出现什么严重问题。 条件注释的形式如下： !-- [if IE] 样式声明 ![endif]-- 需要注意以下几方面的问题： 1. 条件注释的基本结构和HTML的注释(!-- --)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而忽略它们。 2. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。 3. 条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。 4. 在if条件语句中可以使用“gt”和“lte”表示“大于”和“小于等于”。 我们看接下来的这个例子。 例12-1 条件注释的使用 html head title条件注释/title /head body !--[if IE] h1您正在使用IE浏览器/h1 ![endif]-- !--[if IE 5] h1版本 5/h1 ![endif]-- !--[if IE 5.0] h1版本 5.0/h1 ![endif]-- !--[if IE 5.5] h1版本 5.5/h1 ![endif]-- !--[if IE 6] h1版本 6/h1 ![endif]-- !--[if IE 7] h1版本 7/h1 ![endif]-- /body /html 该例在IE6.0下运行结果如图。而在FF2.0下显示结果为一空白页。因此我们可以利用这一特性，针对IE浏览器做一些设置。 图12-1 以条件注释判断浏览器类型 12.1.2 !important语句 对于IE浏览器和FF浏览器来说，!important语句可以用来指定仅适用与FF浏览器的CSS样式，原因是!important语句IE浏览器不能识别。但是需要注意的是为保证适用于IE浏览器的样式生效，要将其写在后边以覆盖前面的设置。 我们观察例12-2。 例12-2 !important语句的使用 html head title!important语句/title style type=text/css #content1{ border:1px solid #F00; width:150px; margin:2px; } #content2{ border:1px solid #F00; width:130px !important; width:150px; margin:2px; } /style /head body div id=content1content1的内容。/div div id=content2content2的内容。/div /body /html 该例在IE浏览器和FF浏览器下的运行结果分别如图12-2，图12-3。我们看到由于IE浏览器不识别!important语句，对于id为“content2”的元素显示宽度依然为150px。因此，凭借此差异可以分别定义适用于两种浏览器的CSS样式。 图12-2 IE浏览器显示效果 图12-3 FF浏览器显示效果 12.1.3 子对象选择符和相邻选择符 子对象选择符和相邻选择符同样由于IE浏览器不能识别，也可以用来分别定义两种浏览器下的CSS样式。例12-3和例12-4分别使用了子对象选择符和相邻选择符来同样实现例12-2的内容。 例12-3 子对象选择符的使用 html head title子元素选择符/title style type=text/css #content1,#content2{ border:1px solid #F00; width:150px; mar