2.2.1 樣式與樣式表 · Web全棧技術指南

# 2.2.1 樣式與樣式表 ### 2.2.1 樣式與樣式表 HTML元素的**樣式（style）**屬性決定了它的視覺效果。以下HTML代碼 ``` <p style=”color: blue; font-size: 2em”>你好，HTML！</p> ``` 通過style屬性直接（inline）指定了該段落的字體顏色（color）和字體大小（font-size）。但我們一般習慣于把樣式（代碼）與內容（代碼）相分離[1](#fn_1)，所以更好的做法是： ``` <html> <head> <meta charset="utf-8"> <title>你好</title> <style> p { color: blue; font-size: 2em; } </style> </head> <body> <p>你好，HTML！</p> </body> </html> ``` 上面的代碼用一個**style標簽**來指定樣式： ``` p { color: blue; font-size: 2em; } ``` 這樣，樣式代碼從HTML標簽里分離了出來，但仍然嵌入在內容的文本（即HTML文本）里。我們可以把樣式代碼放在一個單獨的文件里，然后從HTML文本里引用它，如： ``` <html> <head> <meta charset="utf-8"> <title>你好</title> <link rel="stylesheet" href="hello.css"> </head> <body> <p>你好，HTML！</p> </body> </html> ``` 上面的代碼通過**link標簽**指定了一個**樣式表（style sheet）**文件，hello.css，其內容如下： ``` p { color: blue; font-size: 2em; } ``` 這樣，樣式代碼（CSS）就與內容代碼（HTML）徹底分離了。 > 1. 把樣式與內容分離有很多好處。其主要的思想是：HTML代碼僅含有網頁的“內容”，如文本和圖片，而CSS指定了這些內容的視覺效果。了解更多：[https://en.wikipedia.org/wiki/Separation\_of\_presentation\_and\_content](https://en.wikipedia.org/wiki/Separation_of_presentation_and_content)[?](#reffn_1 "Jump back to footnote [1] in the text.")