Cascading Style Sheets 缩写为 CSS,翻译为:层叠样式表。

以上是用来装[哔~~]的内容,不过后面你会发现,这个翻译还是很贴切的。

那么究竟这是个啥?其实我们在前面已经说了很多次了,他负责描述网页中元素应该长什么样子。

这么说,当然不够直观,那我们来举个例子:

<p>首先这里有一个段落。</p>

这很普通,接着我们要对它进行一些描述。不过网页中肯定有许多的元素,我们需要分别进行描述,这时候要涉及到第一个问题:描述的是谁?当然就是段落了,于是我们这样写下:

p {
  /* 这里是描述的内容 */
}

先写出来我们描述的是谁,然后在后面的大扩号里写对它的描述。这并不难理解,不过遇到了一个新的内容,/* 这里是描述的内容 */ 这是在做什么?

从文字上看,这应该是一个注释,是的,他确实是一个注释。用 /* 标记注释的开始,*/ 来标记结束。一般我们在标记和注释内容之间,都会加上空格进行分隔。

然后描述一点什么呢,先来一个最简单直观的:颜色。颜色的英文大家都会写吧,那么我们让它的颜色成为非常醒目的红色。

p {
  color: red;
}

颜色,冒号,红色。除了写得相对简单一些,你按照我们日常写文章的语法,都能够理解它。

为了方便以后的交流,我们要定义几个名词了。最开始的 p 表达的是我们在对谁进行描述,这个部分叫做“选择器”,用来选择页面中的元素。大括号里面,基础格式就是:属性: 属性的值;。那么颜色,是我们当前元素的一个属性,属性的值,被设置为了红色。我这么说,你都能听得懂吧?

对于一个段落来说,它的颜色怎么表现呢?其实这里表达的有些简单,color 事实上说的是里面文字的颜色,我们来看一下效果:

首先这里有一个段落。

接下来的问题就是我们应该把这些代码写在哪里?

茴香豆有四种写法,CSS 有三种引入方式。

引入文件

把上面的 CSS 代码,单独写在一个文件里,保存,记得后缀是 CSS。然后在 HTML 文件的 head 部分,用如下代码进行引用:

<link rel="stylesheet" href="style.css">

就是说我们要链接(link)进来一个样式表(stylesheet),它的路径(href)是:style.css

最后文件的路径,根据你的实际情况,进行修改就行了。我们在 第二十六章 相对路径如何写 中已经学习过了相对路径的写法,在这里就不进行重复了。

这种方法被称作外部样式表,因为是另外一个样式表文件嘛。这是我们最常用的方式,单独分成一个文件,会让我们书写和维护起来更清晰方便。

当然,它也有一点缺点,就是在网页加载的时候会增加一次网络请求。因为浏览器首先读取这个网页的代码进行分析,然后发现还需要一个 CSS 文件,那它就要再向网站请求这个文件。这个过程需要一点点的时间,自然也就影响到了网页的加载速度。不过在网络越来越快的今天,这点影响微不足道,只要不是引入大量的文件,一般不需要进行考虑。

写在里面

说完了外部样式表,我们来说说内部样式表。很容易理解,就直接写在 HTML 文档里面。所以减少了网络请求,提高了速度。但是可能有一些不便于书写和维护,而且我们这个网页文件也会相应的变长。

书写的方法非常简单,在 HTML 文件的 head 部分加入 style 标签,标签里面写 CSS 代码就行了。

<style>
  p {
    color: red;
  }
</style>

这里大家可以想象一下,使用外部样式表的时候,我们可以在屏幕左边打开 HTML 文档,右边打开 CSS 文档,相互对照着写,就非常方便。但是使用内部样式表,它们都在同一个文档里,上下滚动着去相互对应,就很不方便了。

不过我推荐大家用的编辑器 VSCode 可以把同一个文档分屏在左右两侧,就也可以以左右对照的方式进行编辑了,非常的方便。

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