标题标题  显示论坛会员列表名单  搜索论坛搜索  HelpHelp
  注册注册  登入登入
ASP教学区
 DoReMe : ASP教学区
主题 话题: 第七章 高级HTML 回复发表新主题
作者
贴子内容 << Prev Topic下一个主题 >>
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:17下午 | IP记录 引用 friend

控制文本的空间

根据Cascading Style Sheet规范,你应当可以控制文本行的高度,字母的空间以及单词的空间。然而非常遗憾,当前版本的Netscape和Micr osoft的浏览器只支持行高度的属性。下面的HTML文件说明了这些特性(见图7.25):

 

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.BigLines {line-height: 200%}

-->

</STYLE>

</HEAD>

<BODY>

<P CLASS=BigLines>

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 控制行间距

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:17下午 | IP记录 引用 friend

控制字体的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>

<P CLASS=BoldWeight>

This sentence is bold.

</P>

<P CLASS=ItalicStyle>

This sentence is in italics.

</P>

</BODY>

</HTML>

 

图7.26 使用字体的weight和style属性

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:17下午 | IP记录 引用 friend

同时控制多个字体属性

通过使用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>

<P CLASS=FirstFont>

I am the First Font.

</P>

<P CLASS=SecondFont>

I am the Second Font.

</P>

</BODY>

</HTML>

 

图7.27 使用font属性

你为font属性指定值时所列出的值的次序是很重要的。如果你列出的值没有依据正确的次序,浏览器就不能将正确的值与正确的属性 联系起来。而且,请注意正斜杠(/)被用来分隔字体大小及行间隔宽度的值。

第一条规则为font属性列出了所有的值,第二条规则省略了许多值,只要你按照正确的次序放置它们,一切都会正常工作。

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:18下午 | IP记录 引用 friend

控制文本的对齐方式

你可以使用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>

<P CLASS=Left>

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

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

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

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

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

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

</P>

<P CLASS=Right>

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

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

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

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

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

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

</P>

<P CLASS=Center>

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

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

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

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

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

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

</P>

<P CLASS=Justify>

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

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

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

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

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

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

</P>

</BODY>

</HTML>

 

图7.28 使用style sheet来对齐文本

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:18下午 | IP记录 引用 friend

控制段落的缩进

Style Sheet的一个非常有用的属性是text-indent属性,使用这个属性,你可以通过提供百分数或绝对值来缩进文本,就如下 面的例子所示(见图7.29):

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.Indented {text-indent: 10%}

-->

</STYLE>

</HEAD>

<BODY>

<P CLASS=Indented>

This paragraph is indented.

This paragraph is indented.

This paragraph is indented.

</P>

<P>

This paragraph is not.

This paragraph is not.

This paragraph is not.

</P>

</BODY>

</HTML>

 

 

图7.29 使用style sheet来缩进文字

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:18下午 | IP记录 引用 friend

控制背景色和前景色

你应当已经对颜色属性非常地熟悉了,你可以使用这一属性来为你的文本指定前景色,如下所示:

<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=Teal> This text is teal. </P>

<P CLASS=Red> This text is red. </P>

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

<P CLASS=Blue> This text is blue. </P>

<P CLASS=AlsoBlue> This text is also blue. </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 具有背景色的文字

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:18下午 | IP记录 引用 friend

使用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>

<P> <SPAN CLASS=SmallImage> This </SPAN>

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安放背景图象

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:19下午 | IP记录 引用 friend

精确安置空白

在引入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>

<P CLASS=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. Thin.

</P>

<P CLASS=VeryThin>

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>

<P CLASS=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. Thin.

</P>

</BODY>

</HTML>

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:19下午 | IP记录 引用 friend

使用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>标识符之中,这就迫使 上层文字的空白要依据底层文字来计算。

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 38
Posted: 2004/11月/16 1:19下午 | IP记录 引用 friend

建立边框

你可以使用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属性

Back to Top 查看 friend's 资料 搜索其它贴子 friend 访问 friend's
 

<< 上一页 页 of 4 下一页 >>
  回复发表新主题
显示可打印的页面 显示可打印的页面

论坛跳转
不能 张贴新论题在这个讨论版
不能 回应论题在这个讨论版
不能 删除你的发言在这个讨论版
不能 编辑你的发言在这个讨论版
不能 新增投票标题在这个讨论版
不能 在这个讨论版投票

Edit by doreme Forums version 2004
Welcome ©2001-2004 doreme Guide

This page was generated in 0.1875 seconds.

 
保养品
保养品, Skin Care
www.elady.tw
美材批发
美材, Cosmetic
www.elady.tw/beauty_org
保养品批发
名牌保养品、保养品批发
gb.perfume.com.tw/skincare
饰品批发
饰品、饰品批发
gb.perfume.com.tw/ornament