小鸡君の前端小姜汤【第014期】- 内联样式

在第003期我们讲过一点所谓样式，当时举的栗子是行内样式，只能写在元素的标签上，作为 style 属性的值存在的。这一期我们学习内联样式，或叫嵌入样式。

内联样式

CSS 样式大致有三种存在形式，行内，内联，和外联。我们已经学过了行内样式，那么我们来看看内联样式的基本写法：

下面的 h1 结构我们已经熟悉了，代表1号标题。代码中高亮的部分就是所谓的“内联样式”了。

它是以一个 style 标签包裹的一段代码，其中 .laser 称为 CSS 的 class，直译为“类”。为了更直观的看到区别，我们再用行内样式的写法看一下：

大家可以看到，行内样式的写法跟 HTML 标签混杂在一起，代码显得比较混乱。另外，这种写法只能每个元素单独写样式，假设页面中有10个元素样式是相同的，就要重复10次。这显然是不科学的。

CSS 的 class 其实就是个标识，告诉浏览器可以用这个来找到对应的元素。我们之前学过 id，也是一个道理，后面也可能会称之为“选择器（Selector）”，就是能选中某些元素的东西。

这里 id 和 class 的主要区别在于，id 在页面中不能重复，而 class 可以任意重复多次。另外，在 CSS 的选择器权重中，id 选择器的权重比 class 高一个量级。

上面的代码中，我们写了一个具有 class＝“laser” 的 h1 元素，然后又在 style 里写了一个 .laser 的选择器，就可以在里面设置 h1 的样式了。

至于样式代码，我们前面讲过，都是以名值对的形式出现的，上面的代码也很好理解，英文顾名思义，小鸡君也特意加了注释。实在看不懂的请留言给小鸡君。

我们来看一下效果：

有了这样的内联样式写法，可以方便的把样式代码集中到一处，也可以一次为多个元素设置相同的样式，只需要给它们加上相同的 class 即可：

聪明的你快打开电脑实践一下吧～