HTML使用CSS樣式一共有如下三種方式：1.內(nèi)聯(lián)樣式- 在HTML元素中使用"style"屬性卿叽；2.內(nèi)部樣式表 -在HTML文檔頭部? 區(qū)域使用桥胞；3.外部引用 - 使用外部 CSS文件。一般而言考婴，使用前兩種方式都很少有問題贩虾，但在實際開發(fā)過程中，為了方便維護蕉扮，HTML一般都是外部導入CSS樣式的整胃。因此，新手使用CSS樣式遇到的問題一般是外部導入的CSS不起作用喳钟。
新手先檢查內(nèi)部樣式是否覆蓋外部鏈的樣式屁使。
外部樣式導入路徑會用到：./ 當前目錄，../ 父級目錄奔则，/ 根目錄
在此次場景中蛮寂，筆者在D盤的一個文件夾下創(chuàng)建了一個根目錄MyChat，然后在根目錄下創(chuàng)建兩個子目錄public易茬，views分別存放css樣式文件和html文件酬蹋。目錄結構全貌如下：
以前端框架Bootstrap3為實例，地址：http://www.bootcss.com/
把bootstrap3的樣式拷貝到本地的css文件夾下抽莱，分別在根目錄和main文件夾下創(chuàng)建一個index.html文件范抓，然后復制粘貼bootstrap官網(wǎng)的上html模板代碼
用瀏覽器打開根目錄的html文件看css樣式有沒有生效，效果如下：
再看這些模板的css是怎么通過外部導入使用的食铐，如下
看得出外部的css有生效匕垫，接來下嘗試導入本地的css樣式。打開main文件夾的index.html文件虐呻，象泵，粘貼復制html模板寞秃，修改link的路徑。修改如下：
用瀏覽器打開該html文件偶惠，如下：
css樣式?jīng)]有生效春寿，出現(xiàn)報錯了，看是什么原因忽孽？根據(jù)給出的信息绑改，是css文件的路徑檢索出錯了，html文件沒有引用到外部的css文件“峭螅現(xiàn)在對比報錯的路徑和本地的路徑：
index.html文件在E:\nodejsstudy\MyChat\views目錄下
bootstrap.min.css文件在E:\nodejsstudy\MyChat\public目錄下
瀏覽器給出：file:///E:/nodejsstudy/MyChat/views/main/public/css/bootstrap.min.css
index.html文件代碼<head>? <link rel="strylesheet" type="text/css" href="public/css/bootstrap.min.css" > </head>
按照邏輯绢淀，html文件會引用E:\nodejsstudy\MyChat\public\css目錄文件下的bootstrap.min.css文件才對，但現(xiàn)在看來瘾腰，css文件引用不到皆的。然后繼續(xù)修改路徑href="../public/css/bootstrap.min.css"，返回上一級目錄檢索蹋盆，給出的報錯信息：file:///E:/nodejsstudy/MyChat/views/public/css/bootstrap.min.css
繼續(xù)修改href="../../public/css/bootstrap.min.css"费薄，再返回上一級目錄檢索，引用到css文件了
總結：在開始栖雾，當main目錄下的html文件用路徑href="public/css/bootstrap.min.css"引用css文件時楞抡，是在目錄MyChat/views/main目錄下檢索有沒有public/css/bootstrap.min.css的，但該目錄下沒有這個css文件析藕。
然后修改路徑"public/css/bootstrap.min.css"->"../public/css/bootstrap.min.css"召廷，返回到MyChat/views目錄下檢索css文件，出現(xiàn)相同的錯誤账胧。
再次修改路徑"../public/css/bootstrap.min.css"->"../../public/css/bootstrap.min.css"竞慢，返回到MyChat目錄檢索public/css/bootstrap.min.css，回顧一下目錄結構治泥，可以檢索到css文件筹煮。
擴展：如果把上面的MyChant文件放在服務器web根目錄，用"public/css/bootstrap.min.css"居夹，是可以直接引用css文件败潦。
