搜尋
首頁web前端css教學link和@import引用css檔案方法的差別

元素所參考的樣式使用者可以自由的選擇加以改變,而導入的樣式表單就自動的與剩下的樣式表融合在一起了

CSS與HTML文檔結合的4中方法:
1 使用元素連結到外部的樣式檔案
2 在

元素中使用"style"元素來指定
3 使用CSS "@import"標記來匯入樣式表單
4 在內部的元素中使用" style"屬性定義樣式

一個例子:


css demo

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

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


link元素
HTML和XHTML都有一個結構,它使網頁作者可以增加於HTML文件相關的額外資訊。這些額外資源可以是樣式化資訊(CSS)、導航助理、屬於另 外形式的資訊(RSS)、聯絡資訊等等。

@import
指定匯入的外部樣式表及目標裝置類型。
其實link和@import的最根本區別就是,link是一個html的一個標籤,而@import是css的一個標籤,
link除了調用css外還可以有其他作用譬如聲明頁面鏈接屬性,聲明目錄,rss等等,而@import就只能
呼叫css。如果單獨從外部引用css來說,他們的作用是基本一樣,只不過上面的老大不一樣而已。 :)

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

這是一段很經典的改變頁面風格的程式碼,因為我們今天主要講的是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代碼

@import碼

@importurl( foo.css) print;

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

@media print { 
@import "print.css" 

用@@import "print.css" 

用@media先制定設備為print ,然後再用@impor連結

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

@import程式碼

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

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


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

加載css link與@import的區別:其實link 與@import 在顯示效果上還是有很大區別的,基本上來看link 的加在會在頁面顯示之前全部加在完全,而@import 會是讀取完檔案之後加在,所以如果網速很好或很快的情況下,會出現先開始無css定義,而後載入css定義。 @import載入頁面時開始的瞬間會有閃爍 (無樣式表的頁面),然後才恢復正常(載入樣式後的頁面),Link沒有這個問題。

他們從方法上是一樣的,只是在瀏覽器識別上有點差距,link在支援CSS的瀏覽器上都支持而@import只在5.0一行的版本有效,而且還能用於瀏覽器過濾也就是hack的使用,相容於一些舊版的瀏覽器。所以最好還是使用link通用型更強,但是對於高版本的瀏覽器,也就是現在的瀏覽器來說,其實都一樣,這是個沒​​有太大意義的區分 。

@import最優寫法:@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")是最優的選擇,相容的瀏覽器也是最多了。而從位元組優化的角度來看@import url(style.css)無愧於最值得推薦的寫法。

CSS程式碼格式可以縮減樣式表檔案的大小
在編寫CSS樣式表的時候,為了能夠方便以後閱讀樣式定義程式碼,我們會將每一條程式碼寫在一行上。但我發現這樣寫似乎不好,因為CSS程式碼畢竟不像程式 程式碼有很強的邏輯性,它主要以名稱和值的對應方式寫的。所以寫在同一行不會特別影響閱讀。反而會減少樣式表檔案的尺寸,因為減少了許多換行符號和間隔符號。 我測試了一下發現文件的尺寸可以減少12%左右。如果樣式表檔案比較大或檔案比較多的時候就會明顯減少客戶端的下載量,提高了網頁的開啟速度。
注意樣式名稱的冒號和後面的數值之間不要寫空格,只是在兩個樣式之間用空格分割。
具體格式如下:
程式碼:
div {margin:20px; padding:10px; background-color:#F00;}


陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能