- 行內套用 (Inline)
- 嵌入套用 (Embed)
- 外部連接套用 (External Link) & 匯入套用 (Import)
簡單的來說，就是在任何一個 HTML 標籤裡，再外加一個 style 的屬性即可使用CSS的語法，優缺點其實跟網頁內義是一樣的，就不在重覆了，語法如下：
<table style="background-color:blue; color:#FFFFFF ">
嵌入套用 (Embed)
也就是直接輸入在網頁中，一般來說只要放入<head> </head>裡的任何一個地方都行，如：
<head>
<style type="text/css">
<!--
hr {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 2px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: dotted;
border-left-style: none;
border-bottom-color: #0066FF;
}
-->
</style>
</head>
使用起來的很直覺，也很好修改，但是將來不好做維護，因為網站裡每個網頁裡都會有這些東西，也會重覆，將來要改 body 的 background-color ，就需要將所有網頁一一開啟修正、儲存、測試，才完成修改，如果這些網頁有幾百頁或千頁，那你這輩子不就為了這些頁面在浪費你的生命嗎？
外部連接套用 (External Link) & 匯入套用 (Import)
這種方式是 CSS 中最好用也最好管理的一種方式，而在這種使用方式下，所有的 CSS 樣式表的語法都是存在另外一個檔案中。
該檔案通常名稱為 .css（其實不用取名為 .css 也行但是大多取名為 .css）。
緊接著在 HTML 文件的 <header> </header> 之中，將用以下的方式將 .css 檔案連結進來：
而在網頁裡的檔頭需要引入使用的時候有二種不同的寫法：
第一種是：LINK (連結樣式表)
<link rel="stylesheet" type="text/css" href="MYCSS.css">
第二種是：IMPORT (匯入樣式表)
<style type="text/css">
<!--
@import url("MyCSS.CSS")
-->
</style>
需要連結進來的 CSS 檔案內容大至如下圖所示：
而 LINK(連結樣式表) 與 IMPROT(匯入樣式表) 這二種連結方式有什麼差異呢？
我想啊！光看字面大概就能猜到八九成了，這二種不同的連結方式，在外觀及功能上是完全相同的，也就是光看結果，你是完全看不出有任何的差異性， 這二種只有運作方式不同。如果你是使用 IMPROT(匯入樣式表) 的方式匯入樣式檔案， 那瀏覽器在讀取 CSS 時，會將樣式表複製一份到網頁內（這種方式會像是嵌入套用，但是保有統一管理的好處。）； 如果使用 LINK(連結樣式表) ，瀏覽器會再需要 CSS 時， 才會去向 CSS 檔案裡尋找所需要的樣式。
PS:其實 IMPROT(匯入樣式表) 可以跟 LINK(連結樣式表) 一起使用，但是其實不建議這麼使用，相互連結到最後，人通常都會搞不清楚到底誰比誰的權利大。
0 Comments:
張貼留言