CSS 注释

注释的作用

注释用于解释代码,提高代码可读性,浏览器会忽略注释内容。

单行注释

/* 这是单行注释 */
color: red;

多行注释

/*
  这是多行注释
  可以写多行内容
  用于解释较长的代码
*/
h1 {
  color: red;
  font-size: 20px;
}

行内注释

h1 {
  font-size: larger;  /* 设置字体大小 */
  color: brown;       /* 颜色为棕色 */
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS 注释</title>
  <style>
    h1 {
      font-size: larger;
      /* 颜色 */
      color: brown;
    }
  </style>
</head>
<body>
  <!-- HTML 注释 -->
  <h1>h1标签</h1>
</body>
</html>

注释最佳实践

1. 解释复杂的样式

/* 使用负边距实现卡片重叠效果 */
.card {
  margin-top: -20px;
}

2. 标记重要的样式

/* 重要: 主色调,统一修改 */
:root {
  --primary-color: #007bff;
}

3. 标记 TODO

/* TODO: 需要优化移动端显示 */
@media (max-width: 768px) {
  ...
}

4. 区分不同的区块

/* ===================
   头部样式
   =================== */
.header {
  ...
}

/* ===================
   导航样式
   =================== */
.nav {
  ...
}

注意事项

1. 注释不能嵌套

/* 外层注释 /* 内层注释 */ 错误 */

2. 注释不能在属性值内

content: "这是一个 /* 错误 */ 注释";

3. CSS 注释与 HTML 注释的区别

类型	语法	位置
CSS 注释	`/* ... */`	`<style>` 标签内或 .css 文件
HTML 注释	`<!-- ... -->`	HTML 文档中

<!-- HTML 注释 -->
<style>
  /* CSS 注释 */
  h1 {
    color: red;
  }
</style>

使用场景

场景1: 标记作者和日期

/*
  作者: 张三
  创建日期: 2024-01-01
  描述: 网站主页样式
*/

场景2: 临时禁用样式

/* h1 {
  color: red;
  font-size: 20px;
} */

场景3: 解释 Hack 写法

/* IE6 Hack: 使用下划线 */
.box {
  _width: 100px;
}

场景4: 标记兼容性

/* 兼容 IE9+ */
.box {
  display: flex;
}

学习要点

语法: /* ... */
作用: 提高代码可读性,便于维护
最佳实践: 在关键位置添加注释
注意: 注释不能嵌套

css css学习