CSS的样式书写位置
css的样式书写位置常用的有三种：
- 行内样式(内联样式)
- style标签
- 外部样式(link标签)
行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css书写位置</title>
</head>
<body>
<p style="color:red;font-size:30px;">生当作人杰，死亦为鬼雄</p>
<p>至今思项羽，不肯过江东</p>
</body>
</html>将样式直接编写到 style 属性中，这样的样式称为内联样式，也叫行内样式。
<p style="color:red;font-size:30px;">生当作人杰，死亦为鬼雄</p>这句的意思是，通过p标签的 style 属性，为p标签的内容设置样式，样式颜色为红色，字体大小为30像素。
css的样式也是采用名值对结构，名与值用冒号连接， 多个名值对直接用分号分隔，最后一个也要加上分号。内联样式只对当前元素种的内容起作用，所以第二个p标签是没有应用到第一个p标签中的样式。
注意：body标签(元素)以及body中的标签都可以使用style属性。
缺点：
- 因为样式只对当前元素起作用， 如果其它标签也需要这种样式，需要给其它标签复制该样式，所以内联样式不方便复用。
- 内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用。
<p style="color:red;font-size:30px;">生当作人杰，死亦为鬼雄</p>
<p style="color:red;font-size:30px;">至今思项羽，不肯过江东</p>style标签
为了解决行内样式的缺点，引入了style标签。将css样式写到head中的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标签中，通过css选择器选中指定元素，就可以同时为这些元素设置样式，使样式进一步复用。
<style type="text/css">
p {
color: red;
font-size: 30px;
}
</style>style 标签的使用说明：
- type属性以及属性值是固定的。可写可不写。为了兼容以前的浏览器，最好写上。
- p代表选择了当前页面中所有的p标签，这些p标签应用了大括号中的样式。
- css的注释以/开头，以 /结尾，类似于CLLE的注释。它只能用在style标签中或者css文件中。
缺点：这种写法虽然可以复用，但是它只能在当前页面复用样式，如果多个页面想复用同一个样式，就只能将样式拷贝到每个页面中，达不到复用的效果。
link标签
为了解决同一个样式在不同页面不能复用的问题， 引入了link 标签。
将样式表编写到外部的css文件中，通过link标签将外部的css文件引入到当前页面中，这样外部文件中的css样式表就可以应用到当前页面中。
style.css 文件内容如下，注意文件名称可以随便命名。
p {
color: red;
font-size: 30px
}这里面的样式内容和上面的style标签中的格式一样。下面html代码通过 link 标签引入了 style.css样式。
<!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 中的rel 和type属性都是固定的。
- 外部文件style.css中只需要写css样式即可，通过 href 属性引入，需要相对路径。
优点：
- 将css 样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用，最大限度地使样式进行复用。
- 将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存，加快用户访问的速度，提高了用户体验，所以在开发中最推荐使用外部的css文件。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。