css 书写位置
- 行内样式
- style标签
- link标签
行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css书写位置</title>
</head>
<body>
<p style="color: red;">生当作人杰，死亦为鬼雄</p>
</body>
</html>
注意这句：
<p style="color: red;">生当作人杰，死亦为鬼雄</p>
p 标签有 style 属性，可以给p标签设置样式，这种称为行内样式，又叫内联样式。
注意： 除了 body 元素之外的标签，所有HTML标签都能设定style属性。行内样式只对当前元素起作用，不方便复用，假如另一个元素也要使用相同的样式，那么只能复制一份，不推荐使用
如下：两个标签内的相同样式，使用行内样式只能复制一份。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css书写位置</title>
</head>
<body>
<p style="color: red; font-size: 30px">生当作人杰，死亦为鬼雄</p>
<p style="color: red; font-size: 30px">至今思项羽，不肯过江东</p>
</body>
</html>
style标签
为了解决上面的问题，使用style标签可以解决，将样式写入到style标签里面，各个元素可以复用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css书写位置</title>
<style type="text/css">
p {
color: red;
font-size: 30px
}
</style>
</head>
<body>
<p>生当作人杰，死亦为鬼雄</p>
<p>至今思项羽，不肯过江东</p>
</body>
</html>
这里面主要关注的是：
<style type="text/css">
p {
color: red;
font-size: 30px
}
</style>
在style标签中，p 是要选中的标签名称，大括号里面的是样式，上面的意思是所有 p 标签内容都设置为红色、30个像素大小。这里就解决了在同一个文本中样式不能复用的问题。但是如果想在不同的文件中复用样式呢？这种方式不能解决。
link标签
为了解决不同文件共享同一种样式，link 标签出现了，这需要我们把css写在外部，然后html文件引入样式即可，做到了结构和样式的分离。
首先需要编写 css 样式文件： style.css，内容如下：
p {
color: red;
font-size: 30px
}
然后在 html 文件中引入即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css书写位置</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>生当作人杰，死亦为鬼雄</p>
<p>至今思项羽，不肯过江东</p>
</body>
</html>
这里最关键的是：
<link rel="stylesheet" type="text/css" href="style.css">
link 的前两个属性是固定的，href 属性是要引入外部css的相对位置。如果还有别的 html 文件想用到这个样式文件，同样也引入即可，实现了样式复用的效果，提高了访问速度。
注意：link标签在同一个文档中可以加载多个外部样式。
总结
上面我们使用了三种方式为 html 标签添加样式，归结起来就三种：
1.元素内部： 行内样式
2.文档内部： style标签
3.外部样式： link标签
一般工作中都是使用外部样式，其余两种可以在学习测试的时候使用，不建议在生产工作中使用。
原文地址：https://segmentfault.com/a/1190000021358065
