HTML 4.01 快速導覽 - <link /> 外連標籤

<link /> 標籤 (tag) ,主要用途為連結外部的樣式表 (style sheet) 。



起始標籤結束標籤
需要不需要


<link> 有幾個屬性
屬性Deprecated or Obsolete
charset文件編碼,預設為 ISO-8859-1Obsolete
href資源網址
hreflang資源網址的語言
media媒體型態,通常是指樣式表
rel資源文件與目前文件的關係
rev同 relObsolete
typetext/html
text/css


例如我們有以下的 CSS 檔案
p {
    background-color: black;
    color: white;
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名:example09.css
    功能:示範 HTML 4.01 標記語言的使用 
    作者:張凱慶
    時間:西元 2011 年 5 月 */


CSS 檔案的副檔名為 .css ,註釋標記與 C 語言相同。


下面的 example09.html 連結到 example09.css
<html>
<head>
<title>網頁標題</title>
<link type="text/css" rel="stylesheet" 
 href="example09.css" />
</head>
<body>
<p>You ever have that feeling where you're not sure if
 you're awake or still dreaming?</p>
<p>A prison for your mind.</p>
<p>Free your mind.</p>
<p>Believe the unbelievable.</p>
<p>There is no spoon.</p>
<p>I can only show you the door, you have to walk 
through it.</p>
<p>Choice. The problem is choice.</p>
<p>Then tomorrow we may all be dead, but how would that 
be different from any other day?</p>
<p>I have dreamed a dream, but now that dream has gone 
from me.</p>
<p>Choice is an illusion, created between those with 
power, and those without.</p>
<p>Because I choose to.</p>
<p>Everything that has a beginning has an end.</p>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:example09.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


用瀏覽器 (broswer) 開啟,如下



其中 <link /> 這一行
<link type="text/css" rel="stylesheet" 
 href="example09.css" />


type 屬性 (attribute) 設定為 text/css , rel 為 stylesheet ,這是對 CSS 檔案的設定值, href 則是設定成 CSS 檔案的路徑,這裡,由於 example09.html 與 example09.css 在相同資料夾內,所以直接寫 example09.css 的檔名。


如果是連到外部伺服器的樣式表,就得寫完整的連結路徑了,例如本站所使用的 SyntaxHighlighter 語法高亮度系統
<html>
<head>
<title網頁標題</title>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" 
 rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"
 rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" 
 type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" 
 type="text/javascript"></script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>
</head>
<body>
以下為 Java 程式
<pre name="code" class="brush: java;">class DemoApp {
    public static void main(String[] args) {
        Demo d = new Demo();
        d.printMessage();
    }
}

class Demo {
    String message = "^_^ 哈囉";
    
    public void printMessage() {
        System.out.println(message);
    }
}

/* 《程式語言:教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名:DemoApp.java
    功能:簡單的 Java 範例
    作者:張凱慶
    時間:西元 2010 年 10 月 */</pre>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:example10.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


用瀏覽器開啟如下



中英文術語對照
標籤tag
樣式表style sheet
瀏覽器broswer
屬性attribute


您可以繼續參考



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


參考資料

沒有留言: