CSS的四種引入方式

來源:互聯網
上載者:User
CSS的引入方式最常用的有三種,

第一:在head部分加入<link rel="stylesheet" type="text/css" href="my.css"/>,引入外部的CSS檔案。

這種方法可以說是現在占統治地位的引入方法。如同IE與瀏覽器。這也是最能體現CSS特點的方法;最能體現DIV+CSS中的內容與顯示分離的思想,也最易改版維護,代碼看起來也是最美觀的一種。

第二:在head部分加入
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>

這種方法的使用方式要少的多,最長見得就是訪問量大的門戶網站。或者訪問量較大的企業網站的首頁。與第一種方法比起來,優點突出,弊端也明顯。優點:速度 快,所有的CSS控制都是針對本頁面標籤的,沒有多餘的CSS命令;再者不用外鏈CSS檔案。直接在HTML文檔中讀取樣式。缺點就是改版麻煩些,單個頁 面顯得臃腫,CSS不能被其他HTML引用造成代碼量相對較多,維護也麻煩些。 但是採用這種方法的公司大多有錢,對他們來說使用者量是關鍵,他們不缺人進 行複雜的維護工作。

第三:直接在頁面的標籤裡加 <div style="border:1px red solid;">測試資訊</div>

這種方法現在用的很少,很多公司不瞭解前端技術的領導還對這種寫法很痛恨。認為HTML裡不能出現CSS命令。其實有時候使用下也沒有什麼大不了。比如通用性差,效果特殊,使用CSS命令較少,並且不常改動的地方,使用這種方法反而是很好的選擇。

除了這三種常用的CSS引入方式,還有種很多人都沒有見過的引入方式
<style type="text/css">
@import url(my.css);
</style>

這就是第四種引入方式。在IBM工作的時候,只能使用一種Ajax架構,就是DOJO。而DOJO的CSS引用,就是採用了@import的方式。這種情 況非常少,主要用在CSS檔案數量龐大的負責的系統中。另外@important本身是一個CSS命令,是放在CSS檔案裡的,這個跟LINK標籤有很大 的區別。


相關文章

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.