CSS 注释


CSS 注释

注释用于解释代码,以后在您编辑源代码时可能会有所帮助。

浏览器会忽略注释。

位于 <style> 元素内的 CSS 注释,以 / 开始,以 / 结束:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. /* 这是单行注释 */
  6. p {
  7. color: red;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <p>Hello World!</p>
  13. <p>这段文本由 CSS 设置样式。</p>
  14. <p>CSS 注释不会在输出中显示。</p>
  15. </body>
  16. </html>

您可以在代码中的任何位置添加注释:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6. color: red; /* 把颜色设置为红色 */
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <p>Hello World!</p>
  12. <p>这段文本由 CSS 设置样式。</p>
  13. <p>CSS 注释不会在输出中显示。</p>
  14. </body>
  15. </html>

注释能横跨多行:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. /* 这是
  6. 多行的
  7. 注释 */
  8. p {
  9. color: red;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <p>Hello World!</p>
  15. <p>这段文本由 CSS 设置样式。</p>
  16. <p>CSS 注释不会在输出中显示。</p>
  17. </body>
  18. </html>

HTML 和 CSS 注释

从 HTML 教程中,您学习到可以使用 <!—…—> 语法在 HTML 源代码中添加注释。在下面的例子中,我们结合使用了 HTML 和 CSS 注释:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6. color: red; /* 把文本色设置为红色 */
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h1>我的标题</h1>
  12. <!-- 这些段落将是红色 -->
  13. <p>Hello World!</p>
  14. <p>这段文本由 CSS 设置样式。</p>
  15. <p>CSS 注释不会在输出中显示。</p>
  16. </body>
  17. </html>