一种精确的webweb页布局和文图效果的实现方法_第1页
一种精确的webweb页布局和文图效果的实现方法_第2页
一种精确的webweb页布局和文图效果的实现方法_第3页
一种精确的webweb页布局和文图效果的实现方法_第4页
一种精确的webweb页布局和文图效果的实现方法_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

一种精确的webweb页布局和文图效果的实现方法

一、web系统样式表所有使用过删除网站的人都知道创建侵犯了某些元素，因此有必要制作体积较大的图形图像，以获得理想的文本和布局。有时候也不得不使用各种表格标签和隐藏的空格GIF图象以使页面的布局以达到预想的目的。因而,寻求一种能够精确地控制Web页布局和文图效果的实现方法显得尤为迫切。1996年底,诞生了一种叫做样式表(stylesheets)的技术。全称应该是串接样式表(CascadingStylesheets简称CSS)。这位HTML的“表弟”向世人保证:1.将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制;2.只通过修改一个文件就改变页数不定的网页的外观和格式;3.保证在所有浏览器和平台之间的兼容;4.更少的编码、更少的页数和更快的下载速度。除了还不能支持常用的部分浏览器外,CSS在实现其它承诺方面做的相当出色,为大部分的网页布局的精确控制和创新奠定了基石。实现的基本思路为:首先编写一个标准的HTML文件,再编写一个独立的样式表,通过它告诉浏览器如何解释具体文件。比如告诉浏览器将某段文字解释成12点的TimesRoman,并带有1.5英寸的边界,标题是绿色的40点Helvetica文字等等。然后,在HTML文件的头部指向样式表,最后将HTML文件和样式表一起发布到服务器。可以将很多HTML文件指向一个样式表。通过改变这个样式表,有效地改变整个Web站点。另外,还可以有一些不同的样式表。每一样式表对应不同的文件。比如,其中一个定义所有文件的边界,其他样式表描述不同文件的样式结构,或改变以前的设置。二、实现方法1.生成样式表时注意使用条件所有的样式表信息都列于HTML文件的顶部,同<BODY>分列,例:<STYLETYPE="text/css"><!--H1{color:green;font-family:impact}P{background:yellow;font-family:courier}--><TITLE>MyFirstStylesheet</TITLE><BODY>.……这里需要注意TYPE="text/css"属性和注释标签。TYPE="text/css"设定采用MIME类型,这样以来,不支持CSS的浏览器可以忽略样式表。注释标签(<!--和-->)更为重要。有些老的浏览器(如MAC机用的IE2.0)即使在设定了TYPE="text/css"属性时也不能忽略样式表继续执行下面的命令,而且还会显示样式表的代码。而使用注释标签则可以避免发生这种情况。植入样式表规则后,浏览器在整个HTML页面中都执行该规则。此方法适用于对网页一次性加入样式表。2.生成table设计文件这里是样式表功能发挥得淋漓尽致的地方。将多个HTML文件都链接到一个中心样式表文件。这个外部的样式表文件将设定所有页面的规则。如果改变样式表文件中的某一细节,所有页面都会随之改变。使用方法:产生一个普通的页面,但使用<STYLE>规则,而是在<HEAD>内使用<LINK>标签:<TITLE>MyFirstStylesheet</TITLE><LINKREL=stylesheetHREF="mystyles.css"TYPE="text/css">……使用链接的样式表时,无须使用注释标签。现在生成一个单独的文本文件,起名mystyles.css(任意起名)。文件内容如下:H1{color:green;font-family:impact}P{background:yellow;font-family:courier}如同发布HTML文件那样,将这个CSS文件发布到服务器中。在浏览器中观看时,会发现浏览器将依照链接标签将链接了的HTML网页按照样式表的规则显示,在HREF属性中可以选择使用绝对或相对URL。3.隐私规则的生成输入外部样式表的方法同链接的方法类似。不同之处在于链接方法不能同其它方法结合使用,但输入法则可以。例:<STYLETYPE="text/css"><!--@importnrl(company:css);H1{color:orange;font-family:impact}--><TITLE>MyFirstStylesheet<Hl>Stylesheets:TheTooloftheWebDesignGods</H1><P>Amazeyourfriends!Squashyourenemies!</P>而其中输入的company.css文件内容如下:Hl{color:green;font-family:times}P{background:yellow;font-family:courier}本例中,浏览器首先输入company.css的规则(@import必须打头),然后加入移植的规则,从而为这个网页产生规则集合。请注意,对于Hl在外部样式表文件和植入的样式表中都设定了规则。在两者冲突的情况下,浏览器应执行哪一项规则呢?植入的规则此时将占上风。由于输入样式表的灵活性,可以输入无数多个样式表,并可以按照自己的喜好用植入的样式表凌驾于输入的样式表之上。4.美国互联网5.2样式表你还可以在HTML行中加入样式规则,如:<TITLE>MyFirstStylesheet</TITLE><H1STYLE="color:orange;font-family:impact">Stylesheets:TheToolofWebDseignGods</H1><PSTYLE="background:yellow;font-family:courier">Amazeyourfriends!Squashyourenemies!</P>本例中,无须在HTML顶部加入样式表代码。加入行内的样式表属性将使浏览器同样执行样式表规则。该方法不方便之处在于:必须在每行中都加入样式表规则,否则下一行时浏览器将转回到文件的缺省设置。加入行内的样式表相比不如植入、链接及输入的样式表那样功能强大,但有时候它也很有用。在一个HTML文件中,如果有三种不同的样式表规则都使用P作为其选择。输入的样式表指示浏览器将<P>文字用红色显示,而植入的样式表指示浏览器用蓝色显示,而行内样式表指示浏览器用黄色。三、生成的现代文件与一般程序的冲突支持样式表的浏览器自身配有样式表的串接顺序来应付这种情形。总有几种样式表规则要比其它的规则更重要。根据正式的规定,以下为样式表的串接顺序:1.Inlinestyles(行内样式)2.Embeddedstyles(植入样式)3.Linkedstyles(链接样式)4.Importedstyles(输入样式)浏览器将按照上述顺序执行样式表的指令。如果同一种类的多个规则,相互冲突,这时仍有一个顺序,但很复杂。这里有一个极其简单的解决顺序:使用特别说明的样式规则,例:BODY{color:green}P{color:red}有一项规则特别说明<P>中的文字用红色显示,但它同时也继承了<BODY>的绿色规定。但是特别说明了的规则的重要性要大于继承的规则,所以<P>之内的文字用红色显示。应用继承的样式表规则按照样式表规则在HTML中的显示顺序执行。P{color:green}P{color:red}当无法适用上述规则时,浏览器将根据规则在代码中显示顺序执行。在上例中,<P>同的文字红色显示,因为它是最后给出的规则。需要指出,正式的串接样式表规定对于串接顺序有更详细的规定。但由于执行规定NetscapeCommunicator和InternetExplorer都不支持,所以不再赘述。下面通过例子对样式表规则同HTML标签冲突时的处理作一说明:I{font-family:impact}<P>Ithink<I><FONTFACE="Times">EastofEden</FONT></I>isSteinbeck’sbestnovel.</P>该例中样式表规则要求浏览器使用Impact,但是传统的HTML<FONTFACE

人人文库> 全部分类> 专业文献 > 学术论文

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论