Home > css

CSS注释(附带示例)

admin   ·   发表于 28天前   ·   css

在代码中合理的添加注释是个非常好的习惯,通过注释您可以对代码加以解释说明(例如描述某段代码的功能、使用方法等),浏览器会自动忽略注释的内容。注释对开发人员非常重要,它可以帮助开发人员更快的理解代码的用途。

在 CSS 中注释以 /* 开头(起始符),以 */ 结尾(结束符),/**/是成对出现的,所有在 /* */ 之间的内容都会被看作注释的内容。CSS 中的注释只有这一种写法,无论是在单行中使用还是跨越多行使用,只要保证注释的内容在 /* */ 之间即可。例如:

/*单行注释*/

/*
    多行注释
*/

【示例】通过注释对 CSS 样式进行解释说明。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>编程帮</title>
  5. <style>
  6. /* 为所有 h1 标签设置 CSS 样式 */
  7. h1 {
  8. color: blue; /*设置字体颜色为蓝色*/
  9. text-align: center; /*设置对齐方式为居中对齐*/
  10. }
  11. /* 为所有 p 标签设置 CSS 样式 */
  12. p {
  13. color: red; /*设置字体颜色为红色*/
  14. font-size: 18px; /*设置字体大小为 18 像素*/
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <h1>编程帮</h1>
  20. <p>http://www.biancheng.net/</p>
  21. </body>
  22. </html>

运行结果如下图所示:

在 CSS 中添加注释
图:在 CSS 中添加注释


因为浏览器会忽略注释中的内容,所以在开发或调试 CSS 代码时,如果您不希望某段 CSS 代码执行,也可以使用 /* */将这段代码注释起来,这样浏览器就不会再执行这段 CSS 代码了,如下所示:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>编程帮</title>
  5. <style>
  6. /* 为所有 h1 标签设置 CSS 样式 */
  7. h1 {
  8. color: blue; /*设置字体颜色为蓝色*/
  9. /*text-align: center;*/
  10. }
  11. /* 为所有 p 标签设置 CSS 样式 */
  12. p {
  13. /*color: red;*/
  14. font-size: 18px; /*设置字体大小为 18 像素*/
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <h1>编程帮</h1>
  20. <p>http://www.biancheng.net/</p>
  21. </body>
  22. </html>

运行结果如下图所示:

注释程序中的代码
图:注释程序中的代码


上面示例中,我们将第 9 行与第 13 行代码中的 CSS 样式注释了,通过运行可以看出,注释中的 CSS 样式没有生效。

在 CSS 中添加注释的数量没有限制,您可以在自己认为需要的地方添加注释。但需要注意的是,在 CSS 中注释不能嵌套使用,注释开始符 /* 在遇到第一个注释结束符 */ 后就会结束注释,之后出现的 */ 会被浏览器当作 CSS 样式,这么做的后果就是会导致后续的 CSS 样式无法正常解析。

【示例】还使用上面的代码,并在 CSS 样式中将注释嵌套使用:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>编程帮</title>
  5. <style>
  6. /* 为所有 h1 标签设置 CSS 样式 */
  7. h1 {
  8. color: blue; /*设置字体颜色为蓝色*/
  9. text-align: center; /*设置对齐方式为居中对齐*/
  10. }
  11. /*
  12. /*为所有 p 标签*/
  13. 设置 CSS 样式 */
  14. p {
  15. color: red; /*设置字体颜色为红色*/
  16. font-size: 18px; /*设置字体大小为 18 像素*/
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <h1>编程帮</h1>
  22. <p>http://www.biancheng.net/</p>
  23. </body>
  24. </html>

运行结果如下图所示:

CSS注释不能嵌套使用
图:CSS注释不能嵌套使用


上面代码中,我们在第 11 ~ 13 行之间对注释进行了嵌套使用,通过运行结果可以看出,只有为 <h1> 标签设置的样式生效了,而为 <p> 标签设置的样式并没有生效。

0 Reply   |  Until 28天前 | 15 View
LoginCan Publish Content