做網(wǎng)站中的url

  • 2018-09-06 07:10:28
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://m.supportcoffeeroasters.com

如果你是做網(wǎng)站的,肯定對(duì)URL (或者在CSS2.1中稱(chēng)為URI)很熟悉。如果需要引用一個(gè)URL (如@import語(yǔ)句中,導(dǎo)入外部樣式表時(shí)就會(huì)使用這條語(yǔ)句),一般格式則為:

url(protocol://server/pathname)

這個(gè)例子定義了一個(gè)所謂的絕對(duì)URL (absolute URL)。這里的絕對(duì)是指,不論這個(gè)URL 放在哪里(或者放在哪個(gè)頁(yè)面上),它都能正常工作,因?yàn)樗x了網(wǎng)站空間中的一個(gè)絕對(duì)位置。假設(shè)你有一個(gè)名為www.waffle.org的網(wǎng)站服務(wù)器。該服務(wù)器上有一個(gè)名為pix 的目錄,在這個(gè)目錄中有一個(gè)圖像waffle22.gif。這種情況下,該圖像的絕對(duì)URL將是:

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

不管這個(gè)URL放在哪里,它都是合法的,而不論包含這個(gè)URL的頁(yè)面在服務(wù)器m.supportcoffeeroasters.com 上還是在web.pancakes.com 上。

另一種URL是相對(duì)URL (relative URL),之所以得名是因?yàn)樗付ǖ氖且粋€(gè)相對(duì)于該URL所在文檔的位置。如果指向一個(gè)相對(duì)位置,如Web頁(yè)面所在目錄中的一個(gè)文件,則一般格式為:

url(pathname)

如果圖像與包含該URL的頁(yè)面在同一個(gè)服務(wù)器上,這就能正常工作。為了說(shuō)明這一點(diǎn),假設(shè)有一個(gè)位于/index.asp的頁(yè)面,而且希望這個(gè)貝面上出現(xiàn)圖像waffle22.gif。在這種情況下,URL將是:

pix/waffle22.gif

這個(gè)路徑是合法的,因?yàn)閃eb瀏覽器知道它要從Web文檔所在位置開(kāi)始,然后加上這個(gè)相對(duì)URL來(lái)找到圖像。在這里,路徑名pix/waffle22.gif要增加到服務(wù)器名http://m.supportcoffeeroasters.com,得到了/pix/waffle22.gif。使用相對(duì)URL 的地方幾乎總能用一個(gè)絕對(duì)URL取而代之,使用哪一種URL并不重要,只要它能定義一個(gè)合法的位置。

在CSS中,相對(duì)URL要相對(duì)于樣式表本身,而不是相對(duì)于使用該樣式表的HTML文檔。例如,可能有一個(gè)外部樣式表,其中導(dǎo)入了另一個(gè)樣式表。如果使用相對(duì)URL來(lái)導(dǎo)入第二個(gè)樣式表,它必須相對(duì)于第一個(gè)樣式表。舉例來(lái)說(shuō),來(lái)考慮一個(gè)位于waffles.org/toppings/tips.html 的 HTML 文檔,它包含一個(gè)指向樣式表waffles.org/styles/basic.css 的鏈接:

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

href="/styles/basic.css">

在文件basic.css中有一個(gè)@import:語(yǔ)句指向另一個(gè)樣式表:

@import url(special/toppings.css};

這個(gè)@import會(huì)導(dǎo)致瀏覽器查找位于http://www.waffles.org/styles/special/toppings.css的樣式表,而不是在/toppings/special/toppings.css 查找樣式表。如果在后面這個(gè)位置上有一個(gè)樣式表,那么basic.css中的@import應(yīng)當(dāng)讀作:

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

警告:Netscape Navigator 4會(huì)相對(duì)于HTML文檔而不是相對(duì)于樣式表解釋相對(duì)URL。如果有很多NN4.X用戶(hù)訪(fǎng)問(wèn)你的網(wǎng)頁(yè),或者如果你想確保NN4.X能找到你的所有樣式表和背景圖像,通常最容易的做法是讓所有URL都是絕對(duì)URL,因?yàn)镹avigator可以正確地處理絕對(duì)URL。

注意,url和開(kāi)始括號(hào)之間不能有空格:

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

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

如果存在空格,整個(gè)聲明都將無(wú)效,以至于被忽略。

關(guān)鍵字

有時(shí)一個(gè)值需要用某個(gè)詞來(lái)描述,這種詞就稱(chēng)為關(guān)鍵字。對(duì)此一個(gè)很常見(jiàn)的例子就是關(guān)鍵字none,它不同于0(零)。因此,要去除一個(gè)HTML文檔中鏈接的下劃線(xiàn),應(yīng)寫(xiě)作:

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

類(lèi)似地,如果想對(duì)鏈接加下劃線(xiàn),則要使用關(guān)鍵字underline。

如果一個(gè)屬性接受關(guān)鍵字,那么其關(guān)鍵字將只針對(duì)該屬性的作用域定義。如果兩個(gè)屬性都使用同一個(gè)詞作為關(guān)鍵字,一個(gè)屬性的關(guān)鍵字與另一個(gè)屬性的同一關(guān)鍵字可能就有不同的行為。舉例來(lái)說(shuō),為letter-spacing定義的normal與為font-style定義的normal含義就大不相同。

inherit

CSS2.1中有一個(gè)關(guān)鍵字是所有屬性共有的,這就是inherit。inherit使一個(gè)屬性的值與其父元素的值相同。在大多數(shù)情況下,不必指定繼承,因?yàn)榇蠖鄶?shù)屬性本身會(huì)自然地繼承,不過(guò),inherit還是很有用的。

例如,考慮以下樣式和標(biāo)記:

#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本身將有一個(gè)藍(lán)色背景和一個(gè)白色前景色,但是鏈接還是會(huì)根據(jù)瀏覽器的首選頂設(shè)置來(lái)應(yīng)用樣式。最后往往會(huì)是藍(lán)色背景上的藍(lán)色文本,之間有白色的豎線(xiàn)將其分隔。

可以編寫(xiě)一個(gè)規(guī)則,明確地將“工具條”中的鏈接設(shè)置為白色,不過(guò)通過(guò)使用inherit 可以更健壯地做到這一點(diǎn)。只需向樣式表增加以下規(guī)則:

#toolbar a {color: inherit;}

這會(huì)讓鏈接使用繼承的color值而不是用戶(hù)代理的默認(rèn)樣式。正常情況下,直接指定的樣式總會(huì)優(yōu)先于繼承的樣式,但是通過(guò)使用inherit可以把情況反過(guò)來(lái)。

CSS2單位

除了已經(jīng)介紹的CSS2.1中的單位,CSS2還包含另外幾個(gè)單位,所有這些單位都與聲音樣式表有關(guān)(支持語(yǔ)音的瀏覽器會(huì)使用這種樣式表)。這些單位并沒(méi)有包含在CSS2.1中,但是由于它們可能是CSS將來(lái)版本的一部分,在此做一個(gè)簡(jiǎn)單的討論。

角度值

用于定義給定的聲音從哪個(gè)位置發(fā)出。共有3種角度:度(deg)、梯度(grad)和弧度(rad)。例如,直角可以聲明為90deg、100grad或1.57rad;不論如何聲明,這些值都會(huì)解釋為0~360度范圍內(nèi)的度數(shù)。負(fù)數(shù)值也是如此(允許是負(fù)數(shù)),-90deg 等同于270deg。

時(shí)間值

用于指定語(yǔ)音元素之間的延遲??梢员硎緸楹撩耄╩s),也可以表示為秒(s)。因此,100ms和0. 1s是相同的。時(shí)間值不能是負(fù)值,因?yàn)镃SS的設(shè)計(jì)要求避免這種不可能的情況。

頻率值

用于為語(yǔ)音瀏覽器可以產(chǎn)生的聲音聲明一個(gè)給定頻率。頻率值可以表示為赫茲(Hz)或兆赫(MHz),而且不能是負(fù)值。值后面跟的標(biāo)簽(Hz或MHz)不區(qū)分大小寫(xiě),因此10MHz和1OMhz是一樣的。

在寫(xiě)這本書(shū)時(shí),已經(jīng)知道的支持所有這些值的唯一一個(gè)用戶(hù)代理是Emacspeak,這是一個(gè)聲音樣式表實(shí)現(xiàn)。有關(guān)聲音樣式的更多詳細(xì)信息見(jiàn)第14章。

除了這些值以外,還有一個(gè)“老朋友”,不過(guò)它有了一個(gè)新名字,這就是URI (Uniform Resource Identifier,統(tǒng)一資源標(biāo)識(shí)符),這是統(tǒng)一資源定位符(Uniform Resource Locator, URL)的另一個(gè)名字。CSS2和CSS2.1規(guī)范都要求URI要以u(píng)rl (...)形式聲明,因此實(shí)際上沒(méi)有什么改變。

小結(jié)

單位和值的覆蓋面很廣,從長(zhǎng)度單位到描述效果(如underline)的特殊關(guān)鍵字,再到顏色單位,還包括文件(如圖像)的位置。大多數(shù)情況下,在單位方面,用戶(hù)代理幾乎能做到完全正確,不過(guò)也存在少量bug和奇怪問(wèn)題會(huì)來(lái)煩你。例如,Navigator 4.x不能正確地解釋相對(duì)URL,這被許多創(chuàng)作人員過(guò)分夸大,以至于過(guò)分地依賴(lài)于絕對(duì)URL。用戶(hù)代理在顏色領(lǐng)域也幾乎完全勝任,但同樣不乏一些小問(wèn)題。不過(guò),由于存在太多不同的長(zhǎng)度單位,盡管這絕對(duì)不是bug,但實(shí)際上這才是所有創(chuàng)作人員需要解決的一個(gè)有意思的問(wèn)題。

這些單位都各有優(yōu)缺點(diǎn),這取決于它們?cè)谑裁辞闆r下使用。我們已經(jīng)了解了這樣的一些環(huán)境,本書(shū)余下的內(nèi)容將重點(diǎn)討論這些場(chǎng)合,首先從CSS屬性開(kāi)始,CSS屬性描述了如何改變文本的顯示方式。


當(dāng)前文章標(biāo)題:做網(wǎng)站中的url

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/web-page-url.html

上一篇:網(wǎng)頁(yè)設(shè)計(jì)中的長(zhǎng)度單位

下一篇:字體在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號(hào))