CSS first-letter 基本範例
<style type="text/css">
<!--
p:first-letter{
color:red;
font-size:20px;
font-weight:bold;
}
-->
</style>
<p>Good morning.</p>
以上輸出結果如：Good morning<!--
p:first-letter{
color:red;
font-size:20px;
font-weight:bold;
}
-->
</style>
<p>Good morning.</p>
範例中使用了 first-letter 來選擇第一個字母，接著我們就可以很輕鬆的對該字母做一些樣式，color:red 是將文字的顏色設為紅色，font-size:20px 是將文字大小設為 20px，而 font-weight:bold 則是將文字設為粗體字，能夠這樣一次設定完成，主要還是要歸功於 first-letter 的鎖定功能，既然 first-letter 如此好用，我們就來將他應用在整篇文章的每個段落中，只需要透過 CSS 類別的選擇即可辦到。
透過 CSS 類別一次控制整篇文章的段落開頭字母
<style type="text/css">
<!--
p.T1:first-letter{
color:red;
font-size:20px;
font-weight:bold;
}
-->
</style>
<p class="T1">Good morning.</p>
<p class="T1">Hello World.</p>
以上輸出結果如<!--
p.T1:first-letter{
color:red;
font-size:20px;
font-weight:bold;
}
-->
</style>
<p class="T1">Good morning.</p>
<p class="T1">Hello World.</p>
CSS 語法中用到了 p.T1.first-letter 將每個類別為 T1 的段落的字首字母字動選擇起來，然後對其做樣式化，這樣的應用方式對於文章篇福很長時，可以節省許多管理的時間，且不需要每個段落開頭都重新設定一次字母樣式，這就是 CSS first-letter 的特性與優點。
推薦給您的相關主題