WordPress 首字下沉的三种实现方法

概述Word的首字下沉效果大家想必都能想象的出来。有三种方式可以在WordPress中实现首字下沉： 插件、CSS3以及手动实现。CSS3是唯一不会添加多余批注的方式，但在某些浏览器上不能成功实现。 如果你想在所有文章里实现首字下沉，插件是最好的方式；如果你只希望给某几篇文章添加首字下沉效果，那么推…

Word的首字下沉效果大家想必都能想象的出来。

有三种方式可以在wordpress中实现首字下沉： 插件、CSS3以及手动实现。

CSS3是唯一不会添加多余批注的方式，但在某些浏览器上不能成功实现。 如果你想在所有文章里实现首字下沉，插件是最好的方式；如果你只希望给某几篇文章添加首字下沉效果，那么推荐使用手动方式。

用插件实现首字下沉

Drop Caps插件会在文章的第一个字前加上<span>标签，然后用户可以按自己的喜好设置下沉文字的样式。

优点：即装即用、适用于任何浏览器、提供若干选项

缺点：添加额外批注、不是任何效果都需要通过插件来实现的（不喜欢插件的人就会这么想）

用CSS3实现首字下沉

你也可以利用CSS3的选择器来实现首字下沉，具体来说就是:first-letter与:first-of-type。 结合这两个选择器，就可以实现文章的首字下沉：

   .post p:first-of-type:first-letter{    Font-size: 48px;   padding: 10px;   float: left;    }

这样你就不必在文章里加入任何额外的批注，CSS3会自动实现所有效果。 而不利的一面则是，这里的首字下沉效果不能显示在IE浏览器上。

优点：没有多余批注、不耗费时间和精力

缺点：不能跨浏览器运行、有时正常实现首字下沉

手动实现首字下沉

如果你只是想偶尔在某篇文章里使用首字下沉，那么手动是最好的选择——否则的话还是插件或者CSS3更具优势。

手动方式就是在HTML编辑器里直接为文章的第一个字前后加上<span>标签。

下面是需要手动添加的CSS代码：

      .post span{       Font-size: 48px;       padding: 10px;       float: left;      }

优点：适用于所有浏览器、可自由决定使哪篇文章显示首字下沉

缺点：会添加多余的批注、耗费时间和精力

原文链接：点击查看

总结

以上是内存溢出为你收集整理的WordPress 首字下沉的三种实现方法全部内容，希望文章能够帮你解决WordPress 首字下沉的三种实现方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。