CSS font-size样式属性说明

2013-10-19 admin DIVCSS5
浏览
导读:语法: font-size : absolute-size | relative-size | length 说明: 设置或检索对象中的 字体大小 尺寸。 一、设置字体大小CSS单词与语法 基本语法结构: .divcss5{font-size:12px;} 设置了文字大小为12px像素 Font-size+字体大小数值+单位 单词:font-size


语法:
 
font-size : absolute-size | relative-size | length 

说明:
 
设置或检索对象中的字体大小尺寸。

一、设置字体大小CSS单词与语法  

基本语法结构:

.pcss5{font-size:12px;}
设置了文字大小为12px像素
Font-size+字体大小数值+单位

单词: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:最大
也可取具体长度单位值

二、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%大小

三、使用效果  

源代码:

  1. < !DOCTYPE html >  
  2. < html > 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>font-size字体大小测试-人人自学网</title> 
  6. <style type="text/css"> 
  7. body{ font-size:12px; line-height:24px;} 
  8. .exp1{font-size:12px;} 
  9. .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.rrzxw.net --> 
  18. </head> 
  19. <body> 
  20. <p class="exp1">我被font-size值为12px大小</p> 
  21. <p class="exp2">我被font-size值为xx-small大小</p> 
  22. <p class="exp3">我被font-size值为small大小</p> 
  23. <p class="exp4">我被font-size值为x-large大小</p> 
  24. <p class="exp5">我被font-size值为larger大小</p> 
  25. <p class="exp6">我被font-size值为smaller大小</p> 
  26. <p class="exp7">我被font-size值为50%大小</p> 
  27. <p class="exp8">我被font-size值为150%大小</p> 
  28. </body> 
  29. </html> 


输出后效果:
 

我被font-size值为12px大小

我被font-size值为xx-small大小

我被font-size值为small大小

我被font-size值为x-large大小

我被font-size值为larger大小

我被font-size值为smaller大小

我被font-size值为50%大小

我被font-size值为150%大小


四、font size=5什么意思  

有时我们看见或遇到如:
<font size="5">内容</font>
这个方法也是直接使用font标签加size设置对象字体大小。这里5代表设置对象字体大小为5号字。
大家可以使用此方法测试测试比如设置size="2"、size="3"、size="8"等等不同值观察观察区别并掌握。

五、CSS font-size常见运用 

5-1、直接标签内使用font-size设置对象内容字体大小
<p style="font-size:14px">我被设置字体大小为14px</p>

5-2、使用标签与CSS样式分离设置对象内容字体大小(推荐)
CSS代码:.pcss5{ font-size:16px;}

对应HTML DIV代码:<p class="pcss5">我被CSS font-size样式设置字体大小为16px</p>
我们常常以此方法来设置对象字体大小。也就是所说的表现与CSS样式分离。

六、font-size案例  

1、文字大小案例CSS代码

  1. #pcss5{ font-size:14px;} 
  2. .pcss5{ font-size:18px;} 

2、字体大小案例HTML代码

  1. <p id="pcss5">我大小为14px</p> 
  2. <p class="pcss5">我大小为18px</p> 

3、font-size案例


我大小为14px

我大小为18px

 

七、对CSS font-size总结  

我们使用CSS font-size设置对象字体大小样式,一般设置文字字体大小以具体长度单位值来确定对象内容文字大小。总之记住如CSS代码font-size:14px,即设置对象字体大小为14px(像素)。

对于对对象文本字体大小的样式控制设置我们可以使用font-size+具体数字+单位,即可实现对象内文字大小控制。一般字体大小为正,除了使用数字加单位设置对象文字文字大小实现,也可以以百分比进行文字大小设置如(100%)实现文本字体大小,大家可以试试。

CSS word-spacing 属性设置字符间距

CSS text-transform 属性定义及用法

CSS text-indent 属性定义及用法

CSS text-decoration 属性定义及用法

CSS text-align 属性定义及用法