WordPress 首字下沉的三種實現方法

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

優點：適用于所有瀏覽器、可自由決定使哪篇文章顯示首字下沉

缺點：會添加多余的批注、耗費時間和精力

原文鏈接：點擊查看

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈