亚洲欧洲国产欧美一区精品,激情五月亚洲色五月,最新精品国偷自产在线婷婷,欧美婷婷丁香五月天社区

3.1 第3日
我們在第2天的教程中學習了字體及控制文字字符的方法.今天我們將學習這些字符、單詞和每行的內(nèi)容之間是如何定位的。我們將學會如何設(shè)定字與字之間、字母之間的距離，以及行距（垂直間距）、文字的對齊方式、邊距、邊框及浮動要素等，列表如下：
字間距
字母間距
行高
文字對齊方式
垂直對齊方式
文字縮位
頂邊距、左邊距等
空格填充－頂部、左邊等等
邊框－寬度、顏色、樣式等
浮動
清除
很顯然，今天我們要學很多東西，所以我們得抓緊時間。讓我們開始吧！

3.2 字間距及字母間距
下面要學習的屬性可以使你做到HTML標簽做不到的事情：控制字間距及字母間距。
字間距
利用字間距屬性，你可以在字之間加入更的距離：
H3 { word-spacing: 1em }
你所使用的參數(shù)值將加入任何瀏覽器的缺設(shè)置，你可以使用我們昨天談到的任何種長度單位：
in （英寸）
cm （厘米）
mm （毫米）
pt （點數(shù)）
pc （打字機字間距）
em （ems）
ex (x-height)
px （象素）
以下為顯示結(jié)果：
Behold the power of cheese.
如果你的瀏覽器不支持這種CSS屬性，請點擊這里查看顯示效果。
如果你看不到任何不同之處，則說明你的覽器不支持這種屬性，只有MAC機用的IE4能支持這種字間距設(shè)置。
字母間距
字母間距可以在IE 4中應用，但Communicator不行，唉...
H3 { letter-spacing: 10px }
字母間距的功能和字間距的很類似：其參值將被加入到瀏覽器的缺省設(shè)置中，你以使用上述任何一種長度單位。
如果你用的是IE 4，這里是一個例子：
Behold the power of cheese.
對于這兩種屬性，你都可以使用normal參數(shù)。從而使其按照瀏覽器的原有缺省設(shè)置顯示。
別沮喪，還有很多CSS屬性可以在兩種瀏覽器上都可使用。下文中就是一個例子。

3.3 行距
行與行之間的距離最常用的稱呼是行距，而當網(wǎng)頁設(shè)計者們發(fā)現(xiàn)他們能夠控制行距時最常用的稱呼是"Weee!"
行高
行高簡直是上帝發(fā)給人間的福音。利用行高我們可以隨心所欲地控制行與行之間的垂直距離。
B { line-height: 16pt }
你所用的參數(shù)就是相鄰兩行的基準線（基準線就是英文小寫字母如x,a的下階線，但不包括諸如y,g等字母超過下階線的部分）之間的垂直距離。注意你所設(shè)定的參數(shù)將完全代替瀏覽器的缺省參數(shù)。
Netscape Communitor和Internet Explorer在行之前加入行高參數(shù)。所以如果你將參數(shù)設(shè)為10px，瀏覽器將把文字的第1行以10px的高度顯示。
有3種設(shè)定行高的方法：
數(shù)字
長度單位
比例
用數(shù)字設(shè)行距
B { font-size: 12pt;
line-height: 2 }
當你用數(shù)字設(shè)定行高的時候，瀏覽器將利用字號來確定行距：它將字號乘以設(shè)定的參數(shù)值。所以，在本例中，行高將是24點。顯示效果如下：
Four score and seven years ago,
the Web wasn't yet a glimmer in
anyone's eye. No one needed it,
no one missed it. Eighty-seven
years from now, what will
people laugh at us for lacking?
你還可以用小數(shù)設(shè)定參數(shù)值。
（你應該知道IE 3 不支持數(shù)字參數(shù)值，在IE 3
中使用數(shù)字參數(shù)將出現(xiàn)大片文字的互相重疊。）
用長度單位設(shè)定行距
B { font-size: 12pt; line-height: 11pt }
設(shè)定行高的另一種方法就是利用先前學過的長度單位（em及pt是最常用的單位），以下為顯示效果：
Four score and seven years ago,
the Web wasn't yet a glimmer in
anyone's eye. No one needed
it, no one missed it.
Eighty-seven years from now,
what will people laugh at us
for lacking?
你既可以輕松地將行距縮小也可以將行距放大。有了樣式表，這一切都易如反掌！
用比例設(shè)定行距
B { font-size: 10pt; line-height: 140% }
在本例中，行距是長度10points的140％，即14points。明白了嗎？
讓文字互相重疊!
你可能會問這樣的問題：如果行距太小的話，文字豈不就重疊在一起了嗎？是這樣的。我們來看看這個例子：
B { font-size: 28pt; line-height: 2pt }
以下為顯示效果:
Whoa.
Cool.
"Whoa"
使用了瀏覽器的缺省行高設(shè)置。但"Cool"的行高很小所以它和第1行重疊了。
（Communicator和Internet Explorer對行高的詮釋有所不同。
Communicator將只是將文字的上半部分重疊一點，而IE則將其全部重疊。）
如果你計劃將你的網(wǎng)頁中的某些內(nèi)容重疊顯示，行高設(shè)置還不是最佳的選擇，因為不同的瀏覽器對其的支持有差別。在第5天的課程中我們將研究文字及圖象布局的最佳方式。

3.4 文字對齊及縮行
現(xiàn)在我們談?wù)劧温浼皥D象的對齊和加入段落縮行。
文字對齊
利用文字對齊屬性，你可以控制段落的水平對齊：
H4 { text-align: center }
這項屬性只用于整塊的內(nèi)容，如<P>、
<H1>-<H6>、<BLOCKQUOTE>和 <UL>。
以下為各種選項：
left指將要素左對齊，如本段所示。
right指將要素右對齊，如本段所
示。
center指將要素居中，如本段所示。
justify指將要素左右對齊，如本段所示。justify
屬性可用于Communicator(兩種操作平臺)及IE 4 (Windows版), 但不能用于MAC機的IE
3或IE 4。
截止現(xiàn)在，我們所談到的只是將CSS用于文字，但CSS
的屬性頁可以用于其它替代要素（替代要素指用其它內(nèi)容代替了的要素，圖象是最常用的替代內(nèi)容，還有Java
applets,QuickTime movies和其它內(nèi)容。）
所以我們可以將圖象右對齊，如下所示：
 
（如果你將樣式表屬性直接加到<IMG>之上，Communicator有時候可能會搗亂。為了安撫它的這種驢脾氣，你可以將<IMG>包含在<SPAN>或<DIV>之內(nèi)，然后將樣式表加到<SPAN>或<DIV>上，最好是加在<DIV>上，因為IE
4有時候?qū)τ诼?lián)結(jié)到<SPAN>上的樣式會鬧一點小性子。
垂直對齊
目前瀏覽器根本還不能支持初衷對齊屬性，但愿5.0版的瀏覽器能夠做到這一點。
H4 { vertical-align: top }
垂直對齊可以使你控制文字或替代要素（比如圖象）相對于其母體要素的的垂直位置。例如，如果你將一個2x2象素的GIF圖象同其母體要素文字的頂部垂直對齊，則該GIF圖象將在該行文字的頂部顯示。
以下為各項參數(shù)：
top將要素頂部同最高的母體要素對齊。
bottom將要素的底部同最低的母體要素對齊。
text-top將要素的頂部同母體要素文字的頂部對齊。
text-bottom將要素的底部同母體要素文字的底部對齊。
baseline將要素的基準線同母體要素的基準線對齊。
middle將要素的中點同母體要素的中點對齊。
sub將要素以下標的形式顯示。
super將要素以 上標的形式顯示。
目前只有IE 4能支持這項屬性，它支持最后的兩項參數(shù)。
文字縮行
你想使段落縮行嗎？（在Internet上呆一段時間之后，你可能已經(jīng)忘了縮行是怎么一回事�。�
P { text-indent: 2em }
在本段中你就可以看到縮行的應用。該屬性只應用于整塊的內(nèi)容。你可以使用任何一種熟悉的長度單位設(shè)定縮行。
你還可以使用比例參數(shù)。例如，本段的縮行為40％的比例，即本段的第1行的起始位置比其正常位置縮進了40％。
(Windows版的IE 4假定比例指相對于整個瀏覽器窗口。而不是指段落的寬度）
如果你將文字縮行賦予一個負值，則文字第1行的起始位置比其正常位置還偏左。
本段的文字縮行賦值為－10象素。IE 4對這項屬性不太適應，它有可能不顯示最初的幾個字母。
充分運用你的縮行威力吧，年輕的杰地戰(zhàn)士！

3.5 邊距及空格填充
我們都知道可以用HTML設(shè)定邊距，但你必須使用表格，別無它法。而樣式表則......
快速定義邊距
首先，我們應該了解樣式表語言的術(shù)語，便我們理解正在談什么。每一個整塊的素或替代要素都包含在樣式表生成器稱為box的容器之內(nèi)。box包括：
要素本身
圍繞要素的空格填充（padding）
圍繞空格填充的邊框（border）
圍繞邊框的邊距（空白－margin）
圖示如下：
 
你可以分別控制空格填充、邊框和邊距，如我們即將做的。
頂邊距、底邊距、左邊距和右邊距
這4項屬性可以使你控制一個要素的四周的邊距。如下：
H4 { margin-top: 20px; margin-bottom: 5px; margin-left:
100px; margin-right: 55px }
你可以看到，每一個邊距都可以有不同的置�；蛘吣憧梢栽O(shè)置一個邊距，然后讓覽器用缺省設(shè)置設(shè)定其它的幾個邊距�？梢詫⑦吘鄳�用于文字和替代要素（如象）。
設(shè)定邊距參數(shù)值最明顯的方法是利用長度位：px(象素）、pt（點數(shù)）等。你也可以用比例值設(shè)定邊距。
以下是幾個例子：
頂邊距
底邊距
左邊距和右邊距
將邊距值設(shè)為負值，你就可以將兩個要素疊在一起，例：
Books
are mind food
上例中， "are mind food" 的底邊距為－55象素，右邊距為60象素。
使用負值使要素重疊的的缺陷是不同的瀏器對其處理方式不同。比如，在顯示上例子時，不同的4種主要瀏覽器（Communicator
for PC, Communicator for Mac, IE for PC, IE for Mac）對文字重疊的程度不同。
另一個缺陷是你不能完全控制位于底部的內(nèi)容，而且不同的瀏覽器對其顯示也不同。例如，
Communicator總是將圖象顯示在文字的上部。 IE似乎是將個要素按照其載入瀏覽器窗口的順序顯示各要素。
換句話說，如果你打算將幾個要素疊放在一起，就不要對邊距使用負值。今天的教程將教你如何疊放個要素。
瀏覽器對該屬性的支持方面還應注意以下幾點：
當你在IE 3中使用標尺單位(如英寸和厘米）時，IE
3有時會加大底邊距。同樣，有些HTML標簽可以適用
底邊距，有些則不能，
IE 4有時在對替代要素（如圖象）設(shè)定左邊距時會出現(xiàn)問題，你可以將圖象包在一個<DIV>中，然后給<DIV>設(shè)定樣式。
頂空格填充，底空格填充，左空格填充和
右空格填充
空格填充的作用類似于邊距控制，你可以設(shè)定一個要素的前后左右的空格填充的尺寸。
H4 { padding-top: 20px; padding-bottom: 5px; padding-left:
100px; padding-right: 55px }
你可以使用任何一種長度單位或比例值設(shè)定空格填充。其使用方法同邊距的屬性。
但是空格填充不能使用負值（而且，IE 3不支持空格填充屬性）。
下面我們將探討位于邊距和空格填充之間的邊框。

3.6 邊框
有幾種樣式表屬性可以將網(wǎng)頁要素周圍加上邊框。
（注意：IE 3和IE 4不支持任何邊框?qū)傩�。�?
頂邊框?qū)挾�，底邊框�(qū)挾�，左邊框�(qū)挾群陀疫吙驅(qū)挾?BR>你可以控制整個邊框的寬度，也可以分別控制每一邊的邊框?qū)挾龋?BR>H4 { border-top-width: 2px; border-bottom-width: 5px;
border-left-width: 1px; border-right-width: 1px }
以下是上述CSS規(guī)則的顯示結(jié)果：
你還可以給替代要素加上邊框，很好玩，是吧？
你無須給一個要素的每一邊都加上邊框。
你可以使用上述任何一種長度單位設(shè)定邊框?qū)挾�，也可以使用�?nèi)置關(guān)鍵字設(shè)定寬度：
本段文字的頂邊框?qū)挾葏��?shù)值為thin。
本段文字的頂邊框?qū)挾葏��?shù)值為medium。
本段文字的頂邊框?qū)挾葏��?shù)值為thick。
如果你想使邊框四面應用相同的寬度，很簡單，使用border-width標簽就可一次完成，例：
IMG { border-width: 1in }
邊框顏色
例：
P { border-color: green; border-width: 3px }
本段文字顯示上述代碼的執(zhí)行效果。
你可以使用瀏覽器認可的顏色或者直接使用RGB參數(shù)值，例：
H4 { border-color: #FF0033; border-width: thick }
如果你想使邊框的四邊顯示不同的顏色，你可以在設(shè)置中分別列出各種顏色：
P { border-color: #666699 #FF0033 #000000 #FFFF99;
border-width: 3px }
瀏覽器將第1種顏色理解為頂邊框的顏色參數(shù)值，第2種顏色為右邊框，然后是底邊框，然后是左邊框。
本段文字顯示上述代碼的執(zhí)行效果。
注意： Communicator 不能識別多色彩，在Communicator中，你只能使用一種顏色。（如果你使用多色彩，Communicator很有可能用藍色顯示整個邊框。我們也對此感到莫名其妙）
如果不使用邊框顏色屬性，則邊框?qū)⒁砸�素自身的顏色顯示邊框顏色。
邊框樣式
你還可以設(shè)定邊框線的樣式，例：
P { border-style: double; border-width: 3px }
可以使用的關(guān)鍵字參數(shù)值如下：
solid
double
dotted
dashed
groove
ridge
inset
outset
注意：Communiactor只支持其中的幾種關(guān)鍵字屬性。

3.7 浮動要素
我們在網(wǎng)頁中經(jīng)�？吹礁�動的圖象和表格，只需對一個<IMG>標簽使用ALIGN=left屬性，文字就會繞到浮動圖象的右邊繼續(xù)顯示。樣式表對于浮動要素有一個更為靈活的語法，也就是本篇中將要談到的主題。
（IE3和IE 4不支持本頁中談到的任何功能。如果你使用IE
4，你將會看到一些奇怪的格式。）
浮動
浮動屬性使你能將一個要素周圍用文字包裹，不僅僅是包裹圖象，而且能包裹整塊的文字。
H4 { float: left }
本標題文字為向左浮動。
你可以看到這項CSS規(guī)則應用于<H4>的文字。而本段內(nèi)容則包裹在標題文字的右下邊，就象是用文字包裹圖象時的效果那樣。你也可以使用向右浮動的參數(shù)值。
如果浮動要素周圍的邊距太小，你可以使用之前學過的空格填充屬性給它加大四周的空間（但似乎使用邊距會造成問題）。
清除
如果你想使一段文字包裹某一要素，而下一段文字不包裹，你可以使用clear屬性，很象HTML的CLEAR屬性的用法（例：
CLEAR=right）。
P { clear: left }
例：
 
第1、2段文字包裹了向左浮動的第1幅圖象。
而使用了清除（clear）屬性后，第4、5段文字中只有第4段包裹了圖象，而第5段文字沒有包裹。

3.8 第3天的練習
下面我們做一個練習，請點擊觀看本頁，然后自己重新制作出相同的效果。你必須安裝4.0版本的瀏覽器以便使該例正確顯示。該例中只有一幅圖象，其余均為HTML和串接樣式表。
（注意：由于不同的瀏覽器顯示效果不同，所以你實際所看到的顯示效果在IE中可能有所差別。）
小問題：如何只使用CSS和HTML而無須gif就制造出下落陰影的效果？答案見明天的課程。

3.9 復習
今天是個好天氣。我們擴展了串接樣式表等方面的學習，將文字和圖象都置于我們的自由控制之下。它使我們可以做到普通的HTML標簽不能做到的事情。
以下是我們今天學習內(nèi)容的總結(jié)：
字間距設(shè)定字與字之間的距離。
字母間距設(shè)定每個字母之間的距離。
行高設(shè)定每行文字之間的垂直距離。
文字對齊用于設(shè)定段落的左、右對齊、居中和左右兩邊對齊。
垂直對齊用于垂直對齊文字。
文字縮行可以使段落縮行。
各種邊距屬性設(shè)定圍繞文字塊、圖等的邊距。
空格填充屬性用于設(shè)定空格填充的性。
邊框?qū)傩杂糜谠O(shè)定邊框的寬度、顏和樣式。
浮動和清除用于控制各要素之間的包裹。
明天我們將繼續(xù)探索串接樣式表的神奇魅力。