如何用 CSS 選擇文章第一個字母或文字

也許你看過有些文章的開頭第一個字母會特別大或用不同的字型，也有人是用不同的顏色呈現，這些效果都要想辦法先選取第一個字母，可是如果每篇文章都要替第一個字母特別選出來修改，這樣實在是太麻煩了，CSS 有一個 first-letter 屬性專門用來處理這個問題，CSS 有辦法自己幫我們選擇第一個字母後，以後我們就只需要把文章發表出去，就自動會有第一個字母的特效囉！

CSS 選擇文章第一個字母後進行修改的範例
<style type="text/css">
<!--
p:first-letter{
color:gray;　//將文字設為灰色
font-size:23px;
font-weight:bold;　//將文字設為粗體
}
#DIV1{
font-size:13px;
}
#DIV1:first-letter{
color:blue;　//將文字設為藍色
font-size:23px;
font-weight:bold;
}
-->
</style>
<p>This is a test string.</p>
<div id="DIV1">這是一段 DIV 區塊內的測試文字</div>
範例的實際效果
This is a test string.
這是一段 DIV 區塊內的測試文字
我們在範例準備了兩個不同的區塊，第一個區塊是段落的 <p> 標籤，第二個區塊是 DIV 區塊，兩者都使用 CSS 的 first-letter 屬性來選取第一個字，英文的第一個字母，中文則是選擇第一個文字，CSS 有辦法正確判斷中英文的差異，實在是太便利了！first-letter 屬性把第一個字選取起來之後，我們就可以對其進行各種文字樣式的修改，包含顏色、大小、字型 ... 等，非常實用。

這裡有許多可以修改文字的功能可以使用
延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012