CSS comments (with examples)
It is a very good habit to add comments in the code reasonably. Through comments, you can explain the code (such as describing the function and usage of a certain piece of code, etc.), and the browser will automatically ignore the contents of the comments. Comments are very important to developers, it can help developers understand the purpose of the code faster.
In CSS, comments start with / (initial character), end with / (end character), / and / appear in pairs, and all content between / and / will be regarded as the content of the comment. There is only one way to write comments in CSS, whether it is used in a single line or across multiple lines, as long as the content of the comment is between / and /. For example:
/*单行注释*/
/*
多行注释
*/
[Example] Explain CSS styles through comments.
<!DOCTYPE html>
<html>
<head>
<title>睿科知识云</title>
<style>
/* 为所有 h1 标签设置 CSS 样式 */
h1 {
color: blue; /*设置字体颜色为蓝色*/
text-align: center; /*设置对齐方式为居中对齐*/
}
/* 为所有 p 标签设置 CSS 样式 */
p {
color: red; /*设置字体颜色为红色*/
font-size: 18px; /*设置字体大小为 18 像素*/
}
</style>
</head>
<body>
<h1>睿科知识云</h1>
<p>https://blog.csdn.net/ccc369639963</p>
</body>
</html>
The running result is shown in the figure below:
Figure: Adding comments in CSS
Because the browser will ignore the content in the comment, so when developing or debugging CSS code, if you do not want a certain CSS code to be executed, you can also use /* */ to comment this code, so that the browser will no longer Execute this CSS code, as shown below:
<!DOCTYPE html>
<html>
<head>
<title>睿科知识云</title>
<style>
/* 为所有 h1 标签设置 CSS 样式 */
h1 {
color: blue; /*设置字体颜色为蓝色*/
/*text-align: center;*/
}
/* 为所有 p 标签设置 CSS 样式 */
p {
/*color: red;*/
font-size: 18px; /*设置字体大小为 18 像素*/
}
</style>
</head>
<body>
<h1>睿科知识云</h1>
<p>https://blog.csdn.net/ccc369639963</p>
</body>
</html>
The running result is shown in the figure below:
Figure: Code in annotated programs
In the above example, we commented out the CSS styles in lines 9 and 13. It can be seen by running that the CSS styles in the comments do not take effect.
There is no limit to the number of comments you can add in CSS, you can add comments where you think you need them. However, it should be noted that comments cannot be nested in CSS. The comment start character / will end the comment after encountering the first comment end character /, and the subsequent */ will be regarded as a CSS style by the browser, so The consequence of doing so is that subsequent CSS styles cannot be parsed normally.
[Example] Also use the above code and nest comments in the CSS style:
<!DOCTYPE html>
<html>
<head>
<title>睿科知识云</title>
<style>
/* 为所有 h1 标签设置 CSS 样式 */
h1 {
color: blue; /*设置字体颜色为蓝色*/
text-align: center; /*设置对齐方式为居中对齐*/
}
/*
/*为所有 p 标签*/
设置 CSS 样式 */
p {
color: red; /*设置字体颜色为红色*/
font-size: 18px; /*设置字体大小为 18 像素*/
}
</style>
</head>
<body>
<h1>睿科知识云</h1>
<p>https://blog.csdn.net/ccc369639963</p>
</body>
</html>
The running result is shown in the figure below:
Figure: CSS comments cannot be nested
In the above code, we nested comments between lines 11 to 13. It can be seen from the running results that only the <h1>style set for the label takes effect, but <p>the style set for the label does not take effect.