CSS 2.1 快速導覽 - URLs

URL 為 Uniform Resource Locator 的頭字母縮寫詞，中文是統一資源定位器，也就是俗稱的網址。另有一個 URI 的頭字母縮寫詞，這是把 Locator 改成 Identifier ， URL 與 URI 的細節不太一樣，不過我們認識兩者都代表網址就可以了。



由於 HTML 與 CSS 都是純文字文件，因此舉凡圖片、影像、聲音、動畫等多媒體檔案都需要使用存取其他伺服器的資源，例如我們拿 http://www.example.com/example.jpg 當成網頁的背景圖
body {
    background: url(http://www.example.com/example.jpg);
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：demo18_1.css
    功能：示範 CSS 2.1 樣式表的使用 
    作者：張凱慶
    時間：西元 2011 年 7 月 */


http://www.example.com/ 為慣用的範例網址，僅作為示範之用。


CSS 中寫網址，需要用到函數化的標記，也就是 url() ，然後以資源網址當作參數。


我們另舉一例如下，使用維基百科的共享資源圖片
body {
    background: url(http://upload.wikimedia.org/wikipedia/commons/2/29/The.Matrix.glmatrix.3.png);
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：demo18.css
    功能：示範 CSS 2.1 樣式表的使用 
    作者：張凱慶
    時間：西元 2011 年 7 月 */


此圖片的網址在 http://commons.wikimedia.org/wiki/File:The.Matrix.glmatrix.3.png


我們以下面的 HTML 文件載入
<html>
<head>
<title>網頁標題</title>
<link rel="stylesheet" type="text/css" 
      href="demo18.css">
</head>
<body>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：demo18.html
     功能：示範 CSS 2.1 樣式表的使用 
     作者：張凱慶
     時間：西元 2011 年 7 月 -->


瀏覽器 (broswer) 開啟如下



中英文術語對照
統一資源定位器Uniform Resource Locator, URL
函數function
瀏覽器broswer


您可以繼續參考

基本概念
單位
選取器
@import 規則
階層
元素呈現方式 display


相關目錄
CSS 2.1 快速導覽
HTML, CSS 教材
首頁


參考資料

http://www.w3.org/TR/CSS21/syndata.html
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)