$字间距:
利用字间距属性word-spacing,可以调整单词间的距离。
$ 字母间距:
利用字母间距属性letter-spacing,可以调整单词中每个字母间的距离。
$ 行距:
行与行之间的距离最常用的称呼是行距,而当网页设计者们发现他们能够控制行距时最常用的称呼是"Weee!"
与字距不同的是行距line-height,它调整的是行与行间垂直方向的距离,有三种方法设置:
- 数值:A{font-size:12pt; line-height:2};/*此处line-height=2x12pt=24pt */
- 长度单位:A {font-size:12pt; line-height:24pt};
- 比例:A{font-size:12pt; line-height:200%};
无论是字距或字母间距或行距都有一个共同的参数:normal,一旦设为normal就是要浏览器使用默认值。
Netscape Communitor和Internet Explorer在行之前加入行高参数。所以如果你将参数设为10px,浏览器将把文字的第1行以10px的高度显示。
一、用数字设行距
B { font-size: 12pt;
line-height: 2 }
当你用数字设定行高的时候,浏览器将利用字号来确定行距:它将字号乘以设定的参数值。所以,在本例中,行高将是24点。显示效果如下:
Four score and seven years ago,
the Web wasn't yet a glimmer in
anyone's eye. No one needed it,
no one missed it. Eighty-seven
years from now, what will
people laugh at us for lacking?
你还可以用小数设定参数值。
二、用长度单位设定行距
A { font-size: 12pt; line-height: 11pt }
设定行高的另一种方法就是利用先前学过的长度单位(em及pt是最常用的单位),以下为显示效果:
Four score and seven years ago,
the Web wasn't yet a glimmer in
anyone's eye. No one needed
it, no one missed it.
Eighty-seven years from now,
what will people laugh at us
for lacking?
你既可以轻松地将行距缩小也可以将行距放大。有了样式表,这一切都易如反掌!
三、用比例设定行距
A{ font-size: 10pt; line-height: 140% }
在本例中,行距是长度10points的140%,即14points。明白了吗?
让文字互相重叠!
你可能会问这样的问题:如果行距太小的话,文字岂不就重叠在一起了吗?是这样的。我们来看看这个例子:
A { font-size: 28pt; line-height: 2pt }
以下为显示效果:
Whoa.
Cool.
"Whoa" 使用了浏览器的缺省行高设置。但"Cool"的行高很小所以它和第1行重叠了。
(Communicator和Internet Explorer对行高的诠释有所不同。 Communicator将只是将文字的上半部分重叠一点,而IE则将其全部重叠。)
阅读(3512) | 评论(0) | 转发(0) |