【转】在html中引入CSS的方法
在html中,引入css的方法主要有行內(nèi)式、內(nèi)嵌式、導(dǎo)入式和鏈接式4種
1。行內(nèi)式
即在標記的style屬性中設(shè)定css樣式，這種方式本質(zhì)上沒體現(xiàn)出css的優(yōu)勢，因此不推薦使用。
2。嵌入式
在對頁面中各種元素的設(shè)置集中寫在<head>和</head>之間的，對于單個頁面來說，這種方式很方便
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
這種方法的使用情況要少的多，最長見得就是訪問量大的門戶網(wǎng)站。或者訪問量較大的企業(yè)網(wǎng)站的首頁。與第一種方法比起來，優(yōu)點突出，弊端也明顯。優(yōu)點：速度快，所有的CSS控制都是針對本頁面標簽的，沒有多余的ＣＳＳ命令；再者不用外鏈ＣＳＳ文件。直接在ＨＴＭＬ文檔中讀取樣式。缺點就是改版麻煩些，單個頁面顯得臃腫，ＣＳＳ不能被其他ＨＴＭＬ引用造成代碼量相對較多，維護也麻煩些。 但是采用這種方法的公司大多有錢，對他們來說用戶量是關(guān)鍵，他們不缺人進行復(fù)雜的維護工作。
3。導(dǎo)入式
導(dǎo)入式格式如下：
<style type="text/css">
@import "mystyle.css";
</style>
4。連接式
這種方法可以說是現(xiàn)在占統(tǒng)治地位的引入方法。如同IE與瀏覽器。這也是最能體現(xiàn)CSS特點的方法；最能體現(xiàn)DIV+CSS中的內(nèi)容與顯示分離的思想，也最易改版維護，代碼看起來也是最美觀的一種。
格式如下：
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
采用后兩種方式后的顯示效果略有區(qū)別，區(qū)別如下：
1。連接式：會在裝載頁面主體部分之前裝載css文件，這樣顯示出來的網(wǎng)頁從一開始就是帶有樣式效果的，
2 導(dǎo)入式：會在整個頁面裝載完成后再裝載CSS文件，對于有的瀏覽器來說，在一些情況下，如果網(wǎng)頁文件的體積比較大，則會出現(xiàn)先顯示無樣式的頁面，閃爍一下之后再出現(xiàn)設(shè)置樣式后的效果，從瀏覽者的感受來說，這是導(dǎo)入式的一個缺陷。
對于一些比較大的網(wǎng)站，為了便于維護，可能會希望把所有的css樣式分類別放到幾個CSS文件中，這樣如果使用連接式引入，就需要幾個語句分別導(dǎo)入CSS文件
如果要調(diào)整CSS文件的分類，就需要同時調(diào)整HTML文件，這對于維護工作來說，是一個缺陷，如果使用導(dǎo)入式，則可以只引進一個總的CSS文件，在這個文件中再導(dǎo)入其他獨立CSS文件；而連接則不具備這個特性。
因此給大家的建議是：如果僅需要引入一個CSS文件，則使用連接方式，如果需要引入多個CSS文件，則首先用連接方式引入一個“目錄”CSS文件，這個“目錄”
CSS文件中再使用導(dǎo)入式引入其他CSS文件。
如果希望用javascript來動態(tài)決定引入哪個css文件，則必須使用連接式才能實現(xiàn)。
PS:關(guān)于link和@import的區(qū)別
問題1.到底link和@import有什么區(qū)別？
我們先來看看他們的定義
Quote link元素
HTML和XHTML都有一個結(jié)構(gòu)，它使網(wǎng)頁作者可以增加于HTML文檔相關(guān)的額外信息。這些額外資源可以是樣式化信息（CSS）、導(dǎo)航助手、屬于另外形式的信息（RSS）、聯(lián)系信息等等。Quote @import
指定導(dǎo)入的外部樣式表及目標設(shè)備類型。其實link和@import的最根本區(qū)別就是，link是一個html的一個標簽，而@import是css的一個標簽,
link除了調(diào)用css外還可以有其他作用譬如聲明頁面鏈接屬性，聲明目錄，rss等等，而@import就只能
調(diào)用css。如果單獨從外部引用css來說，他們的作用是基本一樣，只不過上面的老大不一樣而已。：）
問題2.link合import到底那個更好？
上面說了因為上面的老大不一樣，所以在使用上就會有一些細節(jié)的區(qū)別，不能說總體誰好誰壞，
只能說具體情況具體分析。
1）我要用javascript進行樣式選擇；
這個時候就要用link,因為link是html元素，可用javascript去控制dom元素最后達到改變樣式的效果。
2）應(yīng)用打印樣式；
打印樣式顧名思義就是打印頁面時候的樣式。
這個樣式在普通瀏覽下是沒有效果的，只有在打印的時候生效。
如果要為頁面單獨引用打印樣式的話，link和@import都可以的。
3）引用多個樣式；
如果要在一個頁面上引用多個樣式組合產(chǎn)生效果的話，link和@import也是都可以的。
轉(zhuǎn)載于:https://www.cnblogs.com/PeunZhang/archive/2012/07/08/2581937.html
總結(jié)
以上是生活随笔為你收集整理的【转】在html中引入CSS的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： “谈谈我对技术发展的一点感悟”阅读小记
- 下一篇： 透析CCNP路由知识五大技术4