CSS 基础入门：语法、选择器与常用样式实战

class 选择器

class 是标签的一个属性，具有相同 class 的标签被视为同一组，便于批量操作。

注意点：

1. 类名可以自定义，但不能以数字开头。
2. 一个类可以被多个标签使用，一个标签也能使用多个类（多个类名之间用空格分割），这种做法能极大提升代码复用性。

id 选择器

id 具有唯一性，通常用于标识页面上唯一的元素。

复合选择器

复合选择器通过组合多个标签来精准定位目标，类似于在文件夹层级中查找特定文件。

例如，只想将有序列表下的 div 设置成红色，就可以使用复合选择器。

如果想更精确，可以写成 body ol div 或者直接包裹 html 标签。这里需要注意：

1. 组合可以是任意选择器的混合，数量也不限。
2. 标签不一定要相邻，父子、祖孙关系均可。
3. 若要选择多种标签，可以使用逗号分隔。

通配符选择器

通配符采用 * 表示，它匹配页面中的每一个元素。这与某些语言中的通配符概念类似，但在 CSS 中它直接作用于所有节点。

CSS 常见样式

颜色 color

color 用来设置字体颜色，主要有三种表示方式：英文单词、三原色参数、十六进制数。

1. 使用三原色 (rgb)： red、green、blue 三种颜色通过参数调整占比。例如绿色为 (0, 255, 0)。

2. 使用十六进制数： rgb 参数范围是 0-255，对应 8 个二进制位。两个十六进制位正好表示一个字节，因此可以用六位十六进制数表示颜色。

字体大小 font-size

边框 border

边框是一个复合属性，常用包括粗细、样式、颜色。既可以分开设置，也可以合并书写。

上面展示了分开设置的效果，下面尝试三者一起设置。

提示： 并不只是 div 才能设置边框，几乎所有标签都可以。

宽度 与 高度

width 设置宽度，height 设置高度。

注意： 只有块级元素可以设置宽高。常见的块级元素有 h1-h6、p、div 等；常见的行内元素有 span、a。块级元素独占一行，因此可以设置相关属性；而行内元素与其他元素共同占据一行，若强行设置宽高会影响布局，因此默认不可设置。当然，也可以使用 display 属性修改元素的显示模式：display: block 改为块级，display: inline 改为行内。

内边距 padding

padding 指内容与边框之间的距离。内容默认顶着边框放置，可用 padding 控制间距。 padding 也是复合样式，可对四个方向分别设置：top、bottom、left、right。

当然，也可以设置边框为实线以便观察效果。

外边距 margin

margin 指元素与元素之间的距离。同样，元素之间默认也是挨着的。

margin 也是复合样式，可以给四个方向都加上外边距，设置方法与内边距类似。

上述属性共同构成了经典的盒模型概念。