:first-letter
套用一或多個樣式至物件的第一個字母。
:first-letter { sRules }
sRules
指定一或多個階層式樣式表屬性/值組的值。
background、border、border-bottom、border-bottom-color、border-bottom-style、border-bottom-width、border-collapse、border-color、border-left、border-left-color、border-left-style、border-left-width、border-right、border-right-color、border-right-style、border-right-width、border-style、border-top、border-top-color、border-top-style、border-top-width、border-width、clear、color、font、font-family、font-size、font-style、font-variant、font-weight、line-height、margin、padding、text-decoration 及 vertical-align 屬性可套用至 :first-letter 虛擬元素。
:first-letter 虛擬元素可用於建立一般排版效果,例如首字放大。首字放大所建立的效果,是以較大的字型呈現段落的第一個字元,且其基準線至少降低一整行,因而也使第二行文字縮排。
:first-letter 虛擬元素可附加至區塊層級元素。若您將對應的 display 屬性設為 block,也可將它附加至內嵌元素。
下列範例顯示如何使用 :first-letter 虛擬元素。
下列規則會使段落中的第一個字母成為首字放大字母,其大小為段落中其他字母的兩倍:
<style>
p.BigFirst:first-letter {font-size: 200%; float: left}
</style>
<p class="BigFirst">The first letter in this paragraph will be
twice the size of the other letters in this paragraph. The first
letter in this paragraph will be twice the size of the other
letters in this paragraph.</p>
下列規則說明附加 :first-line 和 :first-letter 虛擬元素至某個元素的累積效果:
<style>
.LetterAndline:first-line {text-transform: uppercase}
.LetterAndline:first-letter {font-size: 200%; float: left}
</style>
<p class="LetterAndline">The first letter in this paragraph will be
twice the size of the other letters in the paragraph. The first line in
this paragraph will have uppercase letters. Subsequent lines will render normally. The first letter in this paragraph will be twice the size of the other letters in the paragraph. The first line in this paragraph will have uppercase letters. Subsequent lines will render normally.</p>
下列範例使用 :first-letter 虛擬元素,建立類似報紙專欄的排版效果:
<style>
.col1 {border-right: black 1px solid;
padding-right: 10px;
padding-left: 5px;
width: 140px;
text-justify: newspaper
}
.newsbite:first-letter {padding-right: 5px;
padding-left: 5px;
font-size: 24pt;
left: 0px;
float: left;
padding-bottom: 5px;
padding-top: 5px;
position: absolute;
top: 100px
}
</style>
<div class="col1">
<div class="newsbite">Initial caps are a great a way to dress up
your text. You can use them to draw attention to the beginning of
an article. The initial caps used here are commonly called drop
caps.</div>
</div>
此虛擬元素是在階層式樣式表 (CSS) 層級 1 (CSS1) (英文) 中定義。
ADDRESS、BLOCKQUOTE、BODY、CENTER、DD、DIV、DL、DT、FIELDSET、FORM、HN、LI、P、XMP