您所在的位置: 首页>>读书频道>>设计开发>>网站开发>>

1.6.1 设定一个中间的关键字基准值

http://book.51cto.com  2008-01-16 12:38  (美)Dan Cederholm著/常可译  清华大学出版社  我要评论(0)
  • 摘要:《无懈可击的Web设计》提供了基于Web标准的网页设计策略,以帮助您创建出具有高度灵活性、可读性以及用户可控性的网站。第一章主要介绍的是使用关键字和百分比来设定页面文字的大小,以允许用户控制并实现最大程度的灵活性。本文说的是设定一个中间的关键字基准值。
  • 标签:Web  CSS  XHTML  无懈可击的Web设计

1.6 结合使用关键字和百分比值

要更好地利用将关键字和百分比值结合使用的优势,必需牢记一些规则。下面的内容,对于该如何正确地调整百分比值应该有所帮助,我们还要提出一个针对嵌套使 用百分比的警告。
1.6.1 设定一个中间的关键字基准值

在设定基准文字大小时,有一个有用的诀窍,即用一个包围所有对象的<div>来 帮助调整关键字值。多数情况下,在建立基于 CSS 的布局时,我们都会出于各种和设 计相关的理由,使用一个<div>(参见第 8 章)在基准关键字之上设定一个能影响整个页 面的百分比值。

例如,现在准备处理如下 H T M L 代码:

<body>

<div id="container">
<h1>This is a Title</h1>
<p>This is body text at default base size.</p>
</div>
</body>

如同本章前面完成的那些工作一样,我们可以设置一个基准关键字值,以及一个 有较大百分比值的<h1>对象:

body {
font-size: small;
}
h1 {
font-size: 150%;
}

但是如果我们感觉small值相对于我们的喜好还偏大了一点(在浏览器的默认设置情 况下查看时),我们可以通过给 #container 这个包围了页面上所有文字的对象设置一 个百分比,来让这个基准值实际上变小一些:

body {
font-size: small;
}
h1 {
font-size: 150%;
}
#container {
font-size: 95%;
}

如图 1 - 9 所示,文字从默认大小减下来了一些,同样也影响到了大标题文字。

图 1-9 这里是使用基准关键字值 small,

和将容器的文字大小设定为 95% 后的显示效果的比较

图 1-9 中,第一张图显示的是添加了规则使得 #container 的 font-size 被渲染为 95% 时的效果,第二张图则是页面在只使用关键字值 small 时的效果。两者的差别 其实很小。

当想用到一个介于两个关键字值之间的文字大小时,这便是一种很有用的方法, 能够更佳精确地设定大小值。使用这个包围了整个页面的<div>,可以在关键字的基 础上增大或者减小,实现自定义的基准文字大小。

我们最好是别追究太细节的东西,然而,不同的浏览器 - 系统平台的组合之间总是 可能存在微小的显示差别。但重要的在于,用户仍然可以通过浏览器内置的功能控制文字大小 。

【责任编辑:董书 TEL:(010)68476606】

回书目   上一节   下一节
企业级Web2.0 你准备好了么?
WebSphere 实现SOA的利器
Web安全云时代
企业Web安全威胁在线评估系统
Web 2.0基础知识大全
 
 验证码: (点击刷新验证码)   匿名发表
  • Visual C++ 完全自学宝典

  • 作者:强锋科技,朱洪波
  • Visual C++ 6.0是微软公司为程序人员提供的Visual Studio 6.0工具套件中的重要组成部分。本书由浅入深地介绍使用Visual C++ 6.0..
Copyright©2005-2008 51CTO.COM 版权所有