2007/07/14

[CSS] 段落第一個字變大

CSS可以控制段落的第一個字變大。
在CSS裡有四種的虛擬元素pseudo-element



Pseudo-element Purpose IE F N W3C
:first-letter 增加樣式到文字內容(text)的第一個字 5 1 8 1
:first-line 增加樣式到文字內容(text)的第一行 5 1 8 1
:before 插入一些內容在這個元素之前 1.5 8 2
:after 插入一些內容在這個元素之後 1.5 8 2


使用 :first-letter 讓第一個字變大。

以無名的網誌為例,文章的內容放在類別為innertext的容器內。

//  無名網誌的文章結構

<div class="innertext">
<p>這是文章內容</p>
<p>這是文章內容</p>
</div>


如果要讓每個段落的第一個字變大,可以這樣做

//  讓第一個字變大的CSS語法

div.innertext p:firest-letter { font-size: 200%; }

selector.className selector:pseudo-elements { property: value; }

選擇子.樣式名稱 選擇子:擬態元素 { 屬性: 值 ; }


重要:IE瀏覽器對於虛擬元素有個bug,在虛擬元素的名稱宣告結束與{之間要加入空格。如果緊接著{,會發生錯誤,使得描述無效。



p:first-letter{font-size: 200%;}
p:first-letter {font-size: 200%;}
^就是少打這個空格,整個趕鈴羊


以下是原文

Problem



When the space is removed between the pseudo element and the first curly brace, the selector will not be applied. For example:



select:pseudo-element{ declaration }
^ space removed


To prevent the problem, ensure a space is added:



select:pseudo-element { declaration }
^ space preserved


參考連結 - IE 6 pseudo elements bug

No comments: