3.4 文字對(duì)齊及縮行

2018-10-11 09:16 更新
3.4 文字對(duì)齊及縮行


現(xiàn)在我們談?wù)劧温浼皥D象的對(duì)齊和加入段落縮行。


文字對(duì)齊


利用文字對(duì)齊屬性,你可以控制段落的水平對(duì)齊:

    H4 { text-align: center }



這項(xiàng)屬性只用于整塊的內(nèi)容,如<P>、 <H1>-<H6>、<BLOCKQUOTE>和 <UL>。


以下為各種選項(xiàng):


left指將要素左對(duì)齊,如本段所示。


right指將要素右對(duì)齊,如本段所


示。


center指將要素居中,如本段所示。


justify指將要素左右對(duì)齊,如本段所示。justify 屬性可用于Communicator(兩種操作平臺(tái))及IE 4 (Windows版), 但不能用于MAC機(jī)的IE 3或IE 4。


截止現(xiàn)在,我們所談到的只是將CSS用于文字,但CSS 的屬性頁可以用于其它替代要素(替代要素指用其它內(nèi)容代替了的要素,圖象是最常用的替代內(nèi)容,還有Java applets,QuickTime movies和其它內(nèi)容。)


所以我們可以將圖象右對(duì)齊,如下所示:


day3_page4b.gif (1589 bytes)


(如果你將樣式表屬性直接加到<IMG>之上,Communicator有時(shí)候可能會(huì)搗亂。為了安撫它的這種驢脾氣,你可以將<IMG>包含在<SPAN>或<DIV>之內(nèi),然后將樣式表加到<SPAN>或<DIV>上,最好是加在<DIV>上,因?yàn)镮E 4有時(shí)候?qū)τ诼?lián)結(jié)到<SPAN>上的樣式會(huì)鬧一點(diǎn)小性子。


垂直對(duì)齊


目前瀏覽器根本還不能支持垂直對(duì)齊屬性,但愿5.0版的瀏覽器能夠做到這一點(diǎn)。

    H4 { vertical-align: top }



垂直對(duì)齊可以使你控制文字或替代要素(比如圖象)相對(duì)于其母體要素的的垂直位置。例如,如果你將一個(gè)2x2象素的GIF圖象同其母體要素文字的頂部垂直對(duì)齊,則該GIF圖象將在該行文字的頂部顯示。


以下為各項(xiàng)參數(shù):

  • top將要素頂部同最高的母體要素對(duì)齊。

  • bottom將要素的底部同最低的母體要素對(duì)齊。 

  • text-top將要素的頂部同母體要素文字的頂部對(duì)齊。

  • text-bottom將要素的底部同母體要素文字的底部對(duì)齊。

  • baseline將要素的基準(zhǔn)線同母體要素的基準(zhǔn)線對(duì)齊。

  • middle將要素的中點(diǎn)同母體要素的中點(diǎn)對(duì)齊。

  • sub將要素以下標(biāo)的形式顯示。

  • super將要素以 上標(biāo)的形式顯示。


目前只有IE 4能支持這項(xiàng)屬性,它支持最后的兩項(xiàng)參數(shù)。


文字縮行


你想使段落縮行嗎?(在Internet上呆一段時(shí)間之后,你可能已經(jīng)忘了縮行是怎么一回事?。?

    P { text-indent: 2em }


    在本段中你就可以看到縮行的應(yīng)用。該屬性只應(yīng)用于整塊的內(nèi)容。你可以使用任何一種熟悉的長(zhǎng)度單位設(shè)定縮行。

    你還可以使用比例參數(shù)。例如,本段的縮行為40%的比例,即本段的第1行的起始位置比其正常位置縮進(jìn)了40%。

    (Windows版的IE 4假定比例指相對(duì)于整個(gè)瀏覽器窗口。而不是指段落的寬度)如果你將文字縮行賦予一個(gè)負(fù)值,則文字第1行的起始位置比其正常位置還偏左。

    本段的文字縮行賦值為-10象素。IE 4對(duì)這項(xiàng)屬性不太適應(yīng),它有可能不顯示最初的幾個(gè)字母。

    充分運(yùn)用你的縮行威力吧,年輕的杰地戰(zhàn)士!



以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)