转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
3.3 行距         ★★★★

3.3 行距

作者:闵涛 文章来源:闵涛的学习笔记 点击数:898 更新时间:2009/4/23 13:47:36

行与行之间的距离最常用的称呼是行距,而当网页设计者们发现他们能够控制行距时最常用的称呼是"Weee!"


行高

行高简直是上帝发给人间的福音。利用行高我们可以随心所欲地控制行与行之间的垂直距离。

    B { line-height: 16pt }


你所用的参数就是相邻两行的基准线(基准线就是英文小写字母如x,a的下阶线,但不包括诸如y,g等字母超过下阶线的部分)之间的垂直距离。注意你所设定的参数将完全代替浏览器的缺省参数。

Netscape Communitor和Internet Explorer在行之前加入行高参数。所以如果你将参数设为10px,浏览器将把文字的第1行以10px的高度显示。

有3种设定行高的方法:

  • 数字
  • 长度单位
  • 比例

用数字设行距

    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?


你还可以用小数设定参数值。


(你应该知道IE 3 不支持数字参数值,在IE 3 中使用数字参数将出现大片文字的互相重叠。)


用长度单位设定行距

    B { 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?


你既可以轻松地将行距缩小也可以将行距放大。有了样式表,这一切都易如反掌!


用比例设定行距

    B { font-size: 10pt; line-height: 140% }


在本例中,行距是长度10points的140%,即14points。明白了吗?


让文字互相重叠!


你可能会问这样的问题:如果行距太小的话,文字岂不就重叠在一起了吗?是这样的。我们来看看这个例子:

    B { font-size: 28pt; line-height: 2pt }


以下为显示效果:

    Whoa.
    Cool.


"Whoa" 使用了浏览器的缺省行高设置。但"Cool"的行高很小所以它和第1行重叠了。 


(Communicator和Internet Explorer对行高的诠释有所不同。 Communicator将只是将文字的上半部分重叠一点,而IE则将其全部重叠。)


如果你计划将你的网页中的某些内容重叠显示,行高设置还不是最佳的选择,因为不同的浏览器对其的支持有差别。在第5天的课程中我们将研究文字及图象布局的最佳方式。



[办公软件]PowerPoint文字间距(段前、段后、行距)的操作  [网页制作]Ultradev实例教程:3.3 应用数据库创建动态网页
[Web开发][XML学习笔记][3.3]通过JAXP使用XSLT  
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台