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

div css li字体大小样式设置 ul li文字大小设置

DIV css li字体大小样式设置图文教程篇

在ul li布局中,常常会单独改变ul li布局内内容字体大小,怎样设置li CSS字体大小样式的呢?

需要用到CSS样式单词:
设置ul li内文字大小需要用到font-size字体大小样式单词。

接下来thinkCSS介绍两种情况下ul li字体大小设置,即全网页ul li字体大小统一设置,单独ul li字体大小设置(区别去全网页其它地方统一li字体大小)。

一、全网页ul li字体大小设置   -   TOP

对整个网页中ul li字体大小统一设置,只需要在CSS中ul li{设置字体大小}即可轻松实现自己想要li文字大小CSS样式。

1、HTML+CSS代码如下:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>简单ul li字体大小设置</title> 
  6. <style> 
  7. ul li{font-size:18px}/* 对这个网页中出现ul li标签内文字字体大小设置18px */ 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <p>ThinkCSS li字体大小设置实例篇</p> 
  12. <ul> 
  13. <li>我的字体大小为18px</li> 
  14. <li>我的字体大小为18px</li> 
  15. </ul> 
  16. <ul> 
  17. <li>我的字体大小也为18px</li> 
  18. <li>我的字体大小也为18px</li> 
  19. </ul> 
  20. </body> 
  21. </html> 

2、实例截图


对HTML内ul li标签内文字字体大小统一设置18px实例截图

二、网页中单独设置li字体文字大小   -   TOP

很多时候在一张网页DIV CSS布局中,多处使用ul li布局,但难免会遇到一处或几处与统一li字体大小不同,这个时候就需要对不同ul li设置对应字体大小。

1、不同ul li内容关键点:
怎么对不同地方li设置不同字体大小呢?

方法一:对ul上一级(父级)表达式设置

  1. .abc ul li{font-size:20px} 

对ul上一级class=abc内,实现对应ul li标签内的文字内容设置字体大小为20px

方法二:直接对ul设置class设置字体大小

  1. ul.bbb li{font-size:26px} 

对ul直接加class=”bbb”,实现对应li内文字字体大小设置为26px

2、在一组UL LI布局中其中一个li内字体大小与其它LI字体大小不同
只需要对那个不同li设置一个class来设置对应不同CSS即可

  1. ul.cc li{font-size:14px} 
  2. ul.cc li.dd{font-size:18px} 

对ul class=cc内li标签内文字字体设置14px,其中ul clas=cc内li class=dd设置字体大小为18px 

三、完整ul li字体大小CSS样式设置实例   -   TOP

这里首先对网页中li内字体设置统一字体大小为18px,再分别对两处li内字体大小设置分别为22px和26px。

为了便于实践观察,ThinkCSS将css代码使用stlye标签直接放在html中。

1、HTML代码(body内主要代码)

  1. <p>ThinkCSS li字体大小设置实例篇</p> 
  2. <ul> 
  3. <li>字体大小为14px</li> 
  4. <li>字体大小为14px</li> 
  5. </ul> 
  6. <p>对ul不同上一级内li设置不同字体大小</p> 
  7. <div class="abc"> 
  8. <ul> 
  9. <li>字体大小为20px</li> 
  10. <li>字体大小为20px</li> 
  11. </ul> 
  12. </div> 
  13. <p>对ul设置class对应实现li不同字体大小</p> 
  14. <ul class="bbb"> 
  15. <li>字体大小为24px</li> 
  16. <li>字体大小为24px</li> 
  17. </ul> 
  18. <p>对一组ul列表内其中一个li设置不同字体大小</p> 
  19. <ul class="cc"> 
  20. <li>字体大小为22px</li> 
  21. <li class="dd">字体大小为28px</li> 
  22. <li>字体大小为22px</li> 
  23. </ul> 

2、CSS代码

  1. body{ font-size:12px}/*设置默认网页字体大小为12px*/ 
  2. ul li{font-size:14px}/* 对这个网页中出现ul li标签内文字字体大小设置16px */ 
  3. .abc ul li{ font-size:20px}/* 对class=abc盒子内ul li内文字大小设置20px */ 
  4. ul.bbb li{ font-size:24px}/* 对ul class=bbb盒子li标签内文字字体大小设置24px */ 
  5. ul.cc li{font-size:22px}/* 对ul class=cc盒子li标签内文字字体大小设置22px */ 
  6. ul.cc li.dd{font-size:28px}/* 对li class=dd 盒子内文字大小单独设置28px */ 

3、完整HTML+CSS li字体大小实例代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>li字体大小设置实例篇 ThinkCSS</title> 
  6. <style> 
  7. body{ font-size:12px}/*设置默认网页字体大小为12px*/ 
  8. ul li{font-size:14px}/* 对这个网页中出现ul li标签内文字字体大小设置16px */ 
  9. .abc ul li{ font-size:20px}/* 对class=abc盒子内ul li内文字大小设置20px */ 
  10. ul.bbb li{ font-size:24px}/* 对ul class=bbb盒子li标签内文字字体大小设置24px */ 
  11. ul.cc li{font-size:22px}/* 对ul class=cc盒子li标签内文字字体大小设置22px */ 
  12. ul.cc li.dd{font-size:28px}/* 对li class=dd 盒子内文字大小单独设置28px */ 
  13. </style> 
  14. </head> 
  15. <body> 
  16. <p>ThinkCSS li字体大小设置实例篇</p> 
  17. <ul> 
  18. <li>字体大小为14px</li> 
  19. <li>字体大小为14px</li> 
  20. </ul> 
  21. <p>对ul不同上一级内li设置不同字体大小</p> 
  22. <div class="abc"> 
  23. <ul> 
  24. <li>字体大小为20px</li> 
  25. <li>字体大小为20px</li> 
  26. </ul> 
  27. </div> 
  28. <p>对ul设置class对应实现li不同字体大小</p> 
  29. <ul class="bbb"> 
  30. <li>字体大小为24px</li> 
  31. <li>字体大小为24px</li> 
  32. </ul> 
  33. <p>对一组ul列表内其中一个li设置不同字体大小</p> 
  34. <ul class="cc"> 
  35. <li>字体大小为22px</li> 
  36. <li class="dd">字体大小为28px</li> 
  37. <li>字体大小为22px</li> 
  38. </ul> 
  39. </body> 
  40. </html> 


4、LI字体大小设置实例效果截图


HTML与CSS li设置字体代码截图


Li字体大小设置实例在浏览器中效果截图

5、在线演示与打包下载

查看案例

li字体大小实例源代码文件打包下载

四、总结
一般很少直接对li设置class来设置CSS样式(包括字体大小),一般通过ul li指向或赋予不同上一级来设置字体大小样式或者对ul加不同类表达式设置。要是在一个列表布局ul li内的其中一个li字体大小不同,我们再对这个li单独加一个class设置不同字体大小样式。

如:

  1. .ab ul li{font-size:12px} 

对应html

  1. <div class=”ab”> 
  2. <ul> 
  3. <li>我字体大小为12px</li> 
  4. <li>我字体大小为12px</li> 
  5. <li>我字体大小为12px</li> 
  6. </ul> 
  7. </div> 

或者

  1. ul.ed li{font-size:14px} 

对应html

  1. <ul class=”ed”> 
  2. <li>我字体大小为14px</li> 
  3. <li>我字体大小为14px</li> 
  4. <li>我字体大小为14px</li> 
  5. </ul> 

在ul li内其中一个li字体大小不同

  1. ul.xy li{font-size:14px} 
  2. ul.xy li.bb{font-size:18px} 

对应html

  1. <ul class=”xy”> 
  2. <li>我字体大小为14px</li> 
  3. <li>我字体大小为14px</li> 
  4. <li class=”bb”>我字体大小为18px</li> 
  5. </ul> 

通过对li字体大小设置可以扩展到对li字体字体颜色字体加粗等样式设置,根据自己需求设置li css样式。

关于字体大小设置扩展:
1、span字体大小设置
2、p字体大小设置
3、DIV中字体大小

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

CSS基础教程 CSS Based Tutorial

HTML基础教程 HTML Based Tutorial

CSS教程文章修订日期:2016-05-19 22:16 www.thinkcss.com div css。