css 属性font-size使用的详解

1778
<style>
.test p{margin:15px 0;border:1px solid #000;}
.xx-small p{font-size:xx-small;}
.x-small p{font-size:x-small;}
.small p{font-size:small;}
.medium p{font-size:medium;}
.large p{font-size:large;}
.x-large p{font-size:x-large;}
.xx-large p{font-size:xx-large;}
.smaller p{font-size:smaller;}
.larger p{font-size:larger;}
.float p{font-size:20px;}
.percentage{font-size:20px;}
.percentage span{font-size:60%;}
</style>
<ul class="test">
<li class="xx-small">
<strong>尺寸大小为xx-small:</strong>
<p>xx-small尺寸的文字。</p>
</li>
<li class="x-small">
<strong>尺寸大小为x-small:</strong>
<p>x-small尺寸的文字。</p>
</li>
<li class="small">
<strong>尺寸大小为small:</strong>
<p>small尺寸的文字。</p>
</li>
<li class="medium">
<strong>尺寸大小为medium:</strong>
<p>medium尺寸的文字。</p>
</li>
<li class="large">
<strong>尺寸大小为large:</strong>
<p>large尺寸的文字。</p>
</li>
<li class="x-large">
<strong>尺寸大小为x-large:</strong>
<p>x-large尺寸的文字。</p>
</li>
<li class="xx-large">
<strong>尺寸大小为xx-large:</strong>
<p>xx-large尺寸的文字。</p>
</li>
<li class="samller">
<strong>尺寸大小为samller:</strong>
<p>samller尺寸的文字。</p>
</li>
<li class="larger">
<strong>尺寸大小为larger:</strong>
<p>larger尺寸的文字。</p>
</li>
<li class="float">
<strong>尺寸大小为20px:</strong>
<p>20px尺寸的文字。</p>
</li>
<li class="percentage">
<strong>尺寸大小为20px:</strong>
<p>父对象20px尺寸的文字。<span>我的尺寸只是父对象的60%</span></p>
</li>
</ul>