在网页开发中，CSS样式表是一项基本技术。而在使用CSS样式表时，我们常常需要在style标签下编写CSS代码，并实时预览效果。
在style标签下编写CSS代码
在HTML文档中，可以通过style标签来定义CSS样式。例如：
<html>
<head>
<style>
body {
background-color: #f00;
}
h1 {
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
这个代码块将会把body元素的背景颜色设置为红色，h1元素的文字颜色设置为白色，并居中显示。
在style标签中，我们可以编写各种CSS样式，例如选择器、属性、值等。同时，我们还可以使用CSS的各种功能，例如媒体查询、伪类、伪元素等。
实时预览CSS效果
在编写CSS代码时，我们需要对代码进行实时预览，以便检查样式是否生效。在此方面，有以下几种方法：
- 浏览器预览
当我们在浏览器中打开HTML文件时，可以直接在浏览器窗口中查看页面效果。如果我们在style标签中编写了CSS代码，该代码会立即生效，并呈现在浏览器窗口中。
例如，在下面的代码块中，我们将h1元素的文本颜色设置为红色，并在浏览器中查看页面效果。
<html>
<head>
<style>
h1 {
color: #f00;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
这个代码块将会把h1元素的文字颜色设置为红色，并在浏览器中查看页面效果。
- 实时编辑器
除了使用浏览器预览来实现实时预览外，还可以使用一些专门的实时编辑器来进行CSS样式的编写和实时预览。这些编辑器通常具有以下特点：
- 支持多种文件格式，例如HTML、CSS、JS等；
- 具有实时预览功能，能够快速查看页面效果；
- 支持代码高亮、自动补全、错误提示等功能，能够提高编码效率。
例如，Sublime Text是一款流行的代码编辑器，它支持多种文件格式，包括HTML、CSS、JS等。此外，Sublime Text还具有实时预览功能，能够在编辑CSS样式时实时显示页面效果。
- 在浏览器中调试
如果我们在浏览器中查看网页效果时发现样式不生效，可以使用浏览器的开发者工具来进行调试。开发者工具通常具有以下特点：
- 支持实时编辑CSS样式，能够快速查看页面效果；
- 提供各种调试工具，例如元素选择器、属性查看器、网络分析器等；
- 支持多种浏览器，例如Chrome、Firefox、Safari等。
例如，在Google Chrome浏览器中，我们可以通过打开开发者工具来进行CSS样式的调试。在开发者工具中，我们可以选择Elements选项卡，并使用选择器和属性查看器来编辑CSS样式，并实时预览页面效果。
