UI设计师必知：link和@import引用css文件方法的区别
生活随笔
收集整理的這篇文章主要介紹了
UI设计师必知：link和@import引用css文件方法的区别
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<link>元素所參考的樣式用戶可以自由的選擇加以改變，而導(dǎo)入的樣式表單就自動的與剩下的樣式表融合在一起了
CSS與HTML文檔結(jié)合的4中方法：1 使用<link>元素鏈接到外部的樣式文件2 在<head>元素中使用"style"元素來指定3 使用CSS "@import"標(biāo)記來導(dǎo)入樣式表單4 在<body>內(nèi)部的元素中使用"style"屬性來定義樣式
一個例子:<html><head><title>css demo</title><link rel=stylesheet type="text/css" href="css/name.css" title="cool"><style>@import url(css/name2.css);H1 {color:red}<style></head><body><H1>CSS demo by JET</H1><p style="color:blue">good luck.</body></html>
1 用link進(jìn)行引用<link rel="stylesheet" type="text/css" href="my.css">2 用import進(jìn)行引用<style type="text/css">? ? ? ? @import url(my.css);</style>
第一種是直接在html頁面上進(jìn)行css書寫，而第二種和第三種是采用外部引用樣式單獨提取文件。問題1.到底link和@import有什么區(qū)別？
我們先來看看他們的定義
link元素
HTML和XHTML都有一個結(jié)構(gòu)，它使網(wǎng)頁作者可以增加于HTML文檔相關(guān)的額外信息。這些額外資源可以是樣式化信息（CSS）、導(dǎo)航助手、屬于另 外形式的信息（RSS）、聯(lián)系信息等等。
@import
指定導(dǎo)入的外部樣式表及目標(biāo)設(shè)備類型。
其實link和@import的最根本區(qū)別就是，link是一個html的一個標(biāo)簽，而@import是css的一個標(biāo)簽,link除了調(diào)用css外還可以有其他作用譬如聲明頁面鏈接屬性，聲明目錄，rss等等，而@import就只能調(diào)用css。如果單獨從外部引用css來說，他們的作用是基本一樣，只不過上面的老大不一樣而已。：）
問題2.link合import到底那個更好？
上面說了因為上面的老大不一樣，所以在使用上就會有一些細(xì)節(jié)的區(qū)別，不能說總體誰好誰壞，只能說具體情況具體分析。
1）我要用javascript進(jìn)行樣式選擇；
這個時候就要用link,因為link是html元素，可用javascript去控制dom元素最后達(dá)到改變樣式的效果。看下列代碼<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" />這是一段很經(jīng)典的改變頁面風(fēng)格的代碼，因為我們今天主要講的是link和import，所以我這里只列出了引用css部分。
我們先來看看link里面?zhèn)€個屬性都是表達(dá)了什么意思：
[1]rel:用來聲明鏈接對象的作用或者類型。譬如上面的的代碼："stylesheet"表示鏈接一個默認(rèn)的css,而"alternate stylesheet"折表示備選的css[2]href:這個就不用我說了吧，引用css的文件路徑。[3]tyle:文件類型[4]media:應(yīng)用的設(shè)備，"screen"是說明應(yīng)用在屏幕上。[5]title:是css的名稱。這段代碼中一共有5個css,第一個是基本樣式，而其他四個是風(fēng)格樣式,利用javascript去控制默認(rèn)顯示的樣式title就ok了。
2）我要在應(yīng)用打印樣式；
打印樣式顧名思義就是打印頁面時候的樣式。這個樣式在普通瀏覽下是沒有效果的，只有在打印的時候生效。如果要為頁面單獨引用打印樣式的話，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先制定設(shè)備為 print,然后再用@impor鏈接
3）我要引用多個樣式；如果要在一個頁面上引用多個樣式組合產(chǎn)生效果的話，永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，方便管理和維護(hù)。
加載css link與@import的區(qū)別：
其實 link 與 @import 在顯示效果上還是有很大區(qū)別的，基本上來看 link 的加在會在頁面顯示之前全部加在完全，而 @import 會是讀取完文件之后加在，所以如果網(wǎng)速很好或很快的情況下，會出現(xiàn)先開始無css定義，而后加載css定義。@import加載頁面時開始的瞬間會有閃爍 （無樣式表的頁面），然后才恢復(fù)正常（加載樣式后的頁面），Link沒有這個問題。
他們從方法上是一樣的，只是在瀏覽器識別上有點差距，link在支持CSS的瀏覽器上都支持而@import只在5.0一行的版本有效，而且還能用 于瀏覽器過濾也就是hack的使用，兼容一些老版本的瀏覽器。所以最好還是使用link通用型更強，但是對于高版本的瀏覽器，也就是現(xiàn)在的瀏覽器來說，其 實都一樣，這是個沒有太大意義的區(qū)分 。
@import最優(yōu)寫法：@import的寫法一般有下列幾種：@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識別@import url(style.css) //Windows NS4, Macintosh NS4不識別@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別@import url("style.css") //Windows NS4, Macintosh NS4不識別
由上分析知道，@import url(style.css) 和@import url("style.css")是最優(yōu)的選擇，兼容的瀏覽器也是最多了。而從字節(jié)優(yōu)化的角度來看@import url(style.css)無愧于最值得推薦的寫法。
CSS代碼格式可以縮減樣式表文件的大小
在編寫CSS樣式表的時候，為了能夠方便以后閱讀樣式定義代碼，我們會將每一條代碼寫在一行上。但是我發(fā)現(xiàn)這樣寫似乎并不好，因為CSS代碼畢竟不像程序 代碼有很強的邏輯性，它主要以名稱和值的對應(yīng)方式寫的。所以寫在同一行上不會特別影響閱讀。反而會減少樣式表文件的尺寸，因為減少了很多換行符和間隔符。 我測試了一下發(fā)現(xiàn)文件的尺寸可以減少12%左右。如果樣式表文件比較大或者文件比較多的時候就會明顯減少客戶端的下載量，提高了網(wǎng)頁的打開速度。
注意樣式名稱的冒號和后面的值之間不要寫空格，只是在兩個樣式之間用空格分割。具體格式如下：程序代碼：div {margin:20px; padding:10px; background-color:#F00;}
CSS與HTML文檔結(jié)合的4中方法：1 使用<link>元素鏈接到外部的樣式文件2 在<head>元素中使用"style"元素來指定3 使用CSS "@import"標(biāo)記來導(dǎo)入樣式表單4 在<body>內(nèi)部的元素中使用"style"屬性來定義樣式
一個例子:<html><head><title>css demo</title><link rel=stylesheet type="text/css" href="css/name.css" title="cool"><style>@import url(css/name2.css);H1 {color:red}<style></head><body><H1>CSS demo by JET</H1><p style="color:blue">good luck.</body></html>
1 用link進(jìn)行引用<link rel="stylesheet" type="text/css" href="my.css">2 用import進(jìn)行引用<style type="text/css">? ? ? ? @import url(my.css);</style>
第一種是直接在html頁面上進(jìn)行css書寫，而第二種和第三種是采用外部引用樣式單獨提取文件。問題1.到底link和@import有什么區(qū)別？
我們先來看看他們的定義
link元素
HTML和XHTML都有一個結(jié)構(gòu)，它使網(wǎng)頁作者可以增加于HTML文檔相關(guān)的額外信息。這些額外資源可以是樣式化信息（CSS）、導(dǎo)航助手、屬于另 外形式的信息（RSS）、聯(lián)系信息等等。
@import
指定導(dǎo)入的外部樣式表及目標(biāo)設(shè)備類型。
其實link和@import的最根本區(qū)別就是，link是一個html的一個標(biāo)簽，而@import是css的一個標(biāo)簽,link除了調(diào)用css外還可以有其他作用譬如聲明頁面鏈接屬性，聲明目錄，rss等等，而@import就只能調(diào)用css。如果單獨從外部引用css來說，他們的作用是基本一樣，只不過上面的老大不一樣而已。：）
問題2.link合import到底那個更好？
上面說了因為上面的老大不一樣，所以在使用上就會有一些細(xì)節(jié)的區(qū)別，不能說總體誰好誰壞，只能說具體情況具體分析。
1）我要用javascript進(jìn)行樣式選擇；
這個時候就要用link,因為link是html元素，可用javascript去控制dom元素最后達(dá)到改變樣式的效果。看下列代碼<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" />這是一段很經(jīng)典的改變頁面風(fēng)格的代碼，因為我們今天主要講的是link和import，所以我這里只列出了引用css部分。
我們先來看看link里面?zhèn)€個屬性都是表達(dá)了什么意思：
[1]rel:用來聲明鏈接對象的作用或者類型。譬如上面的的代碼："stylesheet"表示鏈接一個默認(rèn)的css,而"alternate stylesheet"折表示備選的css[2]href:這個就不用我說了吧，引用css的文件路徑。[3]tyle:文件類型[4]media:應(yīng)用的設(shè)備，"screen"是說明應(yīng)用在屏幕上。[5]title:是css的名稱。這段代碼中一共有5個css,第一個是基本樣式，而其他四個是風(fēng)格樣式,利用javascript去控制默認(rèn)顯示的樣式title就ok了。
2）我要在應(yīng)用打印樣式；
打印樣式顧名思義就是打印頁面時候的樣式。這個樣式在普通瀏覽下是沒有效果的，只有在打印的時候生效。如果要為頁面單獨引用打印樣式的話，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先制定設(shè)備為 print,然后再用@impor鏈接
3）我要引用多個樣式；如果要在一個頁面上引用多個樣式組合產(chǎn)生效果的話，永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，方便管理和維護(hù)。
加載css link與@import的區(qū)別：
其實 link 與 @import 在顯示效果上還是有很大區(qū)別的，基本上來看 link 的加在會在頁面顯示之前全部加在完全，而 @import 會是讀取完文件之后加在，所以如果網(wǎng)速很好或很快的情況下，會出現(xiàn)先開始無css定義，而后加載css定義。@import加載頁面時開始的瞬間會有閃爍 （無樣式表的頁面），然后才恢復(fù)正常（加載樣式后的頁面），Link沒有這個問題。
他們從方法上是一樣的，只是在瀏覽器識別上有點差距，link在支持CSS的瀏覽器上都支持而@import只在5.0一行的版本有效，而且還能用 于瀏覽器過濾也就是hack的使用，兼容一些老版本的瀏覽器。所以最好還是使用link通用型更強，但是對于高版本的瀏覽器，也就是現(xiàn)在的瀏覽器來說，其 實都一樣，這是個沒有太大意義的區(qū)分 。
@import最優(yōu)寫法：@import的寫法一般有下列幾種：@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識別@import url(style.css) //Windows NS4, Macintosh NS4不識別@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別@import url("style.css") //Windows NS4, Macintosh NS4不識別
由上分析知道，@import url(style.css) 和@import url("style.css")是最優(yōu)的選擇，兼容的瀏覽器也是最多了。而從字節(jié)優(yōu)化的角度來看@import url(style.css)無愧于最值得推薦的寫法。
CSS代碼格式可以縮減樣式表文件的大小
在編寫CSS樣式表的時候，為了能夠方便以后閱讀樣式定義代碼，我們會將每一條代碼寫在一行上。但是我發(fā)現(xiàn)這樣寫似乎并不好，因為CSS代碼畢竟不像程序 代碼有很強的邏輯性，它主要以名稱和值的對應(yīng)方式寫的。所以寫在同一行上不會特別影響閱讀。反而會減少樣式表文件的尺寸，因為減少了很多換行符和間隔符。 我測試了一下發(fā)現(xiàn)文件的尺寸可以減少12%左右。如果樣式表文件比較大或者文件比較多的時候就會明顯減少客戶端的下載量，提高了網(wǎng)頁的打開速度。
注意樣式名稱的冒號和后面的值之間不要寫空格，只是在兩個樣式之間用空格分割。具體格式如下：程序代碼：div {margin:20px; padding:10px; background-color:#F00;}
總結(jié)
以上是生活随笔為你收集整理的UI设计师必知：link和@import引用css文件方法的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS3中的圆角边框属性详解(borde
- 下一篇： css未知尺寸的图片的水平和垂直居中