CSS first-letter 屬性

CSS first-letter 屬性是 CSS 的選擇器(Selector),也被稱為虛擬元素或者偽元素,可以用來控制文章段落的字首字母,透過 CSS first-letter 可以很輕鬆的選擇單一段落或是整個段落的每一個字首字母,接著我們就可以對這些字首字母進行樣式化,美化所呈現的結果。

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

範例中使用了 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>
以上輸出結果如



CSS 語法中用到了 p.T1.first-letter 將每個類別為 T1 的段落的字首字母字動選擇起來,然後對其做樣式化,這樣的應用方式對於文章篇福很長時,可以節省許多管理的時間,且不需要每個段落開頭都重新設定一次字母樣式,這就是 CSS first-letter 的特性與優點。

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