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.")