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 语法,而且要确保注释的起始和结束标记匹配,避免出现语法错误和影响代码的可读性。

好了,以上,本文完。

上一篇:WPF学习笔记-FlowDocument流文档基础知识和基本操作


下一篇:逻辑回归(Logistic Regression)详解