最精简代码CSS 实现WordPress 首字放大,兼容所有浏览器!

最精简代码CSS 实现WordPress 首字放大,兼容所有浏览器!

Jonty
2013-08-18 / 2 评论 / 74 阅读 / 正在检测是否收录...

首字放大效果也可以叫做首字下沉,最早常见于报纸杂志,然后慢慢被人用在了网站上,教程方法其实很早就有人讨论了,添加方法也各式各样,大致分为下面三种:

1.定义好CSS样式标签,然后手动给第一个字添加标签

1a.延伸一点就是给编辑器增加一个快捷标签按钮
优点:此方法是最有效最彻底的,但比较麻烦

2.通过Js 给文章第一个字添加样式标签

优点:现在很流行用js添加,确实js灰常强大,不过因为需要js加载匹配,所以首字放大效果会有延时

3.通过Css 给文章第一个字添加样式标签

优点:代码简洁,实用性强,修改简单,经过修改优化后就是我现在使用的方法

然后我们再来了解下WordPress 文章页面区域的基本架构大致如下:


<div id="context">

我是一篇演示文档的首行开头

我是正文第2段落

我是正文第3段落

我是正文第n段落

</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">
其实你可以把我理解为一个图片或一个广告,O(∩_∩)O~
<div id="henghengzhu">
我是一篇演示文档的首行开头
我是正文第2段落
我是正文第3段落
我是正文第n段落
</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;
}
本文共 616 个字数,平均阅读时长 ≈ 2分钟
0

打赏

海报

正在生成.....

评论 (2)

取消
  1. 头像
    Soar、毅 Lv.3
    中国河北省 ·Windows 8 · Google Chrome
    沙发

    这个效果貌似一个CSS就能搞定吧?不过貌似需要CSS来做。

    回复 删除 垃圾
    1. 头像
      gkroot Lv.6
      中国山西省 ·iPhone · Google Chrome
      @ Soar、毅

      maybe~~

      回复 删除 垃圾