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

推薦給您的相關主題
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012