您的位置：首页 > Web前端 > CSS

CSS继承机制&使用相对单位设置字体大小

2013-03-24 22:03 561 查看

CSS要对准的所有标签都包含在body中。由于CSS的继承机制，如果我们为body标签添加如下字体样式：

body {font-family:verdana, helvetica, sans-serif; color:blue; }

整个文档中所有文本元素的文本都会继承这些样式，无论该元素在文档层次中多么靠近底部。

继承的效率是显而易见的，你不用为每个标签分别指定期望的字体，可以在针对body的一条规则中为整个网站设置主字体，然后，只需为那些该显示为不同字体的标签单独设置字体即可。

有很多CSS属性不会被继承，因为没有意义。这些属性主要涉及盒元素。

按比例缩放字体大小的优点：

用户可以在浏览器的相关选项中选择更大或更小的选项，将网页字体成比例地缩放。对视力残障的用户及那些使用超高分辨率显示器的用户，会使网站可访问性得到增强。

当对页面的设计进行调整时，可以通过简单地修改body标签的字体大小，就能按比例改变所有文本的大小；因为修改body标签的字体大小，相当于修改了基准大小，因而其他所有元素都会根据基准大小的变化来成比例地缩放它们字体的大小。

CSS数字值中的相对单位：em和ex。

em的计算依据是一种字体中字符的宽度，也就是说，em的大小根据使用字体的不同会有所不同。多数浏览器都会为1em设置默认的字体大小（16像素）。

一个例子：

html代码

<body>
<h3>Welcome to XHTML</h3>
<p>
Good XHTML markup makes your content portable, accessible and future-proof.Creating XHTML-compliant pages simply requires following a few simple rules.Also, XHTML code can
be easily validated online so you can be sure it is correctly written.
</p>

<ol>
<li>Declare a DOCTYPE</li>
<li>Declare an XML namespace</li>
<li>Declare you content type</li>
<li>Close every tag, enclosing or non-enciosing</li>
<li>All tags must be nested correctly</li>
<li>Inline tags can't contain block level tags</li>
<li>Write tags in lowercase</li>
<li>Attritubes must have values and must be quoted</li>
<li>Use encoded equivalents for left brance and ampersand</li>
</ol>

<ul>
<li><a href="#">W3C's XHTML validator</a></li>
<li><a href="#">W3C's CSS validator</a></li>
<li><a href="#">XHTML Resources</a></li>
<li><a href="#">CSS Resources</a></li>
</ul>
</body>

CSS代码

<style type="text/css">
body {
font-family:verdana, arial, sans-serif;
font-size:100%;
}
h3 {font-size:.8em;}
p {font-size:.8em;}
ol {font-size:.75em;}
ul {font-size:.75em;}
a {font-size:0.7em;}
</style>

效果图（最好用除chrome外的较新版浏览器，原因在最后）：

会发现下边的无序列表的字体大小比上边的有序列表小一些，虽然在css规则中将ul和ol设置为一样大0.75em。这是因为嵌套在ul中的a元素设置为0.7em造成的。这样一来，位于嵌套的a元素中的文本实际大小变成了0.75 * 0.7 = 0.525em。

解决方法，设置一个上下文选择符：ul a {font-size:inherit;}

有序列表和无序列表的字大小相同，如下图：

然后改动一下body选择符中的font-size属性的值，改为font-size:150%; 然后查看效果，网页字体成比例地放大了，如下：

在Google浏览器中设置font-size < 12px 没有效果，文字大小为12px。http://www.cnblogs.com/georgewing/archive/2010/08/30/1812719.html

另附：我国在使用相对字体单位的情况是很DT的。

95%的中国网站需要重写CSS
在我所观察的中国网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。
百度百科：http://baike.baidu.com/view/350386.htm#refIndex_2_350386

本文出自 “开心菠菜” 博客，请务必保留此出处http://kaixinbocai.blog.51cto.com/3913323/1161760

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航