2.2.1 样式与样式表
HTML元素的样式（style）属性决定了它的视觉效果。
以下HTML代码
<p style=”color: blue; font-size: 2em”>你好，HTML！</p>
通过style属性直接（inline）指定了该段落的字体颜色（color）和字体大小（font-size）。
但我们一般习惯于把样式（代码）与内容（代码）相分离1，所以更好的做法是：
<!DOCTYPE html>
<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文本里引用它，如：
<!DOCTYPE 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 ↩