CSS手册CSS3手册Edu网闻
欢迎来到thinkcss查找CSS资料与学习DIV CSS布局技术!
您的位置:ThinkCSS首页 > DIV+CSS基础 >

CSS属性目录

CSS font-size【CSS 字体大小】 font-size文字大小尺寸

CSS font-size字体大小 font-size文字大小字体尺寸属性教程篇

网页DIV CSS布局对网页中文字尺寸大小设置使用font-size属性,即可对网页中文字设置想要的文字字体大小。要设置字体大小使用font-size属性实现。下面ThinkCSS为大家介绍font-size基本语法与基本用法(扩展学习CSS字体)。

一、font-size语法   -   TOP

font-size:值
font-size属性+冒号+要设置大小数字+单位


font-size语法结构解析图

font-size:12px —— 设置字体大小为12px(文字尺寸为12像素)

二、font-size简单用法   -   TOP

div{font-size:14px}
对网页中所有div内文字字体大小设置为14px

P{font-size:16px}
对网页中所有p内文字字体尺寸大小设置为16px

三、font-size用法实例   -   TOP

这里对两个盒子对象内文字设置不同字体尺寸(font-size字体大小),一个class=abc,一个为class=bbb,观察并掌握font-size用法。

1、HTML+CSS代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>font-size 简单案例 ThinkCSS</title> 
  6. <style> 
  7. .abc{ font-size:22px} 
  8. /* class=abc对应对象内字体尺寸大小设置为22px */ 
  9.  
  10. .bbb{ font-size:16px} 
  11. /* class=bbb对应对象内字体尺寸大小设置为16px */ 
  12. </style> 
  13. </head> 
  14. <body> 
  15. <div class="abc">我的字体大小为22px</div> 
  16. <div class="bbb">我的字体尺寸大小为16px</div> 
  17. </body> 
  18. </html> 

2、font-size实例截图

CSS DIV font-size布局实例截图
CSS font-size布局实例截图

3、DIV CSS font-size在线演示

查看案例

4、font-size案例打包下载

四、font-size总结   -   TOP

对网页中任何地方文字字体大小文字尺寸设置使用font-size实现。在实际使用时候注意设置数值后加长度单位,如果没有加上设置font-size将是无效的,所以检查设置font-size CSS样式后没有变化检查数值单位是否忘记添加了。

扩展了解关于字体尺寸大小:
1、css li字体大小
2、css span字体大小
2、css div字体大小

如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/rumen/r873.shtml

我要分享到:

html基础教程 CSS Based Tutorial

CSS教程文章修订日期:2016-05-22 16:01 原创:ThinkCSS
本文www.thinkcss.com ThinkCSS版权所有。