css引入頁面的三種方法
阿新 • • 發佈：2018-12-20
1.內聯式：直接在標籤上寫樣式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css頁面引入方法</title> 6 </head> 7 <body> 8 <div style="color: red ;font-size:50px">css頁面引入方法</div> 9 </body> 10 </html>
如上面的程式碼所示，在div標籤內直接通過styl屬性直接寫樣式。那麼這裡我們設定了字型的顏色為紅色，字型大小為50px。
看一下顯示出來的效果。
這種方法在開發中是最不常用的一種，因為在標籤內寫方法會讓程式碼看起來很亂，而且也不利於管理和查詢，所以只有在某些情況下才會使用這種方式來寫樣式。
2.嵌入式：通過style標籤來寫樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css頁面引入方法</title> <style type="text/css"> div{ color: green; font-size: 50px; } </style> </head> <body> <div>css頁面引入方法</div> </body> </html>
可以看到我在head中用style標籤寫了一個樣式出來，通過選擇器選擇器來將樣式加入到頁面中。看一下效果。
這種方法是比較常用的一種，一般在寫首頁的時候通常會用到這種方式，因為網站首頁載入快慢會直接影響使用者的體驗，所以網頁的載入速度就要快。那麼這種方式不會影響載入速度，又將樣式整合到了標籤中，所以是比較適用的。但是也不會大量的使用。最後一種才是我們經常用的方式。
3.外聯式：通過link標籤將樣式新增到頁面上
main.css
1 div{ 2 font-size: 50px; 3 color: blue; 4 }
code.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css頁面引入方法</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <div>css頁面引入方法</div> </body> </html>
我們可以看到這次用了兩個檔案，一個是css檔案，一個是html檔案。css檔案裡寫的東西和style標籤中的寫法是一模一樣的。只是單獨寫在一個檔案中。然後通過link標籤將css樣式檔案引入到頁面。rel裡面的東西我們不用管，herf中的路徑就是css檔案的邏輯路徑。我們看一下效果。
這種方法才是開發中最常用的辦法。好處顯而易見，比如，低耦合，整潔，條理清晰。