html > CSS学习 >

css span字体大小 设置font-size

2016-05-23 10:47:52 span标签设置font-size字体大小，css span字体大小文字尺寸大小设置图文教程篇，几种情况下使用span对其设置字体大小font-size技巧。

css span字体大小文字尺寸大小设置图文教程篇，几种情况下使用span对其设置字体大小font-size技巧，span标签设置font-size字体大小。

DIV CSS SPAN字体大小 css span标签设置css字体大小尺寸设置

除了对li字体大小设置、DIV设置字体大小等标签内文字设置字体大小外，这里为大家介绍css span字体大小设置。

在网页布局中常常对不同地方的span标签设置不同字体大小，比如全篇网页中span字体大小与网页整体字体大小不同（很少出现）；某一个盒子对象内唯一出现一次的span字体大小不同；对一个div内几处使用span内字体大小不同；对加class的span设置字体大小。

一、字体大小尺寸CSS属性单词

但凡是字体大小都是用font-size样式，不论对div还是span设置字体尺寸大小都是用css font-size实现。

小例子：

  1. span{font-size:12px} 

对网页中使用span标签内的文字统一设置字体尺寸大小为12px。

二、span字体大小 span字体尺寸实例

1、对整个网页出现使用span内字体设置统一字体大小

  1. span{ font-size:16px} 

只需要在CSS代码最前加入此代码即可统一设置网页中出现span标签字体大小为16px

2、对span直接加style属性加入字体大CSS小样式

  1. <span style="font-size:20px"> 
  2.     span标签内加style设置font-size字体大小为20px 
  3. </span> 

直接在span标签内使用style属性并设置font-size CSS属性设置字体大小为20px

3、对某个div内多次出现的其中一个span设置不同字体大小
CSS代码：

  1. span.bbb{ font-size:24px} 

HTML代码：

  1. <div class="aa"> 
  2.     我在class=aa内，字体大小设置为14px，<br> 
  3.     <span>我div内的在span内但是字体大小为16px，因为前面对span统一设置字体大小为16px，<br> 
  4. 如果在前面没有对span初始化统一设置16px,为字体大小是14px</span>。<br> 
  5.     <span>为在span内字体大小16px</span><br> 
  6.     <span class="bbb">我在span内但是class=bbb所以字体大小为20px</span> 
  7. </div> 

4、对某个div内唯一出现一次span标签内文字字体大小简便简化设置
CSS代码：

  1. .eee span{ font-size:30px} 

对于这某个盒子对象内，只出现一次span对其设置不同样式，我们可以节约代码不需要再对span加class，只需这样指定表达式（.eee span{}这样只对class=eee的盒子内出现span设置想要CSS样式）。这种非常常见的布局，扩展到其它标签也如此，节约class或id命名。

HTML代码：

  1. <div class="eee"> 
  2. 测试内容<span>我在div class=eee内唯一一次出现span标签内为字体为30px</span>测试内容 
  3. </div> 

5、完整HTML+CSS代码
以下是以上几个小span字体大小实例代码：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>span字体大小实例演示页面 HTML8</title> 
  6. <style> 
  7. body{ font-size:12px} 
  8. /* 便于观察 先将网页字体统一设置为12px */ 
  9.  
  10. span{ font-size:16px} 
  11. /* 统一设置整个网页span标签字体大小为16px */ 
  12.  
  13. .aa{ font-size:14px} 
  14. span.bbb{ font-size:24px} 
  15. /* 指定只有span标签使用class=bbb时 字体大小为24px，非span标签使用class=bbb无效 */ 
  16. .eee span{ font-size:30px} 
  17. </style> 
  18. </head> 
  19. <body> 
  20. <p style="font-size:36px" align="center">span字体大小测试页</p> 
  21. <span>我在span内字体大小为16px</span> 
  22. <p>&nbsp;</p> 
  23. <span style="font-size:20px"> 
  24.     span标签内加style设置font-size字体大小为20px 
  25. </span> 
  26. <p>&nbsp;</p> 
  27. <div class="aa"> 
  28.     我在class=aa内，字体大小设置为14px，<br> 
  29.     <span>我div内的在span内但是字体大小为16px，因为前面对span统一设置字体大小为16px，<br> 
  30.     如果在前面没有对span初始化统一设置16px,为字体大小是14px</span>。<br> 
  31.     <span>为在span内字体大小16px</span><br> 
  32.     <span class="bbb">我在span内但是class=bbb所以字体大小为20px</span> 
  33. </div> 
  34. <p>&nbsp;</p> 
  35. <div class="eee"> 
  36.     测试内容<span>我在div class=eee内唯一一次出现span标签内我字体大小为30px</span>测试内容 
  37. </div> 
  38. </body> 
  39. </html> 

CSS span字体大小实例截图

css span字体大小font-size实例教程效果截图
span font-size字体大小实例截图

6、在线演示

查看案例

7、打包下载

立即下载（1.479KB）

三、span字体大小总结

无论什么时候对span设置字体大小font-size样式，不要被span标签所干扰，该加class或id设置就加即可，遇到一个盒子你只出现一次或只使用一次span的地方设置不同字体尺寸大小，我们只需要使用父级（上一级）css（class或id）命名+空格+span这样选择器表达式设置样式即可。

.xxx span{... ...}设置class=xxx内出现span设置需要CSS样式。如果多次出现但又想某个span与其它span样式字体大小不同，那就对span加class或id设置需要CSS样式即可。根据HTML8实例进行扩展灵活运用即可掌握不同情况下span字体大小设置。

扩展了解其它字体大小设置：
1、li字体大小
2、p字体大小
3、div字体大小设置

相关词： 字体大小 span字体大小
上一篇：font-size CSS 字体大小
下一篇：div并排不换行显示
更新