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; }
优点:适用于所有浏览器、可自由决定使哪篇文章显示首字下沉
缺点:会添加多余的批注、耗费时间和精力
分类:新闻资讯