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

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

1.定义好CSS样式标签,然后手动给第一个字添加标签
1a.延伸一点就是给编辑器增加一个快捷标签按钮
优点:此方法是最有效最彻底的,但比较麻烦

2.通过Js 给文章第一个字添加样式标签
优点:现在很流行用js添加,确实js灰常强大,不过因为需要js加载匹配,所以首字放大效果会有延时

3.通过Css 给文章第一个字添加样式标签
优点:代码简洁,实用性强,修改简单,经过修改优化后就是我现在使用的方法

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

  1. <div id="context">
  2.  
  3. 我是一篇演示文档的首行开头
  4.  
  5. 我是正文第2段落
  6.  
  7. 我是正文第3段落
  8.  
  9. 我是正文第n段落
  10.  
  11. </div>

除手动添加样式标签外,通过JS和CSS 添加方法都是给?div标签?"context"里面的第一个“P”标签赋值,我现在使用的代码如下,你添加到自己的主题CSS里面即可(但需要留意下上面的标签是否一样,个别另类的主题可能会有不同)

  1. .context &gt; p:first-child:first-letter {
  2. color: #8844BB;
  3. float: left;
  4. font-size: 2.1em;
  5. font-weight: bold;
  6. line-height: 1em;
  7. margin: -6px?3px;
  8. position: relative;
  9. }

注:我不喜欢首字下沉占多行的效果,如果你需要那个效果,可以修改margin的值(例如改为:margin: 3px;)

进阶篇:
如果你文章头部加了图片或者横幅广告的话,你会发现首字放大效果失效了,为什么呢?其实你自己分析上面的代码会发现,它是给"context"里面的第一个“P”标签赋值,从而让第一个给第一个字符增加样式,而启用了文章头部加了图片或者横幅广告的话,第一个字符就变成了“<”,自然无法看到想要的效果。
添加方法也很简单,我们增加一个div单独包裹着文章内容即可,例如下面的例子:

  1. <div id="context">
  2.  
  3. 其实你可以把我理解为一个图片或一个广告,O(∩_∩)O~
  4. <div id="henghengzhu">
  5.  
  6. 我是一篇演示文档的首行开头
  7.  
  8. 我是正文第2段落
  9.  
  10. 我是正文第3段落
  11.  
  12. 我是正文第n段落
  13.  
  14. </div>
  15. </div>

此时对应css代码则改为:

  1. .henghengzhu &gt; p:first-child:first-letter {
  2. color: #8844BB;
  3. float: left;
  4. font-size: 2.1em;
  5. font-weight: bold;
  6. line-height: 1em;
  7. margin: -6px?3px;
  8. position: relative;
  9. }

2条评论

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

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

    • 最精简代码CSS 实现WordPress 首字放大,兼容所有浏览器!
      avatar
      Lv.6 1楼-1

      maybe~~

    发表评论

  1. 😉
  2. 😐
  3. 😡
  4. 😈
  5. 😯
  6. 😛
  7. 😳
  8. 😮
  9. 😆
  10. 💡
  11. 😀
  12. 👿
  13. 😥
  14. 😎
  15. 😕