16.8.3　设置行距

输入多行文字设置其行距。再新建一个层，然后输入文字，再用CSS控制其行距。这时为了区别行距，设置为30像素。完整语法如代码16.9所示。

代码16.9　源代码\第16章\字体实例手把手—字体花样.html

———————————-文件名：字体实例手把手—字体花样.html———————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞字体实例手把手—字体花样＜/title＞

04 ＜styletype="text/css"＞

05 #font1

06 {

07 /设置字体类型为宋体/

08 font-family："宋体"；

09 }

10 #font2

11 {

12 /设置字体类型为黑体/

13 font-family："黑体"；

14 }

15 #font3

16 {

17 /设置字体类型为隶书/

18 font-family："隶书"；

19 }

20 #font4

21 {

22 /设置字体为粗体/

23 font-weight：bolder；

24 }

25 #font5

26 {

27 width：150px；

28 border：1pxsolid#000000；

29 line-height：30px；

30 }

31 ＜/style＞

32 ＜/head＞

33 ＜body＞

34 ＜divid="font1"＞

35 宋体

36 ＜/div＞

37 ＜divid="font2"＞

38 黑体

39 ＜/div＞

40 ＜divid="font3"＞

41 隶书

42 ＜/div＞

43 ＜divid="font4"＞

44 粗体

45 ＜/div＞

46 ＜divid="font5"＞

47 HTML+CSS完全自学手册HTML+CSS完全自学手册HTML+CSS完全自学手册

48 HTML+CSS完全自学手册HTML+CSS完全自学手册

49 ＜/div＞

50 ＜/body＞

51 ＜/html＞

【代码解析】在第2步的基础上加入文本和代码，代码第25～30行设置了对象的行距。在多行中，行与行之间的距离设置为30像素，且对象层中有边框显示，效果如图16.10所示。