前言：在html中我們只需要定義頁面的結構，而美化的工作就交給 css 來完成。如果用一個職業來描述 css 的話，那么它就是 html 頁面的美容師。它們倆各司其職，所以對於 css 和 html，我們要追求最大程度上的分離，一方面為了 css 的復用，另一方面也是為了不讓我們的代碼顯得過於臃腫，因而不要在 html 中寫過多的 css。故在引入方式上，我們推薦使用方式三，它是用的最多的一種 css 引入方式。
方式一：
簡單說：設置 html 標簽的 style 屬性，將樣式寫在其中。
格式：<標簽名 style = "屬性1:值1;屬性2:值2;...屬性n:值n;">內容</標簽名>
演示：為某一 p 標簽設置字體大小為20px，字體顏色為green。
優點：書寫方便，權重高。（所謂權重高：優先級高。例如，同時使用方式一和方式二來控制 p 標簽的字體大小，那么瀏覽器會優先使用方式一中定義的字體大小來對標簽進行渲染。）
缺點：沒有實現樣式（css）與 結構（html）的分離，耦合程度太高。並且如果需要對多個標簽進行統一控制，需要多次定義內容相同的style屬性，代碼重復，臃腫。
控制范圍：控制一個標簽
方式二：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/CSS"> 選擇器（選擇的標簽） { 屬性1: 屬性值1; 屬性2: 屬性值2; 屬性3: 屬性值3; } </style> </head> <body> </body> </html>
演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/CSS"> p { font-size: 20px; color: green; } </style> </head> <body> <p>這是一段演示文字</p> </body> </html>
優點：實現了結構和樣式的部分分離。
缺點：沒有實現結構和樣式的徹底分離。
控制范圍：控制一個頁面
方式三：外部樣式表（外鏈式）
簡單說：將樣式文件單獨編寫在一個 css 文件中，然后在 html 頁面通過 link 標簽引入。
格式：
解釋：rel ：stylesheet 表明引用的文件是一個 樣式表 文件。type：text/css 表明此 樣式表 是使用 css 來編寫的。href ：表明外部 css 文件的位置。
演示：此演示的前置條件：mystyle.css 和 demo.html 處於同一級目錄下。
p { font-size: 20px; color: green; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <p>這是一段演示文字</p> </body> </html>
優點：完全實現樣式與結構的分離。並且如果多個 html 文件引用同一 css 文件，就可以實現css的復用和樣式的聯合控制。
控制范圍：控制整個站點。