了解如何使用CSS创建​段落的首字母大写别致。甚至还有一种简单的图像替换技术，可以将图形图像用于初始cap。

首字母大写的基本样式

文档中的首字母大写有三种基本样式：

• 凸起-最常见，第一个字母较大，与当前文本在同一行。
• 下降-也很常见，第一个字母较大，下降到文本第一行以下。然后，以下文本将在其周围浮动。
• 相邻-第一个字母位于文本其余部分旁边的一列中。这在印刷品中比网页设计更常见。

首字母大写或首字母大写非常常见。它们是一种很好的方式来修饰冗长乏味的文本。使用CSS属性：第一个字母，您可以轻松定义如何使第一个字母更漂亮。

创建一个简单的初始封口

要创建一个简单的提高首字母上限，只需使用第一个字母伪元素使段落的第一个字母变大：

p:first-letter { font-size: 3em; }

但是许多浏览器看到第一个字母比一行中的其他文字都大，所以他们使前导等于第一个字母的意义，而不是一行中的其他文字。幸运的是，第一行伪元素和line height属性很容易解决这一问题：

p:first-letter { font-size: 3em; }p:first-line { line-height: 1em; }

在文档中调整行高，直到找到适合文本的大小。

玩你最初的帽子

一旦你了解了如何创建一个初始的帽子，你可以穿上花哨的衣服，使它脱颖而出。玩颜色、背景色、边框或任何你喜欢的东西。一种相当简单的样式是，仅为第一个字母反转字体和背景色的颜色：

p:first-letter {font-size : 300%;background-color: #000;color: #fff;}p:first-line { line-height: 100%; }

另一个技巧是将第一条线居中。使用CSS时，这可能会很棘手，因为如果布局灵活，文本行的中间可能会有所不同。但是，如果有人玩弄这些值，你可以缩进第一行，使第一个字母出现在中间。只需调整段落文本缩进的百分比，直到它看起来正确：

p:first-letter {font-size : 300%;background-color: #000;color: #fff;}p:first-line { line-height: 100%; }p { text-indent: 45%; }

使用css时，相邻的初始大写字母是硬的

使用CSS时，相邻的初始大写字母可能比较困难，因为不同的浏览器显示的字体不同。在CSS中创建相邻封口的想法是使用第一行的文本缩进属性将其推出（左侧）负值。您还需要将该段落的左边距更改一定量。玩这些数字，直到段落看起来不错。

p {text-indent: -2.5em;margin-left: 3em;}p:first-letter { font-size: 3em; }p:first-line { line-height: 100%; }

得到非常漂亮的首字母大写

创建花式初始封口的最佳方法是将字体更改为更具装饰性的字体族。如果您使用一系列字体，然后使用通用字体，这将有助于确保您的初始cap显示良好，以便您的客户可以看到它，而不会涉及可访问性和可用性问题。

p:first-letter {font-size: 3em;font-family: "Edwardian Script ITC", "Brush Script MT", cursive;}p:first-line { line-height: 100%; }

而且，像往常一样，你可以把所有这些建议放在一起，创建一个适合你的段落风格的初始上限。

使用图形化初始cap

如果，在所有这些之后，你仍然不喜欢你最初的大写字母在页面上的样子，你可以借助图形来获得你想要的确切效果。但在决定直接使用图形之前，您应该了解此方法的缺点：

• 没有图像的客户将看不到初始cap，也可能看不到图像替换的隐藏文本。这可能会使段落无法访问，或者至多难以阅读。
• 图像总是会增加页面的下载时间。如果你有很多初始上限，你可以大大增加下载时间，因为很多人会觉得这是微不足道的。
• 有些浏览器会同时显示隐藏的第一个字母和图像，这会使段落文本看起来很奇怪。
• 自动执行此选项非常困难，因为您必须准确地知道第一个字母是什么，以便使用正确的图形。因此，每次编辑段落时，您可能需要创建一个新的图形。

首先，您需要创建第一个字母的图形。我们用Photoshop制作了字母L，字体为“爱德华式文字ITC”。我们制作了一个巨大的字母，大小为300磅。然后我们将图像裁剪到字母周围的最小值，并记录图像的宽度和高度。

然后我们为我们的段落创建了一个类“capL”。这是我们定义要使用的图像、前导（线高度）等的地方。

您需要使用图像宽度和高度来设置段落的文本缩进和填充顶部。对于我们的L图像，我们需要95像素的缩进和72像素的填充。

p.capL {line-height: 1em;background-image: url(capL.gif);background-repeat: no-repeat;text-indent: 95px;padding-top: 72px;}

但这还不是全部。如果你把它留在那里，那么第一个字母将在段落中重复，首先是图形，然后是文本。因此，我们在第一个元素周围添加了一个跨度，并使用“initial”类告诉浏览器不要显示该字母：

span.initial { display: none; }

然后，图形将正确显示。您可以在段落上使用文本缩进，使文本紧贴字母，但您希望它显示出来。