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>,可以在关键字的基 础上增大或者减小,实现自定义的基准文字大小。
我们最好是别追究太细节的东西,然而,不同的浏览器 - 系统平台的组合之间总是 可能存在微小的显示差别。但重要的在于,用户仍然可以通过浏览器内置的功能控制文字大小 。
| 回书目 上一节 下一节 |