CSS基础：语法、注释以及注释的3个注意事项

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。1枚程序媛，大专生，2年时间从1800到月入过万，工作5年买房。 分享成长心得。

259篇原创内容-公众号

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

今天我们来聊聊 CSS 语法，它是理解和编写 CSS 样式的基础，接着再聊聊 CSS 注释的写法。

好，那就一起来学习吧。

CSS 语法

CSS 的语法由选择器、属性和值组成，通常以规则集（Rule Set）的形式出现。每个规则集包含一个或多个选择器和一个声明块，由一系列以分号分隔的属性-值对组成。

规则集的一般形式如下：

selector { property1: value1; property2: value2; /* 更多属性-值对 */ }

选择器（Selector）：用于指定应用规则的元素，可以是 1 个或者多个。可以是 HTML 元素名称、类、ID、属性，也可以是这些的组合。

属性（Property）：定义要设置的样式属性的名称。

值（Value）：为属性指定的样式值，可以是颜色、大小、字体等。

，声明块以{ }包裹，每个属性-值对由一个属性和一个值组成，用冒号（:）分隔，然后以分号（;）结束。

例如：

h1 {
  color: #0f0;
  font-size: 24px;
}

这段 CSS 规则将会选择所有 <h1> 元素，并设置它们的文本颜色为绿色，字体大小为 24 像素。

CSS 注释

CSS 注释是在样式表中用于注释或说明代码的部分，注释内容不会影响页面的显示效果，只是用于开发者之间或者开发者自己之间的文档说明。

CSS 注释以 /* 开始，以 */ 结束，可以跨越多行，也可以在一行内。它们可以包含任何文本，通常用于解释代码的目的、功能、作者、日期等。

以下是 CSS 注释的示例：

/* 这是一个示例注释 */
body {
  background-color: #f0f0f0; /* 设置页面背景色为浅灰色 */
}

/* 多行注释也可以跨越多行 */
/*
h1 {
  color: blue;
}
*/

在这个示例中，第一条注释解释了 body 元素的背景颜色的用途，第二条注释是一个多行注释，但是没有实际应用到代码中。

对于我们新手，在写的时候要注意以下 3 种错误写法：

错误写法 1：

/* 这是一个错误的注释漏掉了结尾标记
body {
    background-color: #ffffff;

错误原因： 这个注释漏掉了结束标记 */，导致后续的 CSS 代码都被当作注释，可能会影响到样式的正常应用。比如：

错误写法 2：

/* 这是一个错误的注释，没有空格
body {
    background-color: #ffffff;
*/ }

错误原因： 注释不完全。注释一半花括号以及内容，另一半花括号就会不完整，代码上也有明显标识，比如：

如果想注释元素的整条 CSS ，务必注释完全，不要丢三落四。代码写法一定要规范。

错误写法 3：

/* 这是一个错误的注释，注释内容包含CSS语法
body {
    /* 错误的注释嵌套 */
    background-color: #ffffff;
}

错误原因： 在 CSS 注释中，不能包含 CSS 语法，如上例中的 /* 错误的注释嵌套 */。正确的做法是避免在注释中使用 CSS 语法，否则可能导致解析错误或者注释无法正确闭合。

总之，正确的 CSS 注释写法应该是 /* 注释内容 */，在注释内容和注释标记之间应该有一个空格相对规范，不应该包含 CSS 语法，而且要确保注释的起始和结束标记匹配，避免出现语法错误和影响代码的可读性。

好了，以上，本文完。