导航

毅博客

分享本身就是件快乐的事,我因别人得到帮助而感到幸福

« 南京UCD书友会延期通知从浏览器想开去 »

美化段落文本 2

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
请大家帮忙:行文措辞难免有错,请大家在阅读时发现错误通过评论方式告诉我。谢谢大家

懒,可能是唯一解释为什么这么长时间才写这一篇的主要原因。不述详情,以此责心。

上一篇讲了如何美化段落的基本形式,通过段距、首行缩进、首行突出以及字体、大小、色彩等也作了简要的讲述。由于很多知道在一些已有的资料里已经有了,所以我这里就不多说了,主要还是要讲一些应用的技巧。今天要讲的内容是如何实现“首字下沉”,也就是我博客首页上的效果,第一个字是很大的红色楷体,陷于一段文字之首。这种做法在杂志中常见,但是在网页中不那么常见。那么如何实现呢?其实很简单,只有一句CSS就可以了。下面列出,不喜欢读很多文字的朋友可以就此句细细研究不用向下读了。

  1.  Selector:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;}

 如果你觉得还不是很清楚,那么这里就细细讲述一下:

首先要在HTML中有一段自己的文本,是在<p></p>中的也好,在其它块标签中都可以。给他个ID也好,class也好,直接的标签也可以,先找到这个选择符,这里假设一段文字的id为article,那么给这段的CSS一开始就写成

  1. #article:first-letter {……}

:first-letter 是个伪类,用途是设置对象内的第一个字符的样式表属性。该语法属CSS2范围。详细见《CSS2中文手册》

这里再细说语句中的一个个属性,首先我们要让这个字大于正文中的字,那么给他的字体大小是正文内容的2.5倍。当然你也可以选择3倍,4倍,这个根据自己的需要来作修改。

  1. #article:first-letter { font-size:2.5em }

为什么要用em这个单位呢?因为有时候我们的读者们会需要通过浏览器缩放的功能改变文字的大小,如果设为一个具体的大小,那么自然就会比例失调。这个大家可以动手变动一下看看找找感觉。有了大小了,但是字体不对,那么这里应增加字体与字体加粗

  1. #article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold;  }

看过上一篇的朋友一定知道这样的写法是比较冗长的,有比较简单的简写方式。那么如何简写请根据上篇提示动手修改一下。我们发现这里还有一个line-heihgt:1.2em; 为什么要用这个?这是因为我们通常会给这段文字设置一个行高,而这个行高通常是超过1.5em的,那就是说这样的行高会使得首字离正文内容有点远,并且不好看,那么自然要给这个首字一点特别的对待,当然是1em还是1.1em都要根据自己的实际需要来修改调整。这里的数字不是一定的。

好了,到现在为此这个首字似乎还并没有打算下沉的意思,那么这里的关键点就是 float:left; 对的,就是左浮动。我们要知道,当一个对象被设为浮动属性之后,不论原来是否是块级元素都会具备块级元素的特性。而周围没有被设定的文本流侧会环绕着这个对象。图片在文本中的环绕也是这个属性。

  1. #article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left;  }

动手试试看,是不是已经看到首字下沉了?当然或许你看出来了,有点不那么整齐上面是不是多了一点出来?不用担心,用padding来设置一下让这个字顶部多点空间出来,让这个首字和第一行齐平。

当然如果你对这个伪类产生兴趣的话那么也推荐你接着研究一下:

Selector : first-line { sRules } 

Selector1 Selector2 : first-child { sRules }

作者 / 振之
网站 / 毅博客 http://andy.andymao.com/
电话 / (86)025 5890 9295
  • quote 1.koma
  • http://koma-yt.cn
  • 记得之前你的blog文章用的都是这样的首字下沉,与整体风格的搭配非常好
    由 振之 于 2008-7-23 6:27:32 最后编辑
  • 2008-7-22 8:50:52 回复该留言
  • quote 2.roc
  • http://www.liquidroc
  • "有一次我试图让<div id="acticle"><p>……</p></div>中的P也能实现首字下沉,可是结果却失败了,得出的结论是:我们并不能隔着一层标签去控制子对象中的第一个字符。"


    由 振之 于 2008-7-23 6:27:15 最后编辑
  • 2008-7-22 14:08:43 回复该留言
  • quote 3.振之
  • http://andymao.com/
  • 这句话容易误导,已经删除。

    不过我不知道你如何写这段代码,如果你写出来了不妨给我看看。我的博客内页的代码与首页的代码的唯一区别就是首页没有<p></p>标签,而内页有,但是内页却显示不了首行缩进。当然,如果你写成:#acticle p:first-letter {……}那自然是可以实现。而我要说的是 #acticle:first-letter {……}并不会使P标签中的第一个字符得到预设的样式
    roc 于 2008-7-22 22:14:45 回复
    嗯,的确是误导了,振之你所说的情况,换个说法是不是指:first-letter并不会向下继承~
  • 2008-7-22 18:17:31 回复该留言
  • quote 5.振之
  • http://andymao.com/
  • To:roc
    的确如此,是无法向下继承。并且我要知道首字下沉并不适合每一段都有,通常只在通篇的第一段有一个首字下沉以引全文,多了也就没什么意义了
  • 2008-7-23 6:30:47 回复该留言
  • quote 6.roc
  • http://www.liquidroc.name
  • 嗯,的确,有些属性并不适合向下继承,例如border。但类似于:first-child、:first-line、:first-letter这些伪类似乎并不属于属性的范畴,只不过与:link这些适合向下“继承”的伪类不同,
  • 2008-7-23 8:52:20 回复该留言
  • quote 7.maryann
  • http://www.raymeo.com
  • 首字下沈了。!較果也同時美化了整編文章!這語法還可通過字苻和屬性去達到各方面配合。最近亦閞始見這功能多人引用了,我亦是其中之一。多謝振之發報這編技術文章。
  • 2008-7-25 8:31:21 回复该留言
  • quote 14.雨伞
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    有这个的时候,ie6没效果 ,怎么回事
  • 2008-8-25 11:47:41 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog .Theme from Google黑板报 By Washun

Copyright 2005-2007 Jonmax.com. All Rights Reserved.

Search

最新评论及回复

最近发表

资助者链接

  • 欢迎资助毅博客
    请直接发邮件给我,不要加我QQ
    maozhenzhi@gmail.com
    maozhenzhi@163.com