今天小编跟大家讲解下有关CSS书写位置 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS书写位置 的相关资料，希望小伙伴们看了有所帮助。
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>注意这句：
<pstyle="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="http://www.aidi.net.cn/article/detial/6956/style.css"></head><body> <p>生当作人杰，死亦为鬼雄</p> <p>至今思项羽，不肯过江东</p></body></html>这里最关键的是：
<linkrel="stylesheet"type="text/css"href="http://www.aidi.net.cn/article/detial/6956/style.css">link的前两个属性是固定的，href属性是要引入外部css的相对位置。如果还有别的 html 文件想用到这个样式文件，同样也引入即可，实现了样式复用的效果，提高了访问速度。
注意：link标签在同一个文档中可以加载多个外部样式。
总结上面我们使用了三种方式为 html 标签添加样式，归结起来就三种：
1.元素内部： 行内样式2.文档内部： style标签3.外部样式： link标签一般工作中都是使用外部样式，其余两种可以在学习测试的时候使用，不建议在生产工作中使用。
来源：爱蒂网
