跳到主要内容位置

CSS 基本语法

CSS 的语法,算是前端开发中最简单的了,但是它内置的属性有数百个,要全部记住也不是特别容易的事情,这些随着日后的积累,都会熟记于心的,因为 CSS 的属性都是以自然语言命名的。

基本语法#

我们来看一个典型的 CSS 语法构成:

div {  width: 100vw;  height: 100vh;}
h1 {  font-size: 28px;}

在这段代码示例中:

  • div 和 h1 称为选择器,用于选择 HTML 元素,它们和 HTML 标签的名字一样,只是不需要 <>,其它类型的选择器还有 class、ID、伪类和伪元素选择器。
  • 选择器后面紧跟一对大括号,在里边编写 CSS 属性。
  • 大括号里边的属性,是属性名: 属性值这样的键值对,每个键值对后面以分号结尾。
  • 多个选择器之间,是平行的关系,CSS 不支持嵌套,所以在给 div 设置完样式之后,如果还想给 h1设置样式,那么直接在 div 大括号结束的后面,继续编写样式即可。

注释#

与其它的编程语言类似,CSS 也支持注释语法,用于开发者记录一些代码备注,方便回忆样式的作用,注释会被浏览器忽略,不影响样式属性。在 CSS 里编写注释使用 /* */ 语法,例如下面的代码定义了 CSS 注释:

/* 设置 div 的宽度为 100vw,高度为 100vh */div {  width: 100vw;  height: 100vh;}