通常在报刊和杂志上,我们都会看到段首字符下沉效果,这在信息类网页中也会经常用到,而文本缩进则是段落排版不可或缺的样式。首字符下沉和文本缩进效果如图所示。

首字符下沉和文本缩进效果

先来看一下HTML:

<body>
  <p id="a">
    段落首字符下沉和15像素的缩进
  </p>
  <p id='b'>
    if -首字符不下沉、首字符英文小写和悬挂缩进(-6像素)
  </p>
  <p class="uppercase" id='c'>
    if 段落的首字符不下沉、首字母英文大写
  </p>
</body>

首字符下沉效果用CSS 2中的:first-letter伪类实现:

01 #a{
02     text-indent:15px;             /*使用像素作为单位*/
03 }                              
04 #b{                            
05     text-indent:-6px;             
06 }                              
07 #c{                            
08     text-indent:0.5em;             /*使用em作为单位*/
09 }                              
10 #a:first-letter{               
11     font-size:25px;               
12     color:#B23AEE;                
13     float:left;                   /*要下沉必须浮动*/
14 }
15 #b:first-letter{
16     font-size:30px;
17     color:red;
18 }
19 #c:first-letter{
20     font-size:25px;
21     color:#B23AEE;
22 }
23 p.uppercase:first-letter
24 {
25     text-transform:uppercase;     /*大写的关键字*/
26 }

第2行、第5行和第8行是对不同文字设置不同的缩进,由图中3段文字的缩进情况可以对比结果。

利用first-letter匹配的每段的第一个字母,段落之间不同之处只有第13行的浮动,一旦首字母浮动在左边,就会自己得到浮动的效果,图中第一段文字显示首字母在整排文字的下方线上。

第25行利用大写关键字可以设置字母的大写显示,可以将HTML文档中的小写英文字母在不改动的情况下变为大写字母,对中文无效。