-
XHTML和CSS应用之灵活的文字
灵活的文字
策略：让文字大小具有高度灵活性并易于实现，同时也尽可能地保证对设计细节的全权控制。灵活设置页面文字的大小，赋予用户控制页面文字大小的能力，从而提供更好的页面可读性。
要点：如何在保持灵活性的同时仍能在文字周围进行精确巧妙的细节设计。
方法：使用基准值+百分比模型。在body对象中设置表示“绝对大小”的关键字，比如small，以此做为基准，然后使用百分比值来增大或减小其它对象中的字体大小。当基准值改变后，其它对象中的字体大小也会相应地改变。
技巧：使用一个能将页面中其它部分包围起来的<div>，即body对象（设置small关键字）的子元素，然后对该<div>用百分比在父元素关键字的基础上增大或者减小字体大小。
代码：
<body> <div id="wrap"> <h1>This is a Title</h1> <p>This is body text at default base size.</p> </div> </body>body{ font-size:small; } #wrap{ font-size:95%; } h1{ font-size:150%; }使用em实现灵活的文字：将<body>元素中的基准字体大小设置为62.5%，使默认的中等字体大小从16px缩小为10px，1em将显示10px，1.2em将显示12px等。
3 条评论 -
利用XHTML和CSS提高网站的灵活性与适应性
这段时间一有空闲，就一头扎进由Web设计大师Dan Cederholm所著的《无懈可击的Web设计》一书中，这部著作分Ⅰ、Ⅱ两册，Ⅰ册主题既本文标题也是书名副标题，Ⅱ册主题为CSS深入应用，作为Ⅰ册内容的延伸并介绍在当前Web标准下，怎样利用“平稳退化，渐进增强”的理念而结合CSS3新增属性打造更加合理的设计方案。
在Ⅰ册中，作者认为，一个高质量且吸引人的Web设计方案由“可视组件”和“无懈可击的实现方式”两项重要内容构成。“可视组件”即图像设计、颜色和排版这些可以最终在页面上明显看到的部分，而“无懈可击的实现方式”即明智选择使用XHTML和CSS，并利用Web标准创建尽可能高灵活性、适应性以及亲和力网站的方式。后者也就是Ⅰ册讨论的焦点。
我在读这部著作之前的重构功底，也就能应付一般的项目，出的设计方案也很难说具有灵活性、适应性和亲和力，自从接触了这部著作，被书中的案例深深吸引，作者在各章都会先考察一个现有的设计例子，然后用XHTML和CSS进行重构，改善其灵活性和减少代码量。书中的实例可以快速有效地打造一个无懈可击的设计方案，其中所传达出的设计思想，想必会对自己今后项目质量有所帮助。现在，我想通过几篇文章，结合自己的理解重现书中的经典案例。
Ⅰ册目录：
1、灵活的文字
使用关键字和百分比来设定页面文字的大小，以允许用户控制并实现最大程度的灵活性2、可伸缩的导航栏
让网站导航栏能够适应任意大小的文字或者任何数量的内容3、可扩展的行
不要指定横向页面组件的高度，要让它们能够在纵向自由扩展4、巧妙的浮动
通过浮动来实现表格效果5、牢固的方框
设计框式的组件之前，应考虑好未来可能会出现的问题6、页面在缺失图片或CSS的情况下仍然易读
7、可转换的表格
把外观从数据表格中剥离出来，再用CSS重新定义8、流动布局和弹性布局
能自由扩大和缩小的页面布局我尽可能地按照作者书中讲述的内容顺序来重现书中案例。
关于《无懈可击的Web设计》作者
作者锡德霍姆（博客http://simplebits.com/）是一位屡获殊荣的Web设计师及作家，擅于运用Web标准来简化和重构设计，2003年因重构了Fast Company和Inc.com两个著名网站而蜚声业界。Dan信奉使用Web标准来实现灵活且适应性强的设计，他在Web标准设计领域方面拥有多年的实践经验，曾帮助Google、MTV、ESPN、Fast Company、Blogger、Odeo等知名公司设计网页和重构网站。他是一位活跃的技术专家，经常在业界最重要的技术会议上发表演讲，也是A List Apart等网站的专栏作者。他的博客SimpleBits颇受欢迎，他经常在上面撰写有关Web、技术及人生的文章和评论。除本书外，他的另一部畅销书Web Standards Solutions也备受读者青睐。——摘自Ⅰ册封底
