HTML引入CSS的常見方法及解析

2020-11-12 18:09 更新

我們都知道 HTML 和 CSS 是作用不相同的兩種語言，但是它們對一個網(wǎng)頁能夠同時產(chǎn)生作用，網(wǎng)頁（webPage）= 內(nèi)容（html） + 表現(xiàn)（css） + 行為（javascript）。因此需要把 CSS 引入 HTML 一起使用。要想在瀏覽器中顯示出預期的 CSS 樣式表效果，就要讓瀏覽器識別并正確調用 CSS。當瀏覽器讀取樣式表時，要依照文本格式來讀，而且當 CSS 樣式表放在不同的地方，所產(chǎn)生的作用范圍也是不同的。在 HTML 中，主要用四種方法引入 CSS：行內(nèi)式、內(nèi)嵌式、導入式和鏈接式。


HTML引入CSS

（1）行內(nèi)式

<p style=”color:red”>網(wǎng)頁中css的導入方式</p>

即在標記的style屬性中設定CSS樣式，這種方式本質上沒體現(xiàn)出CSS的優(yōu)勢，因此不推薦使用。


（2）嵌入式

<style type=”text/css”>

p{ color:red }

</style>

在對頁面中各種元素的設置集中寫在<head>和</head>之間的，對于單個頁面來說，這種方式很方便。但是這種方法的使用情況要少的多，最長見得就是訪問量大的門戶網(wǎng)站?；蛘咴L問量較大的企業(yè)網(wǎng)站的首頁。與第一種方法比起來，優(yōu)點突出，弊端也明顯。優(yōu)點：速度快，所有的 CSS 控制都是針對本頁面標簽的，沒有多余的 CSS 命令；再者不用外鏈 CSS 文件。直接在 HTML 文檔中讀取樣式。缺點就是改版麻煩些，單個頁面顯得臃腫，CSS 不能被其他 HTML 引用造成代碼量相對較多，維護也麻煩些。但是采用這種方法的公司大多有錢，對他們來說用戶量是關鍵，他們不缺人進行復雜的維護工作。


（3）導入式

<!-- 導入外部樣式：在內(nèi)部樣式表的<style></style>標記之間導入一個外部樣式表，導入時用@import。 -->  

<style type="text/css">  

 @import "jisuan.css";  

</style>


（4）鏈接式

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


導入式和鏈接式差不多，都是從外部引入 CSS 文件。但是鏈接式對于客戶端用戶瀏覽網(wǎng)站時，效果會好些。

鏈接式可以說是現(xiàn)在占統(tǒng)治地位的引入方法。如同 IE 與瀏覽器。這也是最能體現(xiàn) CSS 特點的方法；最能體現(xiàn) DIV+CSS 中的內(nèi)容與顯示分離的思想，也最易改版維護，代碼看起來也是最美觀的一種。

如果希望用 javascript 來動態(tài)決定引入哪個 css 文件，則必須使用連接式才能實現(xiàn)。大多數(shù)的網(wǎng)站還是比較喜歡使用鏈接的方式引用外部 CSS 的。


css鏈接式

采用導入式和鏈接式的區(qū)別：

1、導入式：會在整個頁面裝載完成后再裝載 CSS 文件，對于有的瀏覽器來說，在一些情況下，如果網(wǎng)頁文件的體積比較大，則會出現(xiàn)先顯示無樣式的頁面，閃爍一下之后再出現(xiàn)設置樣式后的效果，從瀏覽者的感受來說，這是導入式的一個缺陷。


2、鏈接式：會在裝載頁面主體部分之前裝載 CSS 文件，這樣顯示出來的網(wǎng)頁從一開始就是帶有樣式效果的。


對于一些比較大的網(wǎng)站，為了便于維護，可能會希望把所有的 CSS 樣式分類別放到幾個 CSS 文件中，這樣如果使用連接式引入，就需要幾個語句分別導入 CSS 文件。如果要調整 CSS 文件的分類，就需要同時調整 HTML 文件，這對于維護工作來說，是一個缺陷，如果使用導入式，則可以只引進一個總的 CSS 文件，在這個文件中再導入其他獨立 CSS 文件；而鏈接式則不具備這個特性。


因此給大家的建議是：如果僅需要引入一個 CSS 文件，則使用鏈接方式，如果需要引入多個 CSS 文件，則首先用鏈接方式引入一個“目錄”CSS 文件，這個“目錄”CSS 文件中再使用導入式引入其他 CSS 文件。

link 和@import 的區(qū)別

Quote link的定義
HTML 和 XHTML 都有一個結構，它使網(wǎng)頁作者可以增加于 HTML 文檔相關的額外信息。這些額外資源可以是樣式化信息（CSS）、導航助手、屬于另外形式的信息（RSS）、聯(lián)系信息等等。

Quote @import 的定義

指定導入的外部樣式表及目標設備類型。其實 link 和@import 的最根本區(qū)別就是，link 是一個 HTML 的一個標簽，而@import 是 CSS 的一個標簽,link 除了調用 CSS 外還可以有其他作用譬如聲明頁面鏈接屬性，聲明目錄，rss等等，而@import 就只能調用 CSS。如果單獨從外部引用 CSS 來說，他們的作用是基本一樣，只不過上面的老大不一樣而已。


link和import哪個更好些？

上面說了因為上面的老大不一樣，所以在使用上就會有一些細節(jié)的區(qū)別，不能說總體誰好誰壞，只能說具體情況具體分析。
1、如果要用 javascript 進行樣式選擇：
這個時候就要用 link,因為l ink 是 html 元素，可用 javascript 去控制 dom 元素最后達到改變樣式的效果。

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

3、如果要引用多個樣式；
如果要在一個頁面上引用多個樣式組合產(chǎn)生效果的話，link 和@import 也是都可以的。

最后，其實這種@import 文件導入的方式已經(jīng)很少用了，建議用 link 方式。原因是 link 載入時是和 HTML 的載入同步加載的，而@import 則是在頁面內(nèi)容載入完成之后再引用的。如果網(wǎng)速慢的話，可能會導致頁面的樣式混亂。另外使用@import 時要注意添加地方，在 CSS 手冊中提到：該規(guī)則必須在樣式表頭部最先聲明。并且其后的分號是必需的，如果省略了此分號，外部樣式表將無法正確導入，并會生成錯誤信息。IE 使用@import無法引入超過35條的樣式表。


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號