CSS 基础语法与常见样式详解

class 选择器

class 是标签的一个属性，可以认为有相同 class 的标签被认为是同一组，在此基础上我们就可以进行一些列的其他操作，比较方便。

注意：

1. 类名是可以随便取的，但不能是数字。
2. 一个类可以被多个标签使用，一个标签也能使用多个类 (多个类名要使用空格分割，这种做法可以让代码更好复用)

id 选择器

复合选择器

复合选择器是通过多个标签唯一的那个标签，然后进行设置相关属性的。和在文件夹中查找某个文件差不多。

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

如果想更详细的一点的话，可以写成 body ol div 或者直接将 html 给包裹进来都是没问题的。

注意：

1. 上面的 ol 与 div 可以是任意选择器的组合，也可以是任意数量选择器的组合。
2. 这里的标签不一定要是相邻的标签，例如，父标签 - 子标签。可以直接是 父标签 - 孙子标签。
3. 如果想要选择多种标签，可以使用'，'来分隔。

通配符选择器

这里的通配符和我们在 Java 中学习的通配符是一样的，都是可以去代表所有，只不过 Java 中的通配符只能作为接收方，而不能是发送方（与多态一样，向上转型可以，但是向下转型就会失败）。而这里的通配符是全部都行。

这里通配符是采用 *。

CSS 常见样式

颜色 color

color 是用来设置字体的颜色的，颜色的表示方式有三种。第一种就是我们前面直接使用英文单词去表述的；第二种是使用三原色的参数来设置的；第三种是在第二种的基础上，使用十六进制的数字来表示的。

第一种前面有，因此这里不作演示，我们直接来看第二种与第三种的方式。

1. 使用三原色：

三原色（rgb）指的是 red、green、blue，三种颜色。通过参数来调整三者的占比，从而实现不同的颜色。

如果要变为绿色的话，就是 (0, 255, 0)。

2. 使用十六进制数：

因为 rgb 的参数范围是 (0,255)，可以用 2^8 来表示，如果把 2^8 看成比特位的话，就是可以用 8 个比特位来表示，而一个十六进制位可以表示 4 位二进制，即 两个十六进制位可以表示上述 rgb 的参数范围。

字体大小 font-size

边框 border

边框是一个复合属性，常用的包括 边框粗细、边框样式、边框颜色。既可以一起同时设置，也可以分开设置三者。

上面是三者分开设置的，下面来尝试三者一起设置。

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

宽度 与 高度

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

注意：只有块级元素可以设置宽高。常见的块级元素有：h1-h6、P、div 等，常见的行内元素有：span、a。块级元素是独占一行的，因此可以设置其相关的属性，而行内元素是不能独占一行的，也就是会和其他的元素一起占据一行，如果去设置其的宽高，那别的元素也需要改变，这就不合理，因此行内元素不能设置宽高。当然，我们也可以使用 display 属性来修改元素的显示模式。

display : block 改成块级元素；display : inline 改成行内元素。

内边距

padding：内边距，其含义是内容和边框之间的距离。

内容默认是顶着边框来放置的，可以用 padding 来控制这个距离。

padding 也是一个复合样式，可以对四个方向分开设置。

padding-top（顶部）、padding-bottom（底部）、padding-left（左部）、padding-right（右部）

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

外边距

margin：外边距，其含义是元素与元素之间的距离。同样元素与元素之间默认也是挨着的。

margin 也是一个复合样式，可以给四个方向都加上外边距。与内边距类似，这里就不再演示了。

前面的样式涉及到了一个著名的 IE 盒子模型：