CSS - 注释


CSS - 注释

在 CSS 中,注释可用于在样式表中添加解释性注释或注释,这些注释或注释不会被 Web 浏览器解释为样式指令。CSS 注释是为了开发人员的利益而设计的,在渲染网页时会被浏览器忽略。它们在文档、调试等方面很有用。

在 CSS 中,创建注释的方式主要有两种:

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

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

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

句法

CSS 注释可以放置在样式表中允许空白的任何位置。它们可以在单行上使用,也可以遍历多行。

/* This is a single line comment */

/*
A comment
which spans
over several
lines
*/

/* The comment below is used to
   disable specific styling */
/*
span {
  color: #eee;
  font-size: 2.5em;
}
*/
CSS 不允许嵌套注释,这意味着 /*...*/ 中不能有其他注释。

CSS 注释 - 单行和多行注释

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

<html>
<head>
<style>
   div {
      background-color: rgb(194, 152, 233); /* Set the background color */
      height: 50px; /* Set the height of div element */
      width: 200px; /* Set the width of div element */
      padding: 5px; /* Set the padding of div element */
      border: 5px solid black; /* Set the border around the element */
   }

   /* The p tag
   color is set to red
   font color */
   p {
      color: red;
      font-size: 20px;
   }

</style>
</head>
<body>
   <div>
      Checking for CSS comments.
   </div>
   <p>The styling on  p tag has multi-line comments.</p>
</body>
</html>

CSS 注释 - HTML 和 CSS 注释

下面是一个显示 html 注释和 CSS 注释格式的示例:

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

<html>
<head>
<style>
   div {
      background-color: rgb(194, 152, 233); /* Set the background color */
      height: 50px; /* Set the height of div element */
      width: 200px; /* Set the width of div element */
      padding: 5px; /* Set the padding of div element */
      border: 5px solid black; /* Set the border around the element */
   }

   /*
   p {
      color: red;
      font-size: 20px;
   }
   */
</style>
</head>
<body>
   <!-- This is an html comment format -->
   <div>
      Checking for CSS comments.
   </div>
   <p>The styling is commented so its not applied on p tag.</p>
</body>
</html>