DoReMe > ASP教學區 > 第七章高級HTML

標題

名單

搜索

Help

注冊

登入

ASP教學區
DoReMe : ASP教學區

話題: 第七章高級HTML

作者

貼子內容	<< Prev Topic﹐ 下一個主題 >>

friend
Newbie
Newbie

加入: 2004/5月/08
Online Status: Offline
回復: 38

Posted: 2004/11月/16 1:17下午 \| IP記錄

控制文本的空間

根據Cascading Style Sheet規範，你應當可以控制文本行的高度，字母的空間以及單詞的空間。然而非常遺憾，當前版本的Netscape和Micr osoft的瀏覽器只支持行高度的屬性。下面的HTML文件說明了這些特性（見圖7.25）：

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.BigLines {line-height: 200%}

-->

</STYLE>

</HEAD>

<BODY>

These lines of text have plenty of space between them.

Can you notice the extra space?

These lines of text have plenty of space between them.

Can you notice the extra space?

These lines of text have plenty of space between them.

Can you notice the extra space?

These lines of text have plenty of space between them.

Can you notice the extra space?

</P>

<P>

These lines of text have no space between them.

Do you notice the missing space?

These lines of text have no space between them.

Do you notice the missing space?

These lines of text have no space between them.

Do you notice the missing space?

These lines of text have no space between them.

Do you notice the missing space?

</P>

</BODY>

</HTML>

當這個文件在網絡瀏覽器上顯示時，第一段中的文本行之間的空間大小為200％（當前字體大小的兩倍）。除了使用百分號外，你也可以使用前面所述的任何一個度量單位，如象素或點。

圖7.25 控制行間距

friend
Newbie
Newbie

加入: 2004/5月/08
Online Status: Offline
回復: 38

Posted: 2004/11月/16 1:17下午 \| IP記錄

控制字體的Weight、類型及Variant

字體的weight決定了字體顯示時的筆畫粗度，字體的類型決定了字體是否以斜體顯示，而字體的variant屬性決定了字體是否以小的caps顯示（SMALL CAPITAL LETTERS）。

根據Cascading Style Sheet的建議，字體的weight應當決定字體筆畫的粗度。然而，當前的瀏覽器只能識別絕對值：bold和normal。而且，當前的瀏覽器不支持小的caps。下面的例子使用了font-weight和font-style屬性（見圖7.26）：

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.BoldWeight {font-weight: bold}

.ItalicStyle {font-style: italic}

-->

</STYLE>

</HEAD>

<BODY>

This sentence is bold.

</P>

This sentence is in italics.

</P>

</BODY>

</HTML>

圖7.26 使用字體的weight和style屬性

friend
Newbie
Newbie

加入: 2004/5月/08
Online Status: Offline
回復: 38

Posted: 2004/11月/16 1:17下午 \| IP記錄

同時控制多個字體屬性

通過使用font屬性，你可以同時控制文本的許多屬性。這個屬性將font-style、font-variant、font- weight、font-size、line-height以及line-family組合成一個單個屬性。下面所示的例子說明了怎樣使用這個屬性（見圖7.27）：

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.FirstFont {font: italic normal bold 14pt/20pt Arial}

.SecondFont {font: 14pt 「Comic Sans MS」}

-->

</STYLE>

</HEAD>

<BODY>

I am the First Font.

</P>

I am the Second Font.

</P>

</BODY>

</HTML>

圖7.27 使用font屬性

你為font屬性指定值時所列出的值的次序是很重要的。如果你列出的值沒有依據正確的次序，瀏覽器就不能將正確的值與正確的屬性聯繫起來。而且，請注意正斜槓（/）被用來分隔字體大小及行間隔寬度的值。

第一條規則為font屬性列出了所有的值，第二條規則省略了許多值，只要你按照正確的次序放置它們，一切都會正常工作。

friend
Newbie
Newbie

加入: 2004/5月/08
Online Status: Offline
回復: 38

Posted: 2004/11月/16 1:18下午 \| IP記錄

控制文本的對齊方式

你可以使用text-align屬性的三個值left、center和right來對齊文本。更好的是，在Netscape Navigator 4.0和Internet Explorer 4.0中，你可以建立完全調整過的文本。表7.5使用了text-align屬性的所有四個值（見圖7.28）：

表7.5 對齊方式舉例

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.Left {text-align: left}

.Right {text-align: right}

.Center {text-align: center}

.Justify {text-align: justify}

-->

</STYLE>

</HEAD>

<BODY>

This text is left aligned. See how the edges of this paragraph line up.

</P>

This text is right aligned. See how the edges of this paragraph line up.

</P>

This text is centered. I float in the middle of the screen.

</P>

This text is justified. See how the edges of this paragraph line up.

</P>

</BODY>

</HTML>

圖7.28 使用style sheet來對齊文本

friend
Newbie
Newbie

加入: 2004/5月/08
Online Status: Offline
回復: 38

Posted: 2004/11月/16 1:18下午 \| IP記錄

控制段落的縮進

Style Sheet的一個非常有用的屬性是text-indent屬性，使用這個屬性，你可以通過提供百分數或絕對值來縮進文本，就如下面的例子所示（見圖7.29）：

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.Indented {text-indent: 10%}

-->

</STYLE>

</HEAD>

<BODY>

This paragraph is indented.

</P>

<P>

This paragraph is not.

</P>

</BODY>

</HTML>

圖7.29 使用style sheet來縮進文字

friend
Newbie
Newbie

加入: 2004/5月/08
Online Status: Offline
回復: 38

Posted: 2004/11月/16 1:18下午 \| IP記錄

控制背景色和前景色

你應當已經對顏色屬性非常地熟悉了，你可以使用這一屬性來為你的文本指定前景色，如下所示：

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.Teal {color: teal}

.Red {color: #FF0000}

.Green {color: #0F0}

.Blue {color: RGB(0,0,255)}

.AlsoBlue {color: RGB(0%,0%,100%)}

-->

</STYLE>

</HEAD>

<BODY>

<P CLASS=Green> This text is green. </P>

</BODY>

</HTML>

在此例中，文本的顏色通過五種不同的方法來設定。第一條規則在聲明中使用了顏色關鍵字teal。第二條規則使用了一個標準的六位的十六進制RGB值。第三個規則也使用了一個十六進制RGB值，但只是為每一種顏色份量使用了一位數字。第四條規則使用了一個十進制的RGB值而不是十六進制的值。最後一個規則使用了百分數。

注意

Internet Explorer 3.0不能識別上述指定顏色值的後兩種方法。這個瀏覽器只能接受顏色關鍵字和六位或三位的十六進制的顏色值。

你也可以使用同樣的方法來為background屬性提供值，background屬性可以用來控制你的文本的背景顏色。例如，在下面的例子中，background屬性使在段落中的第一個字以綠色的背景顯示出來（見圖7.30）：

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.Green {background: green}

-->

</STYLE>

</HEAD>

<BODY>

<P> <SPAN CLASS=Green> The </SPAN> first word of this

paragraph has a green background color.

</P>

</BODY>

</HTML>

圖7.30 具有背景色的文字

friend
Newbie
Newbie

加入: 2004/5月/08
Online Status: Offline
回復: 38

Posted: 2004/11月/16 1:18下午 \| IP記錄

使用background屬性控制圖像

通過使用style sheet，你可以獲得更多的對你網頁上的背景圖像的控制。例如，你可以為不同的HTML標識符指定不同的背景圖像（見圖7.3 1）。從下面的例子中你可以看到怎樣使用background屬性：

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

Body {background: URL(checker.gif)}

P {background: URL(myimage.gif)}

.SmallImage {background: URL(smallimage.gif)}

-->

</STYLE>

</HEAD>

<BODY>

web page has three distinct background images.

</P>

</BODY>

</HTML>

圖7.31 具有多幅背景圖像的網頁

使用標準HTML，你不能將文本放置在非主體背景的圖像之上，而另一方面，使用Cascading Style Sheet，這會非常簡單。你通過提供圖像的URL來指定一幅圖像，就像URL(myimage.gif)。注意這些是普通的圓括號，而不是圍繞在圖像文件名字周圍的花括號。

使用background屬性，你也可以實現對背景圖像平舖行為的完全控制。例如，你可以指定一幅圖像應該豎直平舖，而不是水平平舖，或採用別的方法（見圖7.32）。在下例中，為<BODY>指定的規則讓一幅背景圖像只在豎直方向上重複：

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

Body {background: URL(myimage.gif) repeat-y white}

-->

</STYLE>

</HEAD>

<BODY>

The image is only on my left! The image is only on my left!

</BODY>

</HTML>

圖7.32 在一個方向上平舖背景圖像

注意

注意此例中使用的顏色關鍵字white，即使你使用了背景圖像，你也應當設定背景顏色。當瀏覽器讀入一幅圖像時，會先顯示背景圖像。而且，如果一幅圖像沒有覆蓋整個區域，背景顏色就會在剩餘的空間顯示出來。

如果你使用了repeat-x值而不是repeat-y值，則圖像就會在水平方向上平舖，而不會在豎直方向上顯示。如果你根本就不想讓圖像平舖，你就可以使用值no-repeat。如果你使用了這個值，圖像就只會顯示一次。

如果你想控制圖像的滾動特性，你可以使用兩個關鍵字：fixed和scroll。通常，當你滾動一個網頁的內容時，背景圖像也跟著滾動，你可以通過使用fixed關鍵字來防止這一行為的發生。

注意

Netscape Navigator的所有版本──包括4.0──都不能識別fixed關鍵字。你不能防止背景圖像隨著網頁內容一起滾動，這意味著image-alignment屬性的用途有限。

注意

如果你在Internet Explorer 3.0中使用scroll關鍵字，將會引起混亂。瀏覽器將會把這個關鍵字解釋為fixed。然而，你不需要使用fixed這個關鍵字，因為它是缺省值。

你可以使用三個關鍵字：left、center和right來對齊圖像。你可以使用這些關鍵字來水平地對齊一幅圖像。要想豎直地對齊圖像，應該使用下面三個關鍵字：top、middle和bottom。下面的例子說明了如何使用（見圖7.33）：

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

Body {background: URL(myimage.gif) fixed bottom right white}

-->

</STYLE>

</HEAD>

<BODY>

The image is in the bottom right corner of the screen!

</BODY>

</HTML>

圖7.33 使用style sheet安放背景圖像

friend
Newbie
Newbie

加入: 2004/5月/08
Online Status: Offline
回復: 38

Posted: 2004/11月/16 1:19下午 \| IP記錄

精確安置空白

在引入Cascading Style Sheet之前，要想控制一個網頁中的空白是非常困難的。使用下面的四個屬性：margin-left、margin-top、 margin-right和margin-bottom，一切就會變得很容易。表7.6顯示的例子說明了怎樣使用這四個屬性（見圖7.34）：

表7.6 控制文本空白

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.Thin {margin-left: 50pt; margin-right: 50pt}

.VeryThin {margin-left: 100pt; margin-right: 100pt}

-->

</STYLE>

</HEAD>

<BODY>

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

</P>

Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.

Very Thin. Very Thin.

Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.

Very Thin. Very Thin.

Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.

Very Thin. Very Thin.

Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.

Very Thin. Very Thin.

Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.

Very Thin. Very Thin.

</P>

</BODY>

</HTML>

圖7.34 使用不同的空白

不需要一個個地指定空白值，你可以使用margin屬性來一次設定所有的空白值。當你使用margin屬性時，你需要依照top 、right、bottom和left的次序給出它們的值。如果你只提供了一個值，則它會提供給所有的四個屬性。如果你只提供了兩個或三個值，其餘的值會從相對的位置去獲得。下面的例子說明了怎樣使用這個屬性：

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.Thin {margin: 50pt}

-->

</STYLE>

</HEAD>

<BODY>

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

</P>

</BODY>

</HTML>

friend
Newbie
Newbie

加入: 2004/5月/08
Online Status: Offline
回復: 38

Posted: 2004/11月/16 1:19下午 \| IP記錄

使用Cascading Style Sheet建立Layer

margin屬性的一個有趣的應用是用於建立layer，通過使用margin屬性，你可以將一段文字放置在另一段文字的上面，就像下面的例子所示（見圖7.35）：

<HTML>

<HEAD>

<TITLE> STYLE </TITLE>

<STYLE>

BODY {margin: 50pt}

.BottomLayer {color: gray; font: 100px 「Comic Sans MS」}

.TopLayer {margin-top: -100px; color: yellow; font: italic 40px Verdana}

</STYLE>

</HEAD>

<BODY>

<P CLASS=BottomLayer> BACKGROUND

<P CLASS=TopLayer> FOREGROUND </P> </P>

</BODY>

</HTML>

圖7.35 建立覆蓋文本

注意此例中為上層文字的margin屬性使用的負值，負值將上層文字上移了100個象素，你可以通過這種方法放置任意多的lay er。

還要注意上層文字位於底層文字中。上層文字的<P>標識符包含在底層文字的<P>標識符之中，這就迫使上層文字的空白要依據底層文字來計算。

friend
Newbie
Newbie

加入: 2004/5月/08
Online Status: Offline
回復: 38

Posted: 2004/11月/16 1:19下午 \| IP記錄

建立邊框

你可以使用border屬性來建立許多有趣的效果，border屬性允許你控制顯示在網頁元素周圍的邊框的可見性、顏色、寬度以及類型。

注意

Internet Explorer 3.0不能識別border屬性。

下面的例子說明了如何使用這個屬性（見圖7.36）：

<HTML>

<HEAD>

<TITLE> STYLE </TITLE>

<STYLE>

BODY {text-align: center; font: 14pt Verdana}

.BlueBorder {border: solid blue}

.InsetBorder {border: 20px inset}

.OutsetBorder {border: 20px outset}

.DoubleBorder {border: double}

.GrooveBorder {border: 20px groove}

.RidgeBorder {border: 20px ridge}

</STYLE>

</HEAD>

<BODY>

<P CLASS=BlueBorder> I have a blue border </P>

<P CLASS=InsetBorder> I have an inset border </P>

<P CLASS=OutsetBorder> I have an outset border </P>

<P CLASS=DoubleBorder> I have a double border </P>

<P CLASS=GrooveBorder> I have a grooved border </P>

<P CLASS=RidgeBorder> I have a ridged border </P>

</BODY>

</HTML>

border屬性具有三個值：邊框的寬度、類型以及顏色。要指定一個邊框的寬度，你可以使用前面討論過的任何一個測量單位，你也可以使用關鍵字：thin、medium和thick。

style的值決定了邊框的類型，有許多關鍵字都能用於這個值：dotted、dashed、solid、double、gro ove、ridge、inset和outset。然而，關鍵字dotted和dashed在Netscape Navigator 4.0上不起作用。

最後，你可以指定邊框的顏色，你可以通過使用前面討論過的任何一種指定顏色的方法來提供這個值。

圖7.36 使用border屬性

<< 上一頁頁 of 4 下一頁 >>

顯示可打印的頁面

你不能張貼新論題在這個討論版
你不能回應論題在這個討論版
你不能刪除你的發言在這個討論版
你不能編輯你的發言在這個討論版
你不能新增投票標題在這個討論版
你不能在這個討論版投票

保養品
保養品, Skin Care
www.elady.tw

Makeups Wholesale
Wholesale Cosmetics SkinCares
lungjyi.com

保養品批發
名牌保養品、保養品批發
www.perfume.com.tw/skincare

Wholesale Perfumes
Fragrances Perfumes Wholesale
lungjyi.net