這篇文章給大家介紹怎么在css中使用外部樣式表，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供龍陵企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、H5頁(yè)面制作、小程序制作等業(yè)務(wù)。10年已為龍陵眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

就這么簡(jiǎn)單，還有什么，so easy，我之前都是這么認(rèn)為的你肯定比我聰明多了~_^，但是當(dāng)做一個(gè)頁(yè)面在微信上瀏覽并且修改再瀏覽的時(shí)候我發(fā)現(xiàn)不對(duì)勁，因?yàn)橐呀?jīng)上傳的樣式表木有改變，IOS還好，可以強(qiáng)制刷新頁(yè)面。但是安卓端這塊一直在用微信的緩存，還沒(méi)有刷新的按鈕，所以覺(jué)得css引入問(wèn)題目測(cè)應(yīng)該沒(méi)有這么簡(jiǎn)單。

好了，下面都是一些自己的純扯蛋瞎扯，歡迎前輩多拍磚。
關(guān)于路徑

在還沒(méi)有說(shuō)之前先說(shuō)下關(guān)于css引入的2種方式：

相對(duì)路徑(Relative Path)，顧名思義：就是css文件相對(duì)某一個(gè)參照物的位置。上物理課的時(shí)候老師都會(huì)提到相對(duì)運(yùn)動(dòng)：指某一個(gè)物體對(duì)另外一個(gè)物體的相對(duì)于一個(gè)固定參照物來(lái)是相對(duì)運(yùn)動(dòng)的。我們走路看汽車的時(shí)候覺(jué)得汽車往后走，汽車看我們的時(shí)候是往前走，那么相對(duì)路徑也是醬樣子的，網(wǎng)頁(yè)所處目錄就是我們的參照物。像剛剛上面這段css代碼的引入就是一個(gè)相對(duì)路徑地址，test是網(wǎng)站的目錄，style.css文件跟這個(gè)網(wǎng)頁(yè)文件是同處一個(gè)目錄層級(jí)，如圖：

那么在網(wǎng)頁(yè)文件index.html引入css應(yīng)該是

CSS Code復(fù)制內(nèi)容到剪貼板

假如說(shuō)css文件放在跟index.html同級(jí)目錄，名為css文件夾里面，類似這樣：

假如css放跟目錄也就是test這里

“/”斜杠符號(hào)在這里表示的就是根目錄，也就是這些網(wǎng)頁(yè)文件之間聯(lián)系的參照物。

絕對(duì)路徑(Absolute Path)，既然是絕對(duì)的，那就說(shuō)明這個(gè)地址是唯一性，獨(dú)立性。相對(duì)本地來(lái)說(shuō)，剛剛的站點(diǎn)test的絕對(duì)地址為F:\test，相對(duì)服務(wù)器來(lái)說(shuō)，就應(yīng)該是127.0.0.1/test類似這樣的IP地址。
關(guān)于路徑引入

要相對(duì)路徑還是絕對(duì)路徑引入css文件，個(gè)人認(rèn)為本地預(yù)覽的時(shí)候可以選擇相對(duì)路徑，項(xiàng)目上線的時(shí)候改成絕對(duì)路徑來(lái)引入，為什么？有以下幾點(diǎn)：

1. 減少索引，絕對(duì)地址的唯一性可以確保用戶在輸入網(wǎng)頁(yè)的時(shí)候，瀏覽器直接去索引到那個(gè)IP地址，直接一刀致命，沒(méi)有拖沓。而相對(duì)路徑就要一步步索引目錄，這就好比在路上遇見(jiàn)一個(gè)心儀的妹紙，我們害羞不敢當(dāng)面去談話，于是我們制造了無(wú)數(shù)的偶遇之后才有膽子上去問(wèn)聯(lián)系方式，到最后才發(fā)現(xiàn)妹紙?jiān)缑ㄓ兄?，早知如此，何必?dāng)初呢~

2. 增加外鏈，對(duì)于做SEO的人來(lái)說(shuō)，我們都知道外鏈能帶來(lái)不錯(cuò)的權(quán)重提高，就算是別人來(lái)抓我們的內(nèi)容，假如它沒(méi)有改成自己的服務(wù)器地址，那說(shuō)明這個(gè)網(wǎng)站的引用地址還是我們的網(wǎng)址，爬蟲(chóng)會(huì)通過(guò)這個(gè)圖片引用地址反爬回去，但相對(duì)路徑引用，因?yàn)榈刂钒l(fā)生變更，因此爬蟲(chóng)爬回去之后找不到相應(yīng)的文件，因此爬蟲(chóng)的工作也即將停止。

3. 提高排名，假如是你一個(gè)干前端的，那么多少都會(huì)遇到某一個(gè)自己喜歡的動(dòng)畫(huà)效果，HTML搞下來(lái)了，但是不想要直接把css也下下來(lái)，因此會(huì)在本地直接調(diào)用網(wǎng)絡(luò)地址。當(dāng)你預(yù)覽這個(gè)頁(yè)面的時(shí)候不小心點(diǎn)到了引入地址，會(huì)跳轉(zhuǎn)到相應(yīng)的網(wǎng)站css，即使你沒(méi)有訪問(wèn)其主頁(yè)，但是你還是訪問(wèn)了他的域名，無(wú)意之中還是增加了其訪問(wèn)量。

當(dāng)然了，第三點(diǎn)是我自己YY出來(lái)的，至于是不是我們無(wú)從考究，希望有過(guò)研究的可以分享一下你們的見(jiàn)解咯。
絕對(duì)路徑幾種表現(xiàn)

一般式

剛剛我們提到了相對(duì)來(lái)說(shuō)不管是引用圖片還是引用css文件，路徑最好是絕對(duì)路徑，所以上面的style.css文件的引入地址應(yīng)該是

CSS Code復(fù)制內(nèi)容到剪貼板

這樣的引入似乎是正確了的，各種對(duì)SEO來(lái)說(shuō)也達(dá)到的滿意程度，但是某寶的做法是這么做

某寶式

淘寶的css還有js的引入是通過(guò)他們的cdn分布式形式，而且后面都帶有?t=20150105，這跟我們的做法不太一致，后面的20150105應(yīng)該是這個(gè)時(shí)間更新的，為了方便記住版本信息，但是為什么帶“？”問(wèn)號(hào)。于是有Google一番，各路大神對(duì)此的解釋可以解答我心中的疑惑：

        標(biāo)注版本號(hào)。
        方便查看最近修改情況。可以是日期?！具@是淘寶一樣】

        用隨機(jī)數(shù)防止緩存。
        如果更改css，為了避免瀏覽器緩存，不會(huì)及時(shí)更新導(dǎo)致頁(yè)面沒(méi)有出現(xiàn)相應(yīng)效果，在使用時(shí)帶上一個(gè)動(dòng)態(tài)參數(shù)，讓瀏覽器重新下載這個(gè)css文件。

那就好理解了，帶“？”只是為了讓瀏覽器把舊版本的css給over掉，重下新的css版本號(hào)。這個(gè)也好解釋了為什么微信瀏覽已經(jīng)修改過(guò)的css文件，但是樣式還沒(méi)有調(diào)試過(guò)來(lái)，因?yàn)槲⑿耪{(diào)用的還是老版本的css文件，因此假如各位csser們想要第一時(shí)間能預(yù)覽到最新修改的樣式，那么引入的路徑最好是”?=xxx”類似這樣的版本號(hào)，以便讓瀏覽器重下我們已經(jīng)修改過(guò)的css文件。

Facebook式

假如你能翻墻，能上Facebook，那么不妨看看Facebook的css引入又跟我們國(guó)內(nèi)的不太一樣，如圖：

這么一大堆的大小寫(xiě)英文字母是干嘛的，為什么又跟我們國(guó)內(nèi)的不太一樣，問(wèn)了一下同事，他說(shuō)是類似哈希加密文件，于是百科一了一下哈希算法，大概解釋如下：

    舊譯哈希（誤以為是人名而采用了音譯）。它也常用作一種資訊安全的實(shí)作方法，由一串資料中經(jīng)過(guò)散列算法（Hashing algorithms）計(jì)算出來(lái)的資料指紋（data fingerprint），經(jīng)常用來(lái)識(shí)別檔案與資料是否有被竄改，以保證檔案與資料確實(shí)是由原創(chuàng)者所提供。

最后一句話解釋很好，就是經(jīng)常被用來(lái)識(shí)別是否被篡改。假如說(shuō)本地和網(wǎng)絡(luò)上的這個(gè)css文件被篡改了，那么它會(huì)通知瀏覽器重下這個(gè)已經(jīng)被修改css文件，然后清掉之前的css緩存。好了，說(shuō)到緩存的問(wèn)題，發(fā)現(xiàn)某寶的緩存還是蠻贊的。

某寶的css刷新前后對(duì)比

關(guān)于怎么在css中使用外部樣式表就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。