CSS布局探密02

css在頁面裡面有三種引入方式:

1.在頁面裡面直接寫(在HEADER區)

body{margin:0PX;padding:0PX;}

</style>

2.用link進行引用

3.用import進行引用

@import url(main.css);

</style>

第一種是直接在html頁面上進行css書寫，而第二種和第三種則是采用外部引用樣式檔案。

那麼到底link和@import有什麼差別？

其實link和@import的最根本差別就是，link是一個html的一個标簽，而@import是css的一個标簽,

link除了調用css外還可以有其他作用譬如聲明頁面連結屬性，聲明目錄，rss等等，而@import就隻能

調用css。如果單獨從外部引用css來說，他們的作用是基本一樣的。

要用javascript進行樣式選擇

這個時候就要用link,因為link是html元素，可用javascript去控制dom元素最後達到改變樣式的效果。

看下列代碼：

CSS布局探密02

Code

1 <link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />

3 <link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" title="orange" />

5 <link rel="alternate stylesheet" href="/css/blue.css" type="text/css" media="screen" title="blue" />

7 <link rel="alternate stylesheet" href="/css/pink.css" type="text/css" media="screen" title="pink" />

9 <link rel="alternate stylesheet" href="/css/slate.css" type="text/css" media="screen" title="slate" />

這是一段很經典的改變頁面風格的代碼，因為我們今天主要講的是link和import，是以我這裡隻列出了引用css部分。

我們先來看看link裡面各個屬性都有什麼含義：

[1]rel:用來聲明連結對象的作用或者類型。

譬如上面的的代碼：”stylesheet”表示連結一個預設的css,而”alternate stylesheet”則表示備選的css

[2]href:這個就不用我說了吧，引用css的檔案路徑。

[3]tyle:檔案類型

[4]media:應用的裝置，”screen”是說明應用在螢幕上。

[5]title:是css的名稱。

這段代碼中一共有5個css,第一個是基本樣式，而其他四個是風格樣式,利用javascript去控制預設顯示的樣式title就ok了。

在列印時應用列印樣式：

列印樣式顧名思義就是列印頁面時候的樣式。

這個樣式在普通浏覽下是沒有效果的，隻有在列印的時候生效。

如果要為頁面單獨引用列印樣式的話，link和@import都可以的。

link代碼

@import代碼

@import url(print.css) print;

</style>

另外對于多樣式還有一種 link 和 @import 的組合用法。

先用link引用一個css檔案：

然後在這個css檔案裡面再引用

@import url(../css/base/my.layout.css);

@import url(../css/base/my.typo.css);

</style>

這樣做的好處是，如果你一個站點所有頁面引用的樣式都是一樣的，而有又多個css，如果你每個頁面都加4,5個一樣的css樣式，卻是浪費代碼和精力，是以莫不如這樣做，所有一個頁面都引用一個css，然後一個css在引用多個css，友善管理和維護。

下面的網址有完整的切換css樣式的教程供參考：http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm