你好,我是云桃桃。
一个希望帮助更多朋友快速入门 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 语法,而且要确保注释的起始和结束标记匹配,避免出现语法错误和影响代码的可读性。
好了,以上,本文完。