如果你是做網站的,肯定對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.gtalker.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.gtalker.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本身將有一個藍色背景和一個白色前景色,但是鏈接還是會根據瀏覽器的首選頂設置來應用樣式。最后往往會是藍色背景上的藍色文本,之間有白色的豎線將其分隔。
可以編寫一個規(guī)則,明確地將“工具條”中的鏈接設置為白色,不過通過使用inherit 可以更健壯地做到這一點。只需向樣式表增加以下規(guī)則:
#toolbar a {color: inherit;}
這會讓鏈接使用繼承的color值而不是用戶代理的默認樣式。正常情況下,直接指定的樣式總會優(yōu)先于繼承的樣式,但是通過使用inherit可以把情況反過來。
除了已經介紹的CSS2.1中的單位,CSS2還包含另外幾個單位,所有這些單位都與聲音樣式表有關(支持語音的瀏覽器會使用這種樣式表)。這些單位并沒有包含在CSS2.1中,但是由于它們可能是CSS將來版本的一部分,在此做一個簡單的討論。
角度值
用于定義給定的聲音從哪個位置發(fā)出。共有3種角度:度(deg)、梯度(grad)和弧度(rad)。例如,直角可以聲明為90deg、100grad或1.57rad;不論如何聲明,這些值都會解釋為0~360度范圍內的度數。負數值也是如此(允許是負數),-90deg 等同于270deg。
時間值
用于指定語音元素之間的延遲??梢员硎緸楹撩耄╩s),也可以表示為秒(s)。因此,100ms和0. 1s是相同的。時間值不能是負值,因為CSS的設計要求避免這種不可能的情況。
頻率值
用于為語音瀏覽器可以產生的聲音聲明一個給定頻率。頻率值可以表示為赫茲(Hz)或兆赫(MHz),而且不能是負值。值后面跟的標簽(Hz或MHz)不區(qū)分大小寫,因此10MHz和1OMhz是一樣的。
在寫這本書時,已經知道的支持所有這些值的唯一一個用戶代理是Emacspeak,這是一個聲音樣式表實現。有關聲音樣式的更多詳細信息見第14章。
除了這些值以外,還有一個“老朋友”,不過它有了一個新名字,這就是URI (Uniform Resource Identifier,統一資源標識符),這是統一資源定位符(Uniform Resource Locator, URL)的另一個名字。CSS2和CSS2.1規(guī)范都要求URI要以url (...)形式聲明,因此實際上沒有什么改變。
單位和值的覆蓋面很廣,從長度單位到描述效果(如underline)的特殊關鍵字,再到顏色單位,還包括文件(如圖像)的位置。大多數情況下,在單位方面,用戶代理幾乎能做到完全正確,不過也存在少量bug和奇怪問題會來煩你。例如,Navigator 4.x不能正確地解釋相對URL,這被許多創(chuàng)作人員過分夸大,以至于過分地依賴于絕對URL。用戶代理在顏色領域也幾乎完全勝任,但同樣不乏一些小問題。不過,由于存在太多不同的長度單位,盡管這絕對不是bug,但實際上這才是所有創(chuàng)作人員需要解決的一個有意思的問題。
這些單位都各有優(yōu)缺點,這取決于它們在什么情況下使用。我們已經了解了這樣的一些環(huán)境,本書余下的內容將重點討論這些場合,首先從CSS屬性開始,CSS屬性描述了如何改變文本的顯示方式。
當前文章標題:做網站中的url
當前URL:http://www.gtalker.cn/news/wzzz/web-page-url.html
上一篇:網頁設計中的長度單位
下一篇:字體在網頁設計中的運用