In CSS, you can add comments to explain or organize different sections of your stylesheet. Doing so might seem like an extraneous step in the coding process, but comments can be extremely helpful when debugging or重新设计您的网站

为什么？因为他们告诉读者CSS的特定行的意图是什么。如果多个开发人员在网站上工作，或者您已从另一个所有者继承了网站，那么这些见解特别有用。

如果您之前仔细查看了样式表或使用代码片段阅读足够的博客文章，则可能已经看到了评论。它们可以通过包围它们的 / * * /标记来识别。

In this post, we’ll walk through how to create your own comments. Then, we’ll cover what it means to “comment out” in CSS and how to do it. Let’s get started.

您可以通过两种方式向样式表添加评论。最常见的格式是单行注释，如下所示。

Here’s the CSS:

/* Set text color to white and background color to a shade of teal */
p {
白颜色;
background-color: #2594A4;
}

You can also format them as multi-line comments, as shown in the code below.

Here’s the CSS:

p {
白颜色;/ *将文本颜色设置为白色 */
background-color: #2594A4; /* Set background color to a shade of teal */
}

您可以将这些代码片段中的任何一个都放在网页的<头>部分或外部CSS样式表中以样式的HTML样式。

这是HTML：

如何在CSS中发表评论
本段用CSS设计。Both the font-color and background-color property have been set so the font color is white and the background color is a shade of teal. 

这是结果：

图像源

如果您正在使用Bootstrap CSS framework评论没有从头开始构建网站，而是以完全相同的方式工作。

Here’s the CSS, which stays the same:

p {
白颜色;/ *将文本颜色设置为白色 */
background-color: #2594A4; /* Set background color to a shade of teal */
}

The HTML will be a little different, just because I want to place the heading and paragraph element in a full-width container so there’s some padding around the edges.

Commenting in Boostrap CSS
As in the example above, this paragraph is styled with CSS. Both the font-color and background-color property have been set so the font color is white and the background color is a shade of teal.

Below is the result. Note: The only difference on the front end is the font family, which is在Bootstrap中全球设置。

图像源

How to 'Comment out' in CSS

除了解释代码部分外，评论还可以用来无效CSS规则集或单个声明。通过在规则集或声明周围放置 / * * /标记，您可以“评论” CSS，以便浏览器知道不要应用该样式。

在我们继续之前，让我们澄清规则集是什么。规则集是CSS选择器and all the declarations inside the brackets. Below is a rule set for all paragraph elements on a web page (which we’ve been using in the examples above).

p {
白颜色;
background-color: #2594A4;
}

Now let’s look at an example of an individual declaration within that rule set being commented out.

Here’s the CSS:

p {
/* 白颜色;*/
background-color: #2594A4;
}

这是HTML：

如何在CSS中发表评论
本段用CSS设计。尽管“评论”字体颜色属性却没有。这意味着，字体颜色保持黑色，但背景颜色会变成漂亮的蓝绿色。

这是结果：

图像源

现在，我们将查看一个示例的整个规则集被评论。

Here’s the CSS:

/*
p {
白颜色;
background-color: #2594A4;
}
*/

这是HTML：

如何在CSS中发表评论
This paragraph is styled with CSS that's been "commented out." Effectively, that means the CSS is cancelled out so the HTML appears unstyled. 

这是结果：

图像源

在您的CSS中发表评论

如果您想添加说明笔记或防止浏览器渲染样式表的特定部分，则可以使用注释。评论不会影响样式表其他部分的解释或在前端的网站布局。即使您刚刚开始，它们也很容易创建学习HTML和CSS。