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文件的邏輯路徑。我們看一下效果。
這種方法才是開發中最常用的辦法。好處顯而易見，比如，低耦合，整潔，條理清晰。