首字放大效果也可以叫做首字下沉,最早常见于报纸杂志,然后慢慢被人用在了网站上,教程方法其实很早就有人讨论了,添加方法也各式各样,大致分为下面三种:
1.定义好CSS样式标签,然后手动给第一个字添加标签
1a.延伸一点就是给编辑器增加一个快捷标签按钮
优点:此方法是最有效最彻底的,但比较麻烦
2.通过Js 给文章第一个字添加样式标签
优点:现在很流行用js添加,确实js灰常强大,不过因为需要js加载匹配,所以首字放大效果会有延时
3.通过Css 给文章第一个字添加样式标签
优点:代码简洁,实用性强,修改简单,经过修改优化后就是我现在使用的方法
然后我们再来了解下WordPress 文章页面区域的基本架构大致如下:
<div id="context">
<p>我是一篇演示文档的首行开头</p>
<p>我是正文第2段落</p>
<p>我是正文第3段落</p>
<p>我是正文第n段落</p>
</div>
除手动添加样式标签外,通过JS和CSS 添加方法都是给?div标签?"context"里面的第一个“P”标签赋值,我现在使用的代码如下,你添加到自己的主题CSS里面即可(但需要留意下上面的标签是否一样,个别另类的主题可能会有不同)
.context > p:first-child:first-letter {
color: #8844BB;
float: left;
font-size: 2.1em;
font-weight: bold;
line-height: 1em;
margin: -6px?3px;
position: relative;
}
注:我不喜欢首字下沉占多行的效果,如果你需要那个效果,可以修改margin的值(例如改为:margin: 3px;)
进阶篇:
如果你文章头部加了图片或者横幅广告的话,你会发现首字放大效果失效了,为什么呢?其实你自己分析上面的代码会发现,它是给"context"里面的第一个“P”标签赋值,从而让第一个给第一个字符增加样式,而启用了文章头部加了图片或者横幅广告的话,第一个字符就变成了“<”,自然无法看到想要的效果。添加方法也很简单,我们增加一个div单独包裹着文章内容即可,例如下面的例子:
<div id="context">
<p>其实你可以把我理解为一个图片或一个广告,O(∩_∩)O~</p>
<div id="henghengzhu">
<p>我是一篇演示文档的首行开头</p>
<p>我是正文第2段落</p>
<p>我是正文第3段落</p>
<p>我是正文第n段落</p>
</div>
</div>
此时对应css代码则改为:
.henghengzhu > p:first-child:first-letter {
color: #8844BB;
float: left;
font-size: 2.1em;
font-weight: bold;
line-height: 1em;
margin: -6px?3px;
position: relative;
}