5.1 基础准备(2)


#container { max-width: 60em; }——设置max-width属性的效果就是保证#container 元素绝不会超过60em。如果用户减小窗口的宽度且小于#container的宽度,div会根据情况缩小。这是一个没有冲突的方法且能获得真正灵活的布局。


max-width属性最大的缺陷是IE完全不支持。不论是IE/Mac还是IE/Win都不能理解max-width。因此我们必须为IE提供一个已定义的宽度。在本例中定义的宽度是60em,但我们可以选择更灵活的百分比宽度。把这个值提供给IE,通过使用一个智能的CSS hack或在单独的样式表(含与浏览器相关的hack)中放一个“不正确”的值,IE就可自己确定宽度。在第2章已详细介绍了这两种方法。


body { font: 62.5%/1.6em “Lucida Grande”, Verdana, Geneva, Helvetica, Arial,  sansserif;}——在body元素中设置的字体属性实际上是一个速记属性。在简洁的属性/值对中,它声明了font-size (62.5%)、 line-height (1.6em)和font-family (Lucida Grande, Verdana,Geneva, Helvetica, Arial, sans-serif;)。由于这些值被body的后代元素继承,因此,用这一规则可以立即把一个基本的字体配置应用到整个文档。


font-size为62.5%是由Web设计人员Richard Rutter (How to Size Text Using ems, http://clagnut.com/blog/348)首次提出的技术。由于所有现代浏览器的默认文本大小为16px,把font-size设置为62.5%后,body得到的默认字体高度为10px(16 × 0.625 = 10)。把后代元素的字体大小单位设置为em更符合逻辑:1em是10px,1.6em就是16px,0.9em就是9px,等等。在整个文档中不用像素(如果用像素,IE用户不能调整大小)控制,在字体设置时该方法提供了与像素类似,并且用户能调整文本大小,使之满足需要。


#content img.portrait { float: right; }——这个非常漂亮的像素肖像与包含它的段落右对齐。但是我们没有用如<img src="blah.gif" align="right" />那样受抨击的标记技术,而是用强大的CSS float模型达到了同样的效果。(在此给大家推荐CSS大师Eric Meyer的优秀文章:"Containing Floats,网址 http://complexspiral.com/publications/containing-floats。)


我们可以很容易把整个这段代码粘贴到文档头的<style type="text/css">...</style>块中,当然这很容易使我们把标记与表现形式的信息搞混——老实说,谁希望在几百个XHTML文档中去搜寻样式信息呢?非常正确,一些人称之为“坚持结构与样式的严格分离”。也可以把这称为“懒惰”。无论您怎么想,保持结构与样式分离会使站点相关工作。


使用中间样式表的另一个好处是可以在里面添加多个@import规则。在需要把表现形式拆分成多个文件时(如一个用于布局,另一个用于颜色,另一个用于版式),这就会很方便。甚至更好的是,可以用这个技术管理不同的 CSS hack,就像我们在第2章看到的那样。在测试程序清单5-3的CSS时,可能会发现不同版本的IE(包括Macintosh和Windows平台)违反了布局的不同方面。我们可在core.css文件内用一些备用的样式表hack,为浏览器违反的CSS实现提供一些可供选择的属性值。程序清单5-3说明了如何用封装样式表导入与浏览器有关的CSS hack文件,使main.css文件保持干净整洁且无hack。






 

我们已经研究了在不理解CSS的浏览器中能正确显示页面所需的CSS hack,也知道把不同hack引入与浏览器有关的文件中的方法,这是保证core.css文件干净整洁和无hack的很好的方法。如果您决定不支持某些浏览器器,只需在main.css文件中删除几行即可,与在原来的样式表规则中一行行地查找CSS hack相比,这确实是一个更有吸引力的想法。在CSS Best Practices Headquarters再次声明,这有一定的“战略性”并有一些“懒惰”成分。


在了解CSS和XHTML后,下面将研究样式表切换的机制。





标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2