做网站中的url

  • 2018-09-06 07:10:28
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

如果你是做网站的,肯定对URL (或者在CSS2.1中称为URI)很熟悉。如果需要引用一个URL (如@import语句中,导入外部样式表时就会使用这条语句),一般格式则为:

url(protocol://server/pathname)

这个例子定义了一个所谓的绝对URL (absolute URL)。这里的绝对是指,不论这个URL 放在哪里(或者放在哪个页面上),它都能正常工作,因为它定义了网站空间中的一个绝对位置。假设你有一个名为www.waffle.org的网站服务器。该服务器上有一个名为pix 的目录,在这个目录中有一个图像waffle22.gif。这种情况下,该图像的绝对URL将是:

/UploadFiles/2018-09-06/2018964941301724.gif

不管这个URL放在哪里,它都是合法的,而不论包含这个URL的页面在服务器www.lyjtt.cn 上还是在web.pancakes.com 上。

另一种URL是相对URL (relative URL),之所以得名是因为它指定的是一个相对于该URL所在文档的位置。如果指向一个相对位置,如Web页面所在目录中的一个文件,则一般格式为:

url(pathname)

如果图像与包含该URL的页面在同一个服务器上,这就能正常工作。为了说明这一点,假设有一个位于/index.asp的页面,而且希望这个贝面上出现图像waffle22.gif。在这种情况下,URL将是:

pix/waffle22.gif

这个路径是合法的,因为Web浏览器知道它要从Web文档所在位置开始,然后加上这个相对URL来找到图像。在这里,路径名pix/waffle22.gif要增加到服务器名http://www.lyjtt.cn,得到了/pix/waffle22.gif。使用相对URL 的地方几乎总能用一个绝对URL取而代之,使用哪一种URL并不重要,只要它能定义一个合法的位置。

在CSS中,相对URL要相对于样式表本身,而不是相对于使用该样式表的HTML文档。例如,可能有一个外部样式表,其中导入了另一个样式表。如果使用相对URL来导入第二个样式表,它必须相对于第一个样式表。举例来说,来考虑一个位于waffles.org/toppings/tips.html 的 HTML 文档,它包含一个指向样式表waffles.org/styles/basic.css 的链接:

<link rel="stylesheet" type="text/css"

href="/styles/basic.css">

在文件basic.css中有一个@import:语句指向另一个样式表:

@import url(special/toppings.css};

这个@import会导致浏览器查找位于http://www.waffles.org/styles/special/toppings.css的样式表,而不是在/toppings/special/toppings.css 查找样式表。如果在后面这个位置上有一个样式表,那么basic.css中的@import应当读作:

@import url{/toppings/special/toppings.css};

警告:Netscape Navigator 4会相对于HTML文档而不是相对于样式表解释相对URL。如果有很多NN4.X用户访问你的网页,或者如果你想确保NN4.X能找到你的所有样式表和背景图像,通常最容易的做法是让所有URL都是绝对URL,因为Navigator可以正确地处理绝对URL。

注意,url和开始括号之间不能有空格:

body {background: url(http://www.pix.web/picturel.jpg);}/* correct */

body {background: url (images/picture2.jpg);}  /* INCORRECT */

如果存在空格,整个声明都将无效,以至于被忽略。

关键字

有时一个值需要用某个词来描述,这种词就称为关键字。对此一个很常见的例子就是关键字none,它不同于0(零)。因此,要去除一个HTML文档中链接的下划线,应写作:

a:link, a:visited {text-decoration: none;}

类似地,如果想对链接加下划线,则要使用关键字underline。

如果一个属性接受关键字,那么其关键字将只针对该属性的作用域定义。如果两个属性都使用同一个词作为关键字,一个属性的关键字与另一个属性的同一关键字可能就有不同的行为。举例来说,为letter-spacing定义的normal与为font-style定义的normal含义就大不相同。

inherit

CSS2.1中有一个关键字是所有属性共有的,这就是inherit。inherit使一个属性的值与其父元素的值相同。在大多数情况下,不必指定继承,因为大多数属性本身会自然地继承,不过,inherit还是很有用的。

例如,考虑以下样式和标记:

#toolbar {background: blue; color: white;}

<div id="toolbar">

<a href="one.html">One</a>|<a href="two.html">Two</a>|<a href ="three.html">Three</a>

</div>

div本身将有一个蓝色背景和一个白色前景色,但是链接还是会根据浏览器的首选顶设置来应用样式。最后往往会是蓝色背景上的蓝色文本,之间有白色的竖线将其分隔。

可以编写一个规则,明确地将“工具条”中的链接设置为白色,不过通过使用inherit 可以更健壮地做到这一点。只需向样式表增加以下规则:

#toolbar a {color: inherit;}

这会让链接使用继承的color值而不是用户代理的默认样式。正常情况下,直接指定的样式总会优先于继承的样式,但是通过使用inherit可以把情况反过来。

CSS2单位

除了已经介绍的CSS2.1中的单位,CSS2还包含另外几个单位,所有这些单位都与声音样式表有关(支持语音的浏览器会使用这种样式表)。这些单位并没有包含在CSS2.1中,但是由于它们可能是CSS将来版本的一部分,在此做一个简单的讨论。

角度值

用于定义给定的声音从哪个位置发出。共有3种角度:度(deg)、梯度(grad)和弧度(rad)。例如,直角可以声明为90deg、100grad或1.57rad;不论如何声明,这些值都会解释为0~360度范围内的度数。负数值也是如此(允许是负数),-90deg 等同于270deg。

时间值

用于指定语音元素之间的延迟。可以表示为毫秒(ms),也可以表示为秒(s)。因此,100ms和0. 1s是相同的。时间值不能是负值,因为CSS的设计要求避免这种不可能的情况。

频率值

用于为语音浏览器可以产生的声音声明一个给定频率。频率值可以表示为赫兹(Hz)或兆赫(MHz),而且不能是负值。值后面跟的标签(Hz或MHz)不区分大小写,因此10MHz和1OMhz是一样的。

在写这本书时,已经知道的支持所有这些值的唯一一个用户代理是Emacspeak,这是一个声音样式表实现。有关声音样式的更多详细信息见第14章。

除了这些值以外,还有一个“老朋友”,不过它有了一个新名字,这就是URI (Uniform Resource Identifier,统一资源标识符),这是统一资源定位符(Uniform Resource Locator, URL)的另一个名字。CSS2和CSS2.1规范都要求URI要以url (...)形式声明,因此实际上没有什么改变。

小结

单位和值的覆盖面很广,从长度单位到描述效果(如underline)的特殊关键字,再到颜色单位,还包括文件(如图像)的位置。大多数情况下,在单位方面,用户代理几乎能做到完全正确,不过也存在少量bug和奇怪问题会来烦你。例如,Navigator 4.x不能正确地解释相对URL,这被许多创作人员过分夸大,以至于过分地依赖于绝对URL。用户代理在颜色领域也几乎完全胜任,但同样不乏一些小问题。不过,由于存在太多不同的长度单位,尽管这绝对不是bug,但实际上这才是所有创作人员需要解决的一个有意思的问题。

这些单位都各有优缺点,这取决于它们在什么情况下使用。我们已经了解了这样的一些环境,本书余下的内容将重点讨论这些场合,首先从CSS属性开始,CSS属性描述了如何改变文本的显示方式。


当前文章标题:做网站中的url

当前URL:http://www.lyjtt.cn/news/wzzz/web-page-url.html

上一篇:网页设计中的长度单位

下一篇:字体在网页设计中的运用

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)