跳到主要内容位置

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;
}
提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买