在第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 即可:
聪明的你快打开电脑实践一下吧~