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 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买