CSS 注释

目录

    显示目录

CSS注释不会在浏览器中显示，但可以 帮助记录您的源代码。

CSS 注释

注释用于解释代码，并且可能会在您以后编辑源代码时有所帮助。

浏览器会忽略注释。

CSS 注释位于 <style> 元素内，以 /* 开头，以 */：

例子

 /* This is a single-line comment */
p
{
   
color: red;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
/* This is a single-line comment */
p {
  color: red;
} 
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

您可以在代码中任意位置添加注释：

例子

   p
{
   
color: red; 
  /* Set text color to red */
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;  /* Set text color to red */
} 
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

评论也可以跨越 多行：

例子

 /* This is
a multi-line
comment */

p
{
   
color: red;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
/* This is
a multi-line
comment */

p {
  color: red;
} 
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

HTML 和 CSS 注释

从 HTML 教程中，您了解到可以使用以下命令向 HTML 源添加注释 语法。

在以下示例中，我们结合使用 HTML 和 CSS 注释：

例子

 <!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red; /* Set 
  text color to red */
} 
</style>
</head>
<body>
<h2>My 
  Heading</h2>
<!-- These paragraphs will be red -->
<p>Hello 
  World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are 
  not shown in the output.</p>
</body>
</html>

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red; /* Set text color to red */
}
</style>
</head>
<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>HTML and CSS comments are not shown in the output.</p>

</body>
</html>