如何在CSS中设定文本的尺寸

子元素像素值 / 父元素像素值 = 子元素 ems
12 / 10 = 1.2

下面我们希望我们的标题一为 24px。 h1 的父就是 #main_content div，我们知道它是 12px。 为了让标题为 12px，我们需要将其加倍，所以 ems  就是：

24/12 = 2

接着，这里有个小窍门，像这样应用规则：

#main_content LI {font-size:0.8333em}

这条样式规则表示所有的 #main_content 下的列表项目将显示成 10px。我们是通过同样直接的数学公式得出这个值的：

10 / 12 = 0.8333

但是如果列表嵌套又会怎么样呢？列表会越来越小。为什么？因为我们的规则明确的指出在 #main_content div 元素中的任何的列表项目都是它的父元素的 0.8333 倍。所以我们需要另外一条规则来防止这种“继承的缩小”

LI LI {font-size:1em}

(译者：这里，最好是 #main_content LI LI {font-size:1em}，以限定这条规则只能作用在 #main_content 下)

这就是说任何在其他列表项目内的列表项目应该保持同其父列表项目相同的尺寸。在开发期间，我通常采用一个完整的子选择器的集合来防止混乱的发生。

LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}

就是这样。当通过 ems 控制文本大小的时候有一条原则要记住：文本的尺寸要和其父亲关联，并且使用简单的计算来做到这一点：

子元素像素值 / 父元素像素值 = 子元素 ems

一些有用的工具

Pixy 的 list computed styles 是个神话般显示文本尺寸层级（或者其他的CSS属性）的书签。Mozilla’s Inspector Inspector （Mozilla Dom 查看器）是一更强大的工具，他允许你查看附加在任何元素的 CSS 规则以及叠层优先级，因此你能知道为什么你的文本没有照着你的预想改变尺寸。
(译者：这里，我强烈推荐 Firebug， IE8  内置的 Dom 查看器也还不错)

最后，什么是 ems

典型的说，一个 em (发音为 emm) 是个垂直间距的印刷单位，是个浮动的（相对的）度量。一个 em 是一个文本尺寸的距离。 在10像素的字体里，一个 em 就是10像素。在18像素的字体里，它就是 18像素。因此， 在任何文本尺寸下，1em 的边距都会是成比例的（译者：都会是一个字）。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!