您的位置:首页 > DIV CSS实例 > 【 返回上一页

CSS设置对象盒子里部分文字大小为16px

div css布局中常常会遇到这样的情况,在一段文字里有的文字大小有区别或大或小。通常解决这样的布局,只需要对需要改变的文字加上一个span标签并给与设置单独的CSS样式即可,如果这个盒子里只使用一次span标签,可以直接对span设置需要的CSS样式,如果这个DIV盒子里有多处需要使用span标签并其样式都不同,这个使用需要对span再加个class样式,分别设置其需要的CSS样式。

下面ThinkCSS通过实例来介绍两种情况下对一段文字里部分文字设置不同字体大小。

一、一段文字中多处设置同一大小字体

1、需求:在一段14px字体大小文字中,多处设置大小为16px字体。

2、解决思维:对这个盒子里需要设置字体为16px文字加span标签,对这个span设置字体大小为16px即可。

3、完整HTML+CSS代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>段落文字中单独文字设置大小 在线案例 ThinkCSS</title> 
  6. <style> 
  7. .thinkcss{ font-size:12px} 
  8. .ThinkCSS span{ font-size:16px} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div class="thinkcss"> 
  13. 你完全可以从零开始学习div css开发<span>技术</span>, 
  14. 我们将不断完善CSS基础理论<span>知识</span>, 
  15. 通过我们最通俗的总结和介绍讲解的方式让大家懂得CSS是什么 
  16. </div> 
  17. </body> 
  18. </html> 

4、实例截图

css单独设置字体大小为16px
单独设置字体大小为16px

以上文字对“技术”和“知识”设置字体大小为16px。

ThinkCSS解释说明:如果一个对象里需要改变的文字大小都相同,那么都使用span标签是可以的,无需再为span标签进行设置class样式选择器,从而节约代码占用字节空间。

案例就不再在线演示,大家可以直接复制以上实例代码即可实践观察效果。

二、一段文字中其中几处设置不同大小字体

1、思维与描述:在一段文字中,有几处文字的大小不同,这个时候也可以使用span标签,但因为多处字体大小不同,因此我们不能只对span标签设置一个字体大小,而是对span加不同class,设置不同字体大小样式。

2、完整案例HTML源代码+CSS代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>多处不同大小字体 在线案例 thinkcss</title> 
  6. <style> 
  7. .thinkcss{ font-size:12px} 
  8. .thinkcss .a{ font-size:16px} 
  9. .thinkcss .b{ font-size:20px} 
  10. .thinkcss .c{ font-size:24px} 
  11. </style> 
  12. </head> 
  13. <body> 
  14. <div class="thinkcss"> 
  15. 你完全可以从零开始学习div css开发<span class="a">技术</span>, 
  16. 我们将不断完善CSS基础理论<span class="b">知识</span>, 
  17. 通过我们最通俗的<span class="c">总结</span>和介绍讲解的方式让大家懂得CSS是什么 
  18. </div> 
  19. </body> 
  20. </html> 

3、案例效果截图

CSS设置不同大小字体效果截图
CSS设置不同大小字体效果截图

4、说明
以上是对一段文字中部分文字设置不同的字体大小,可以使用span标签给予不同CSS样式(通过不同class)。

5、css案例查看和打包下载说明:这里就不提供打包文件下载,大家可直接复制以上HTML源代码实践后在浏览器中即可实践查看效果。

相关标签: 字体大小 字体
如需转载,请注明文章出处和来源网址:www.thinkcss.com/shili/665.shtml

日期:2014-03-18 09:47:52 来源:www.thinkcss.com 作者:ThinkCSS

热门点击