任何编程语言都会有注释，CSS 也不例外，CSS 注释是任何网络浏览器都会忽略的一段代码，即不会在用户浏览中显示出来。 

CSS 注释是为了开发人员的利益而设计的，在渲染网页时会被浏览器忽略。它们在文档、调试等方面很有用。

在 CSS 中，创建注释有两种主要方法:

  • 单行注释:单行注释是使用 /* 开始注释和 */ 结束注释创建的。

  • 多行注释:多行注释允许您添加注释跨越多行。它们也包含在 /* 和 */ 内。

使用 <style> 元素时，您可以使用 <!-- --> 对浏览器隐藏 CSS。尽管不建议这样做。

DOM 语法

/* 注释 */

/*
注释
第二行
第三行
再来一行注释
*/

CSS 注释: 单行和多行注释

以下示例演示了 CSS 注释（单行和多行） ):

<html>
<head>
<style>
   div {
      background-color: rgb(194, 152, 233); /* 设置背景色 */
      height: 50px; /* 设置div的高度 */
      width: 200px; /* 设置div的宽度 */
      padding: 5px; /* 设置内边距 */
      border: 5px solid black; /* 设置border样式 */
   }

   /* the p tag
   color is set to red 
   font color */
   p {
      color: red;
      font-size: 20px;
   }
   
</style>
</head>
<body>
   <div>
      查看css注释的效果
   </div>
   <p>p 标签上的样式具有多行注释。</p>
</body>
</html>

CSS 注释: HTML 和 CSS 注释

这里是一个显示 html 注释和 CSS 注释格式的示例:

注意:删除多行<p> 的注释语法以查看应用的样式。

<html>
<head>
<style>
   div {
      background-color: rgb(194, 152, 233); /* 设置背景色 */
      height: 50px; /* 设置div的高度 */
      width: 200px; /* 设置div的宽度 */
      padding: 5px; /* 设置内边距 */
      border: 5px solid black; /* 设置border的样式 */
   }

   /*
   p {
      color: red;
      font-size: 20px;
   }
   */
</style>
</head>
<body>
   <!-- 这是html注释内容 -->
   <div>
      查看css注释
   </div>
   <p>样式已注释，因此不会应用于 p 标签。</p>
</body>
</html>