[翻译]标记语言和样式手册 Chapter 13 为文字指定样式（3）

首字大写

首字大写在印刷界十分常见,这能为段落加上华丽而优雅的效果,而且不必用上图片就能办到这种效果,只用CSS就够了.

首先,必须为标记源代码加上一个"样式锚点"让我们有办法调用第一段的第一个字母.我们将 "I" 用一组<span>标签包起来并给它指定class=drop,如果我们才能在页面或整个网站里重复使用首字大写效果.

<p><span class="drop">I</span>f you're painting with latex paints, and the job ...

在某些完全支持CSS2规范的现代浏览器中,我们可以用:first-letter伪类设定段落首字效果,而不必加上额外的<span>标签,虽然语义上非常棒,不幸的是许多浏览器都不支持这个效果.

现在我们能完全控制第一段的 "I" 字母了,让我们加上CSS声明,以便把字体放大,同时将它浮动到左侧(这样,其他的文字才不会包围它显示),我们也会加上装饰用的背景,边框.

.drop {
  float: left;
  font-size: 400％;
  line-height: 1em;
  margin: 4px 10px 10px 0;
  padding: 4px 10px;
  border: 2px solid #ccc;
  background: #eee;
  }

结合我们现在为示例内容加上的所有样式,图13-6是浏览器显示首字大写的效果,它完全没有用上图片,只靠简单的CSS与标记语法完成.

图13-6 用CSS制作的首字大写效果.