单词:font-size 语法:font-size : absolute-size | relative-size | length 取值:xx-small | x-small | small | medium | large | x-large | xx-large xx-small:最小 x-small:较小 small:小 medium:正常(默认值),根据字体进行调整 large:大 x-large:较大 xx-large:最大 也可取具体长度单位值 2、font-size使用方法 font-size:12px; 设置对象具体字体大小为12px font-size:xx-small; 设置文字大小为最小 font-size:small; 设置文字字体大小为小 font-size:x-large;设置对象字体大小为较大 font-size:larger;设置对象字体大小为大 font-size:smaller;相对于父容器中字体尺寸进行相对减小 font-size:50%;相对于父容器中字体尺寸进行相应调整为50%大小 font-size:150%;相对于父容器中字体尺寸进行相应调整为150%大小 3、 对应DIV+CSS代码: 01. < !DOCTYPE html > 02.< html > 03.<head> 04.<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 05.<title>font-size字体大小测试-DIVCSS5实验</title> 06.<style type="text/css"> 07.body{ font-size:12px; line-height:24px;} 08..exp1{font-size:12px;} 09..exp2{font-size:xx-small;} 10..exp3{font-size:small;} 11..exp4{font-size:x-large;} 12..exp5{font-size:larger;} 13..exp6{font-size:smaller;} 14..exp7{font-size:50%;} 15..exp8{font-size:150%;} 16.</style> 17.<!-- www. --> 18.</head> 19.<body> 20.<div class="exp1">我被font-size值为12px大小</div> 21.<div class="exp2">我被font-size值为xx-small大小</div> 22.<div class="exp3">我被font-size值为small大小</div> 23.<div class="exp4">我被font-size值为x-large大小</div> 24.<div class="exp5">我被font-size值为larger大小</div> 25.<div class="exp6">我被font-size值为smaller大小</div> 26.<div class="exp7">我被font-size值为50%大小</div> 27.<div class="exp8">我被font-size值为150%大小</div> 28.</body> 29.</html>
4、font size=5什么意思 有时我们看见或遇到如: <font size="5">内容</font> 这个方法也是直接使用font标签加size设置对象字体大小。这里5代表设置对象字体大小为5号字。 大家可以使用此方法测试测试比如设置size="2"、size="3"、size="8"等等不同值观察观察区别并掌握。 5、CSS font-size常见运用 5-1、直接标签内使用font-size设置对象内容字体大小 <div style="font-size:14px">我被设置字体大小为14px</div> 5-2、使用标签与CSS样式分离设置对象内容字体大小(推荐) CSS代码:.divcss5{ font-size:16px;} 对应HTML DIV代码:<div class="divcss5">我被CSS font-size样式设置字体大小为16px</div> 我们常常以此方法来设置对象字体大小。也就是所说的表现与CSS样式分离。 6、对CSS font-size总结 我们使用CSS font-size设置对象字体大小样式,一般设置文字字体大小以具体长度单位值来确定对象内容文字大小。总之记住如CSS代码font-size:14px,即设置对象字体大小为14px(像素)。
|