程序员人生 网站导航

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

栏目:WordPress时间:2013-10-13 11:56:42

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;      }

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

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

原文链接:点击查看

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐