CSS first-letter 控制段落首字母自動轉為大寫

有的時候為了讓整篇文章排版與網頁的風格搭配，會將文章開頭英文字母的字首設為大寫或者用特殊字型美化，通常見於英文的文章，CSS 內建的 first-letter 可以讓你輕鬆控制段落第一個字母，例如要用自動轉為大寫呈現，以下準備個簡單的範例。

用 P 元素將一個段落先標記起來

<p>this is a test content.We will use css first-letter set the first letter.</p>

開始使用 CSS 的 first-letter 樣式化第一個字母。

p:first-letter{
　text-transform:uppercase;
}

呈現結果

This is a test content.We will use css first-letter set the first letter.

實際上當開起網頁原始碼可以發現，第一個字母依然是小寫的 t，我們僅是透過 CSS text-transform 來將 first-letter 鎖定的第一個字母，轉換為大寫後，直接呈現於螢幕上，本質並沒有改變，我們其實可以透過 CSS first-letter 的特性，一口氣控制整篇文章的每個段落開頭，比起傳統寫文章時，分別為每個字母做樣式化容易，也可以節省更多的時間，請參考此篇：CSS first-letter。

推薦給您的相關主題