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 可以把同一个文档分屏在左右两侧，就也可以以左右对照的方式进行编辑了，非常的方便。
暂无评论内容