写在元素里

在某些特殊的情况下,我们可能并不方便使用上面两种方式;或者非常临时的,局部的需要进行一些样式的定义。这时候我们可以把 CSS 直接写在元素上面,这种方式叫做内联样式表:

<p style="color: red;">内联样式表</p>

我们看到,就是把 CSS 当作一个属性(style),把 CSS 的内容当作这个属性的值。这里有几个点需要注意:

  • 首先是不需要写选择器了,因为你写在哪个元素里,就是在描述哪个元素,所以完全没有必要再指定选择器;
  • 也不需要大括号了,因为不需要和其他元素的样式表进行分隔了;

在开始的时候,这种方式可能让新人觉得最直观,最容易理解。不过他的缺点也是非常明显的:

我们现在只描述了一个属性(color),代码看起来还是可以阅读的,那如果我为他定义许多属性之后呢?就有些混乱了。

每次只能定义一个元素,许多个元素需要相同的样式,就只能重复去写。这样浪费生命的事情,想必谁也不会喜欢。

还有 CSS 中一些特殊的东西,它是没有办法使用的,这个局限性让人十分难受。


到这里三种引入方式我们就介绍完了,他们各有特点,有优势也有缺陷。我们都要熟悉掌握,然后根据实际情况,进行灵活的运用。反正也并没有复杂的东西嘛。

然后再说一些格式上的细节,你也可以认为我是在凑篇幅……

看一下我们上一章所写的代码:

p {
  color: red;
}

一般的,我们会在选择器和大括号之间加上一个空格,这个没有特别的原因,就是看着舒服。如果你觉得不加空格看起来更舒服,当然也可以不加(好像是废话……

但是你要加就全加了,要么就全别加,有的加有的不加……程序员大部分都是强迫症,看了会想打人的。其实这说的是一个态度的问题,技术水平是一方面,如果你做这个事情的时候,连一个认真严谨的态度都没有,就不用看技术怎么样了,可以直接判断你做不好这件事情。

然后大括号中的属性前面,加一个缩进,这样层级就很清楚。冒号后面最好加一个空格,不写当然没问题,但是不太好看,也不太好读,还不太好选择……(反正用多了你自然就知道了。

最后的分号不要省略,虽然有的情况可以省略,但是作为一个新人,还是都写上,免得出现问题,自己还要查错。

我们这里只写了一条属性,那么有许多属性的时候,就一行一条,整齐的往下写。后面我演示的代码,基本都是使用这种格式,因为十分便于阅读。

但是也有一点小问题,在 第九章 一些细节(一) 中我也提到过。我们为了让代码容易阅读而添加的空白,虽然不会影响代码的实际效果,但是会增加文件的体积,进而影响文件下载的速度。这是影响网页使用体验的细节,在优化的时候,我们就要去考虑了。

我比较推荐的方法就是,我喜欢怎么写就怎么写,等真正发布到网络之前,在对代码进行一下压缩。这个压缩不是我们说的打压缩包,而是通过工具,将我们代码中没必要的空白和注释全部都去掉,来减少这个文件的体积。毕竟发布上去的代码不是给我们阅读的,而是让浏览器去解析的。所以依旧保留代码格式的必要性并不大。当然,我们自己写的这份,还是要作为源文件保存好的,以后无论是阅读还是修改,都是这份文件更加好用一些。

【本章助记卡片:卡片 for 第二十九章