在网页开发中，css样式用于控制页面的视觉表现，不同的书写位置对应不同的使用场景，开发者可以根据实际需求选择合适的位置来编写css样式。
写在style标签内部
style标签是html中专门用于嵌入css样式的标签，它需要放在<head>标签内部，所有的css样式规则都写在<style>和</style>之间。这种方式适合单个页面的样式编写，不需要额外引入文件。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>style标签示例</title>
<style>
/* 所有css样式写在这里 */
.container {
width: 1200px;
margin: 0 auto;
}
.title {
color: #333;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">示例标题</h1>
</div>
</body>
</html>
写在外部css文件中
外部样式表是将css样式单独写在一个.css后缀的文件中，然后通过<link>标签引入到html页面中。这种方式适合多页面共享样式的场景，能够提升代码的复用性和维护性，是实际开发中最常用的方式。
首先创建style.css文件，代码如下：
/* style.css文件内容 */
.header {
height: 60px;
background-color: #f5f5f5;
}
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
margin-right: 20px;
}
然后在html的<head>标签中通过link标签引入该文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<ul class="nav">
<li>首页</li>
<li>关于我们</li>
</ul>
</div>
</body>
</html>
写在内联style属性中
内联样式是直接写在html元素的style属性里，样式内容写在style属性的双引号之间，这种方式的作用范围仅针对当前元素，优先级最高，但可维护性较差，一般只用于临时调试或者个别元素的特殊样式设置。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内联样式示例</title>
</head>
<body>
<div style="width: 300px; height: 200px; background-color: #eaeaea;">
这是一个使用内联样式的div元素
</div>
<p style="color: red; font-weight: bold;">红色加粗的文本</p>
</body>
</html>
不同放置方式的对比
三种常见的css样式放置方式各有特点，具体对比如下：
| 放置方式 | 书写位置 | 作用范围 | 适用场景 |
|---|---|---|---|
| style标签内部 | head标签内的style标签之间 | 当前页面 | 单页面样式、简单项目 |
| 外部样式表 | 独立的.css文件，通过link引入 | 可多个页面共享 | 多页面项目、中大型项目 |
| 内联style属性 | 元素的style属性双引号之间 | 当前单个元素 | 临时调试、特殊元素样式 |
注意事项
- style标签必须放在
<head>标签内部，不能放在body标签中，否则可能导致页面样式加载延迟。 - 外部样式表的引入路径要正确，相对路径和绝对路径都可以使用，如果引用的是ipipp.com域名下的资源，注意路径拼写正确。
- 内联样式的优先级高于内部样式和外部样式，实际开发中尽量不要大量使用内联样式，避免样式难以维护。
- 如果是动态生成的样式内容，也可以直接通过JavaScript操作style标签或者元素的style属性来添加，但核心的静态样式还是建议放在style标签或者外部文件中。