css 注释_CSS注释教程

最新推荐文章于 2024-06-25 22:00:00 发布

cunjiu9486

最新推荐文章于 2024-06-25 22:00:00 发布

阅读量846

点赞数

文章标签： css html css3 java js ViewUI

原文链接：https://www.poftut.com/css-comments-tutorial/

版权

css 注释

Comments are an important part of programming and scripting. CSS or Cascade Style Sheet also provides different types of comments like single-line comment, multi-line comment, part of the line comment. Also, CSS comments can be used to organize the CSS code or make some tests about CSS code by commenting on or out CSS code.

注释是编程和脚本编写的重要组成部分。 CSS或Cascade样式表还提供不同类型的注释，例如单行注释，多行注释，部分行注释。另外，CSS注释可用于组织CSS代码或通过注释CSS代码或将CSS代码注释掉来对CSS代码进行一些测试。

单行注释 (Single Line Comment)

The most basic and used comment type is the single-line comment. Only one is commented by using the sign /* ... */. The comment will be put between the /* and */. In the following example, we can see that the comments are styled with a different single color in order to distinguish the comments from the code. In this case, the comments are colored as green.

最基本和最常用的注释类型是单行注释。使用符号/* ... */只注释一个。注释将放在/*和*/ 。在下面的示例中，我们可以看到注释使用了不同的单色样式，以便将注释与代码区分开。在这种情况下，注释将显示为绿色。

<html>
<head>
<style>

/* This is a single-line comment */

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

</style>
</head>
<body>

<p>Poftut.com!</p>
<p>This paragraph is styled with CSS.</p>

</body>
</html>

多行注释(Multiline Comment)

We can also create multi line comments by using /* ... */ which is the same with the single line comment. The only difference is the content will wrap into multiple lines.

我们也可以使用/* ... */创建多行注释，这与单行注释相同。唯一的区别是内容将包装成多行。

<html>
<head>
<style>

/* This is 
a multi-line 
comment */

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

/* This is 
a multi-line 
comment */

</style>
</head>
<body>

<p>Poftut.com!</p>
<p>This paragraph is styled with CSS.</p>

</body>
</html>

线路注释的一部分(Part Of The Line Comment)

In some cases we may need to create CSS comment some part of the single line where starting from the end f the expression to the end of line. /* ... */ alo used for part of the line comments. Below we will create comments which will start from specified location of the line to the end of the line.

在某些情况下，我们可能需要在单行的某些部分创建CSS注释，该注释从表达式的末尾到行尾。 /* ... */ alo用于部分行注释。在下面，我们将创建注释，这些注释将从行的指定位置开始到行的结尾。

<html>
<head>
<style>

p {/* This is comment */
  color: red;/* This is comment */
} /* This is comment */


</style>
</head>
<body>

<p>Poftut.com!</p>
<p>This paragraph is styled with CSS.</p>

</body>
</html>

用注释组织CSS代码(Organize CSS Code with Comments)

Comments are not only used to explain given line or part of the CSS code. CSS comments can be also used for organize the CSS code by providing table of contents or numbering about the code. Below we will create a Table Of Contentsabout the CSS code and put related code inside these code blocks.

注释不仅用于解释给定的行或部分CSS代码。通过提供目录或代码编号，CSS注释还可用于组织CSS代码。下面，我们将创建关于CSS代码的Table Of Contents ，并将相关代码放入这些代码块中。

<style>
/* 
*  CSS TABLE OF CONTENTS
*   
*  1.0 - General
*  2.0 - Buttons
*  3.0 - Image
*/

/*** 1.0 - General ***/
h2 {
  font-size: 1.2em;
}


/*** 2.0 - Buttons ***/
input {
  font-size: 0.6em;
}



/*** 3.0 - Image ***/
img {
  border: 0.6em;
}

</style>

注释CSS测试代码 (Comment CSS Code For Testing)

While developing CSS code developers generally creates different styles and designs and make tests. While creating this CSS code using comment can be beneficial in order to make some CSS code disable and enable other CSS code. Below firsts we will enable

在开发CSS代码时，开发人员通常会创建不同的样式和设计并进行测试。在使用注释创建此CSS代码时，可以使某些CSS代码禁用并启用其他CSS代码可能会有所帮助。首先，我们将启用

<html>
<head>
<style>

p{
  color: red;
  /* color: green; */
}

</style>
</head>
<body>

<p>Poftut.com!</p>
<p>This paragraph is styled with CSS.</p>

</body>
</html>