|
原文：http://andymao.com/andy/post/100.html
上一节：美化段落文本 Ⅰ
web标准知识——美化段落文本 Ⅱ
懒，可能是唯一解释为什么这么长时间才写这一篇的主要原因。不述详情，以此责心。
上一篇讲了如何美化段落的基本形式，通过段距、首行缩进、首行突出以及字体、大小、色彩等也作了简要的讲述。由于很多知道在一些已有的资料里已经有了，所以我这里就不多说了，主要还是要讲一些应用的技巧。今天要讲的内容是如何实现“首字下沉”，也就是我博客首页上的效果，第一个字是很大的红色楷体，陷于一段文字之首。这种做法在杂志中常见，但是在网页中不那么常见。那么如何实现呢？其实很简单，只有一句CSS就可以了。下面列出，不喜欢读很多文字的朋友可以就此句细细研究不用向下读了。
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一开始就写成
#article:first-letter {……}
:first-letter 是个伪类，用途是设置对象内的第一个字符的样式表属性。该语法属CSS2范围。详细见《CSS2中文手册》
这里再细说语句中的一个个属性，首先我们要让这个字大于正文中的字，那么给他的字体大小是正文内容的2.5倍。当然你也可以选择3倍，4倍，这个根据自己的需要来作修改。
#article:first-letter { font-size:2.5em }
为什么要用em这个标签呢？因为有时候我们的读者们会需要通过浏览器缩放的功能改变文字的大小，如果设为一个具体的大小，那么自然就会比例失调。这个大家可以动手变动一下看看找找感觉。有了大小了，但是字体不对，那么这里应增加字体与字体加粗
#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; }
看过上一篇的朋友一定知道这样的写法是比较冗长的，有比较简单的简写方式。那么如何简写请根据上篇提示动手修改一下。我们发现这里还有一个line-heihgt:1.2em; 为什么要用这个？这是因为我们通常会给这段文字设置一个行高，而这个行高通常是超过1.5em的，那就是说这样的行高会使得首字离正文内容有点远，并且不好看，那么自然要给这个首字一点特别的对待，当然是1em还是1.1em都要根据自己的实际需要来修改调整。这里的数字不是一定的。
好了，到现在为此这个首字似乎还并没有打算下沉的意思，那么这里的关键点就是 float:left; 对的，就是左浮动。我们要知道，当一个对象被设为浮动属性之后，不论原来是否是块级元素都会具备块级元素的特性。而周围没有被设定的文本流侧会环绕着这个对象。图片在文本中的环绕也是这个属性。
#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; }
动手试试看，是不是已经看到首字下沉了？当然或许你看出来了，有点不那么整齐上面是不是多了一点出来？不用担心，用padding来设置一下让这个字顶部多点空间出来，让这个首字和第一行齐平。
最后我还能说点什么？我想到了，有一次我试图让<div id="acticle"><p>……</p></div>中的P也能实现首字下沉，可是结果却失败了，得出的结论是：我们并不能隔着一层标签去控制子对象中的第一个字符。
当然如果你对这个伪类产生兴趣的话那么也推荐你接着研究一下：
Selector : first-line { sRules }
Selector1 Selector2 : first-child { sRules }
下一节：无序列表
本文链接：http://www.blueidea.com/tech/web/2008/5976.asp 
出处：蓝色理想
责任编辑：moby
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
