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


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

Cascading Style Sheets

Cascading Style Sheets(CSS)具有引人注目地改变环球网外观的潜力。使用Cascading Style Sheets,你可以获取对你网页上每个元素类型的精确控制。Style Sheets允许你将HTML看作为传统的页描述语言来改变HTML的基本特性。

使用Style Sheets,你可以控制传统网页上的元素,诸如精确的空白、段落缩进和字体。Style Sheets不仅允许你指定单个网页的外观,还可以被用来为网站提供一致的界面。

更好的是,你可以安全地使用Style Sheets而不用担心它们在早期的浏览器上的效果。Style Sheets具有完美退化的重要特性,不支持它们的浏览器会忽略它们。

Cascading Style Sheets的标准已经由World Wide Web Consortium制定了。虽然如此,Style Sheets在HTML中还是很新的一部分。第一个支持它的主流浏览器是Internet Explorer 3.0,它们现在也被Netscape Navigator 4.0支持了。

你应当知道两种浏览器现在都支持CCS标准。要想有效地使用Style Sheets,你必须花费大量的时间来不停地实验。在很多情况下,CSS在两种浏览器上的执行结果是非常离奇的。

注意

World Wide Web Consortium批准了Cascading Style Sheets Level 1的建议。要获得更多信息,可参观http://w3.org

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


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

在网页中加入Style

Style Sheet是一个规则列表来决定网页上每个元素的外观。例如,假设你想强调网页上所有的黑体文字,你想让所有的黑体字都以红色显 示出来。使用Style Sheet,你可以为浏览器提供一个规则,即所有的黑体字都应该用红色显示出来,就像下面的例子:

<HTML>

<HEAD>

<TITLE> Simple Style </TITLE>

<STYLE>

B {color: red}

</STYLE>

</HEAD>

<BODY>

<B> I am bold and red </B>

</BODY>

</HTML>

当这个HTML文件被一个支持Style Sheets的浏览器解释时,处于<B>标识符之间的文字将以红色显示出来。注意这个新的HTML标识符<S TYLE>,它包含了网页规则的列表。在此例中,只有一条简单的规则:

B {color: red}

这个规则具有两个部分,规则的第一个部分B被称作selector,selector被用来选择网页中规则所起作用的元素。在此 例中,B选择了所有在这个HTML文件中出现的<B>标识符,这个规则决定了每个<B>标识符的行为。

这个规则的第二部分被称为declaration,它包含了一个属性和值。在此例中,属性是color,而值是red。根据这条 规则,每一个<B>标识符的color属性都将被设为红色。

所有的规则都具有这种格式,一个或更多的selector被使用来选择网页中的元素。selector后紧接著是一个空格,再接 下来,那个元素的属性被赋予一个值,即一个属性──值对。属性和值由一个冒号分隔,并由一对花括号包含({})。

注意此例中没有别的HTML标识符被添加进文件的主体部分,Style Sheet完全是在<HEAD>标识符中定义的,虽然如此,Style Sheet决定了在文件主体部分出现的所有<B>标识符的行为。

就如前面所提到的那样,你可以使用Style Sheets而不用担心它们在早期浏览器上的效果,早期的浏览器仅仅忽略<STYLE>标识符。然而,早期的浏览器 可能会显示出位于<STYLE>标识符之间的规则列表,要防止这种事的发生,你应当总是把HTML注释符放在规则列 表的周围,如下所示:

<HTML>

<HEAD>

<TITLE> Simple Style </TITLE>

<STYLE>

<!--

B {color: red}

-- >

</STYLE>

</HEAD>

<BODY>

<B> I am bold and red </B>

</BODY>

</HTML>

可以解释Style Sheets的浏览器会很聪明地进入到注释标识符内部来获取规则,而在早期的浏览器上,则会忽略注释标识符之间的东西,不会把有 关规则的文字显示在屏幕上。

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


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

在HTML标识符中加入Styles

你可以为几乎所有的HTML标识符提供规则。例如,假设你想让处于一个列表中的所有文字以红色显示出来,你就可以用下面的规则来 实现这一点:

<HTML>

<HEAD>

<TITLE> Simple Style </TITLE>

<STYLE>

<!--

B {color: red}

OL {color: red}

-- >

</STYLE>

</HEAD>

<BODY>

<B> I am bold and red </B>

<OL>

<LI> I am red.

<LI> So am I.

</OL>

</BODY>

</HTML>

在此例中,规则OL {color : red}作用于所有列出的表项颜色。如果你有多个列表,其余列表中表项的颜色也会是红色。

在此Style Sheets中的所有规则对它们所作用的元素都有相同的效果,第一个规则让所有包含在<B>标识符中的文字以红色显 示出来,而第二个规则让所有位于每个有序列表中的东西都以红色显示。要想节省代码长度,你可以将这两句合并为一句:

B,OL {color : red}

规则不仅仅能决定颜色这一属性的行为,还对许多属性起作用。例如,你可以建立一个规则来指定所有的顶部标题都应当以24个点大小 的Arial字体显示出来,并且具有黄色背景(见图7.19),如下所示:

<HTML>

<HEAD>

<TITLE> Simple Style </TITLE>

<STYLE>

<!--

H1 {font-style: italic; font-size: 24pt;

font-family: Arial; background: yellow}

-->

</STYLE>

</HEAD>

<BODY>

<H1> Important Information </H1>

This document contains very important information

</BODY>

</HTML>

 

图7.19 具有多重属性的规则

此例中的这个简单规则对所有位于标题中的文字都起作用,这个规则的声明中包含了许多属性及其值,它们由分号分隔。通过这种方法, 你可以根据需要在一个声明中加入许多属性及其值。

你也可以为<P>和<BODY>标识符指定规则。当你想要控制大量文本的格式时,这是非常有用的,当你 为<BODY>标识符指定一个规则时,这条规则将会作用于所有包含在文件主体部分中的东西;当为<P> 指定一条规则时,它仅仅作用于包含在此标识符中的东西,如下所示:

<HTML>

<HEAD>

<TITLE> Simple Style </TITLE>

<STYLE>

<!--

BODY {font-size: 24pt}

P {font-style: italic}

-->

</STYLE>

</HEAD>

<BODY>

This text is above the paragraph.

<P> This text is inside the paragraph. </P>

</BODY>

</HTML>

当这个HTML文件在浏览器上显示时,所有的文字将以24点大小的字体显示出来(见图7.20)。甚至位于<P>标 识符内部的文字也以24点大小的字体显示,这是因为<P>标识符位于<BODY>标识符内部。然而,仅 仅位于<P>标识符内部的文字以斜体显示出来。

 

图7.20 为<BODY>和<P>使用的规则

当两条规则冲突时会发生什么呢?例如,假设在上例中为<P>标识符设定的规则指定文字以10点大小的字体显示,在这 种情况下,在<P>标识符中指定的类型将会起作用。通常,为子元素设定的规则将会覆盖为包含这个元素的父标识符所设 定的规则。

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


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

在HTML标识符的Class中加入Styles

假设你想为网页上特定的段落设定规则,而不是全部的内容。例如,你可能想让网页上的第一段以24点大小的字体显示,而第二段则以 14点的大小显示,要利用Style Sheets实现这一点,你必须找到一种方法来区别不同的<P>标识符。

一个特殊的属性专门为这一目的而被引入,每一个HTML标识符都有一CLASS属性,它是用来将标识符分隔成不同的部分,下面的 例子说明了如何使用这个属性:

<HTML>
<HEAD>

<TITLE> Style </TITLE>

<STYLE>

<!--

P.TheFirstClass {font-size: 24pt}

P.TheSecondClass {font-size: 14pt}

-->

</STYLE>

</HEAD>

<BODY>

<P CLASS=「TheFirstClass」>

I am the first paragraph and I am formatted with a 24 point font.

</P>

<P CLASS=「TheSecondClass」>

I am the second paragraph and I am formatted with a 14 point font.

</P>

</BODY>

</HTML>

位于两个<P>标识符之间的文字将以不同大小的字体显示出来(见图7.21)。这两个段落分别由它们的CLASS属 性区别开来,例如,第一个段落与名为TheFirstClass的class相关联,而第二个段落则与名为TheSecondC lass的class相关联。

 

图7.21 使用CLASS标识符

当指定了这些规则后,它们就和特定的class相关联。例如,第一个规则通过使用class选择符P.TheFirstClas s与第一个class:TheFirstClass相关联。class选择符可用来区别一个标识符中不同的class,第一个段 落的格式由第一个规则决定,因为这条规则选择了与class:TheFirstClass相关联的所有<P>标识符 。

不只一个<P>标识符可成为同一个class的成员。例如,假设有第三个<P>标识符被添加进上述HT ML文件中,并指定属性CLASS=「TheFirstClass」,则处于这个新的<P>标识符中的文字也受第一 条规则的控制,第一条规则将作用于所有具备属性CLASS=「TheFirstClass」的段落中。

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


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

在class中加入styles

本章到此为止,Style Sheets规则只与一些特定类型的HTML标识符相关联,然而你也可以让规则与一个class相关联而并不与任何一个特定的标 识符关联。来看下面的例子:

<HTML>

<HEAD>

<TITLE> Style </TITLE>

<STYLE>

<!--

.FreeClass {font-size: 24pt}

-->

</STYLE>

</HEAD>

<BODY>

<B CLASS=「FreeClass」>

I am bold and I am formatted with a 24 point font.

</B>

<P CLASS=「FreeClass」>

I am the second paragraph and I am formatted with a 24 point font.

</P>

</BODY>

</HTML>

在此例中,<B>和<P>标识符都与同一个class关联,位于<B>和<P> ;标识符内的文本都将以24点大小的字体显示。规则没有与任何一个HTML标识符关联,相反它只与class:FreeClas s关联。

注意

在规则中指定class选择符时不要忘记在前面加上点号。如果你忘记了这个点号,浏览器就会认为你正试图为规则选定一个HTML 标识符而不是一个class。

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


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

根据上下文为HTML标识符加上styles

假设你想让一个列表中的黑体字以Courier字体显示出来,然而你不想让列表之外的文字或非黑体的文字以Courier字体显 示(见图7.22),有许多办法可以实现这一功能。使用Style Sheets,你可以专门建立一个class,将它与列表中出现的<B>标识符关联。然而,还有第二种有趣得多的方 法来实现这一效果,你可以将一个规则仅仅与特定的内容相关联,例如,你可以定义一个规则,它仅仅当文字是处于列表中并是黑体时才 起作用,而对其它内容不起作用。下面例子所示的规则使用了上下文选择符:

<HTML>

<HEAD>

<TITLE> Style </TITLE>

<STYLE>

<!--

UL B {font-family: Courier}

-->

</STYLE>

</HEAD>

<BODY>

<B> I am bold but not in the Courier typeface </B>

<UL>

<LI> I am plain, but I am <B> bold and use Courier! </B>

<LI> Yes, but I am <B> bold and use Courier </B> as well!

</UL>

</BODY>

</HTML>

 

图7.22 使用上下文选择符

注意这个规则中的选择符,它包含了两个HTML标识符,而这两个标识符没有用逗号隔开,这个选择符只有当<B>位于 <UL>标识符中时才提供,位于<B>中而不属于列表的文字将不会受此规则的影响。

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


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

为单一的HTML标识符加上styles

每个HTML标识符的CLASS属性允许你将同一个规则与一组标识符相关联,然而,你可能想让一条规则只作用于单个元素而对其它 无影响。每个HTML标识符都有一个属性来让你实现这一点,ID属性可以用来唯一地指定一个标识符。来看下面的例子:

<HTML>

<HEAD>

<TITLE> Style </TITLE>

<STYLE>

<!--

#bigfont {font-size: 24pt}

-->

</STYLE>

</HEAD>

<BODY>

<B ID=「bigfont」> I am bold and I am formatted with a 24 point font. </B>

<B> I am bold but I use the default font. </B>

</BODY>

</HTML>

考虑用于这条规则的选择符,它前面没有点号,因此它并不是选择一个class,而且它也不是任何一个HTML标识符,这个选择符 指定了HTML文件中的一个个别元素。

ID属性用起来很像<A>标识符的NAME属性,要引用一个HTML标识符的ID属性,你需要在ID前面加上一个# 号,你切记不要为多个HTML标识符指定同一个ID,当然ID属性的全部目的只是作为个别元素的确认符。

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


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

使用SPAN和DIV来加入styles

假设你想让某一段落的前一半以Courier字体显示,而后一半则以Arial字体显示,使用前面所述的Style sheet的标识符及其属性,没有一个直接的办法来实现这一目的。问题在于你不想将一个style与一整段文字关联,你只想将s tyle与段落中不同的部分相关联。

很幸运,存在一个特殊的标识符,你可以用它来将规则与HTML文件中特定的部分相关联,使用<SPAN>标识符,你 可以将一个style与一大段文本中的某一部分相关联。如下所示:

<HTML>

<HEAD>

<TITLE> Style </TITLE>

<STYLE>

<!--

.CourierPart {font-family: Courier}

.ArialPart {font-family: Arial}

-->

</STYLE>

</HEAD>

<BODY>

<P>

<SPAN CLASS=CourierPart> I am the first part of this paragraph. </SPAN>

<SPAN CLASS=ArialPart> I am the second part of this paragraph. </SPAN>

</P>

</BODY>

</HTML>

<SPAN>标识符有一个「重要和绝妙」的特性,即它什么事也不会做。将<SPAN>标识符看作是为C LASS和ID属性设立的一个方便的钩子,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定styl e了。在此例中,<SPAN>标识符允许你将一个段落分成不同的部分。

还有一个标识符具有类似的功能,<DIV>标识符也被用来在HTML文件中建立逻辑部分。但与<SPAN&g t;标识符不同,<DIV>工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。

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


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

控制文本的字体

我们已经向你介绍了font-family属性,这个属性决定了文字的字体(见图7.23)。下面的例子说明了怎样使用这个属性 :

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.Courier {font-family: Courier}

.Arial {font-family: Arial}

.Times {font-family: 「Times New Roman」}

.Comic {font-family: 「Comic Sans MS」}

-->

</STYLE>

</HEAD>

<BODY>

<P CLASS=Courier> I am Courier. </P>

<P CLASS=Arial> I am Arial. </P>

<P CLASS=Times> I am Times New Roman. </P>

<P CLASS=Comic> I am Comic Sans MS. </P>

</BODY>

</HTML>

 

图7.23 不同字体的例子

你不能保证每个字体在所有显示你网页的计算机上都能找到,不同的计算机对安装的字体有不同的设置,甚至在计算机上安装了同一个字 体,它也可能具有不同的名字。下面有两个方法你可以用来解决这一问题。

首先,当某个特定的字体不存在时,你可以指定一个备用字体来以防万一。在一个规则的声明中,你可以用逗号分隔的方式建立一个备用 字体的列表。例如,你可以使用下面的规则来指定当Arial字体不存在时就使用Helvetica字体:

.MyTypeFace {font-family: Arlal,Helvetica}

根据Cascading Style Sheet规范,你也可以在这个列表中指定一个备用的generic font family。一个generic font family中并不指定某种特定的字体,它只是指定要使用的字体应该具有什么特征。你可以使用下面五种generic font family中的任何一个:serif、sans、cursive、fantasy及monospace。

 

注意

当你在internet Explorer中提供一个备用字体的列表时,要用引号将它们括起来。

然而,你要记住不同的计算机对这些generic font family具有不同的代表,换句话说,如果你没有安装正确的字体,generic font family将不会正常工作。你应当使用一个generic font family的名字来作为一个备用字体列表中的最终备用物。

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-size属性来控制你的文字的大小,你可以为此属性指定绝对值或相对值。下面的例子说明了如何使用这个 属性(见图7.24):

 

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.MySmallFont {font-size: small}

.MyMediumFont {font-size: 12pt}

.MyLargeFont {font-size: 150%}

.MyLargerFont {font-size: Larger}

-->

</STYLE>

</HEAD>

<BODY>

<P CLASS=MySmallFont> I am the small font. </P>

<P CLASS=MyMediumFont> I am the medium font. </P>

<P CLASS=MyLargeFont> I am the large font. </P>

<P CLASS= MyLargerFont > I am the larger font. </P>

</BODY>

</HTML>

根据第一条规则,字体的大小是small。当你指定字体大小时,你可以使用下面的七个关键字:xx-small、x-small 、small、medium、large、x-large及xx-large,这是一个为font-size属性提供绝对值的方 法。

 

 

图7.24 字体大小的例子

 

根据第二个属性,字体大小应该为12个点。当你指定字体大小时,你可以使用许多不同的度量单位。可以使用的度量单位有:英寸(i n)、点(pt)、象素(px)、厘米(cm)、picas(pc)、毫米(mm)和ems(em),当你指定这些单位时,应该 使用它们的缩写。

注意

Internet Explorer 3.0仅仅能识别厘米(cm)、英寸(in)、毫米(mm)、picas(pc)、点(pt)以及象素(px)。

 

第三个规则为字体大小指定了一个相对尺寸,根据这条规则,字体大小被设为缺省字体大小的一点五倍。相对大小是根据当前字体的大小 进行计算的。

最后,第四条规则使得字体大小比当前的字体大一号,这是第二种指定相对尺寸的方法。你可以使用关键字larger和smalle r来改变字体的大小。在图7.24中,最后两行文字的大小一样,这是因为关键字larger将字体大小设为原始字体大小的1.5 倍。

 

注意

Internet Explorer 3.0不能识别larger和smaller关键字。

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.1729 seconds.

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