首字母下沉

要创建首字母下沉（你知道的，就是段落开头那个大字母），你只需要增大段落第一个字母的大小并将其向左浮动即可。很简单。

步骤 1：HTML

我们可以从以下 HTML 开始


<p>Once upon a time in a blueberry bubblegum land...[Big load of text]...a lost sunfish from the Sweet Spaghetti River.</p>

一个简单、朴实的段落。

步骤 2：制作首字母下沉

接下来，我们可以应用以下 CSS


body {
    font: 15px/1.5 arial, helvetica, sans-serif;
}

p:first-letter {
    float: left;
    font-size: 45px;
    line-height: 1;
    font-weight: bold;
    margin-right: 9px;
}

我们还可以稍微增强一下花哨程度…


p:first-letter {
    float: left;
    font-size: 45px;
    line-height: 1;
    font-weight: bold;
    margin-right: 9px;
    color: #9c0;
    font-family: "Times New Roman", Times, serif;
    text-shadow: #690 .05em .05em;
}

或者，如果我们感觉有点疯狂，我们可以用图片替换文本内容


p:first-letter {
    float: left;
    font-size: .1px;
    padding: 50px 0 0 40px;
    background: url(/examples/images/o.gif);
    margin-right: 9px;
}

仅针对第一个段落

到目前为止，我们一直保持非常简单。然而，如果你要使用首字母下沉，你很可能会想只针对第一个段落的第一个字母。目前，上面的示例将针对每个段落。

你可以通过为选定的 p 元素应用 class 或 id 来实现这一点，但更酷的方法是使用 :first-of-type 伪类。这可以用来定位段落的第一个实例，然后是该段落的第一个字母。


body {
    font: 15px/1.5 arial, helvetica, sans-serif;
}

p:first-of-type:first-letter {
    float: left;
    font-size: 45px;
    line-height: 1;
    font-weight: bold;
    margin-right: 9px;
}