::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 Selectors Level 3 (CSS 選取器層級 3)  找到此虛擬類別的定義。

適用範圍

address , blockquote , body , center , dd , div , dl , dt , fieldset , form , hn , legend , li , listing , marquee , menu , p , plaintext , pre , s , samp , select , small , xmp

另請參閱

概念

::after
::before
::selection
::first-line