@import css OR link css

來源:互聯網
上載者:User

http://www.360doc.com/content/070126/16/9936_345621.html

css在頁面裡面一般有三種引入方式
1.在頁面裡面直接寫
  

<style type="text/css">
   body{
     margin: 0;
    padding: 0;
   }
  </style>

2.用link進行引用

<link rel="stylesheet" type="text/css" href="my.css">

3.用import進行引用

 <style type="text/css">
   @import url(my.css);
 </style>

第一種是直接在html頁面上進行css書寫,而第二種和第三種是採用外部參考樣式單獨提取檔案。

問題1.到底link和@import有什麼區別?
我們先來看看他們的定義

Quote link元素
HTML和XHTML都有一個結構,它使網頁作者可以增加於HTML文檔相關的額外資訊。這些額外資源可以是樣式化資訊(CSS)、導航助手、屬於另 外形式的資訊(RSS)、聯絡資訊等等。Quote @import
指定匯入的外部樣式表及目標裝置類型。

其實link和@import的最根本區別就是,link是一個html的一個標籤,而@import是css的一個標籤,
link除了調用css外還可以有其他作用譬如聲明頁面連結屬性,聲明目錄,rss等等,而@import就只能
調用css。如果單獨從外部參考css來說,他們的作用是基本一樣,只不過上面的老大不一樣而已。:)

問題2.link合import到底那個更好?
上面說了因為上面的老大不一樣,所以在使用上就會有一些細節的區別,不能說總體誰好誰壞,
只能說具體情況具體分析。
1)我要用javascript進行樣式選擇;
這個時候就要用link,因為link是html元素,可用javascript去控制dom元素最後達到改變樣式的效果。
看下列代碼

<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" title="orange" />
 <link rel="alternate stylesheet" href="/css/blue.css" type="text/css" media="screen" title="blue" />
 <link rel="alternate stylesheet" href="/css/pink.css" type="text/css" media="screen" title="pink" />
 <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了。

2)我要在應用列印樣式;
列印樣式顧名思義就是列印頁面時候的樣式。
這個樣式在普通瀏覽下是沒有效果的,只有在列印的時候生效。
如果要為頁面單獨引用列印樣式的話,link和@import都可以的。

link代碼

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

@import代碼

<style type="text/css">
 @import url(foo.css) print;
 </style>

另外對於css來說還有一種方式@media:

@media print {
 @import "print.css"
 }

用@media先制定裝置為 print,然後再用@impor連結

3)我要引用多個樣式;
如果要在一個頁面上引用多個樣式組合產生效果的話,永link和@import也是都可以的。

link代碼

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

@import代碼

<style type="text/css">
   @import url(../css/base/my.layout.css);
   @import url(../css/base/my.typo.css);
  </style>

不過個人覺得,用@import引用多檔案的時候更加清晰一些
另外對於多樣式還有一種link於@import的組合用法。
先用link引用一個css檔案

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

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

<style type="text/css">
   @import url(../css/base/my.layout.css);
   @import url(../css/base/my.typo.css);
  </style>

這樣做的好處是,如果你一個網站所有頁面引用的樣式都是一樣的,
而有又多個css,如果你每個頁面都加4,5個一樣的css樣式,卻是浪費代碼和精力,
所以莫不如這樣做,所有一個頁面都引用一個css,然後一個css在引用多個css,方便

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.