CSS小姐与你聊她世界里的游戏规则

作者 | web小二

来源 | web前端开发

在上期《

初遇HTML先生和CSS小姐

》中，HTML先生与我们大家详细的介绍了他自己，在今天这篇文章，CSS小姐也将详细的介绍一下她的游戏规则，接下来的时间，就留给我们的CSS小姐。有请，我们漂亮的CSS小姐。

CSS小姐：

Hi，大家好，我是Cascading Style Sheets，简称CSS，中文名，层叠样式表。

今天，我非常高兴，又和【web前端开发】的小伙伴们见面了，在这里认识大家，我感到非常荣幸，也希望大家会喜欢我，记住我。

关于我的故事，我在上期节目中，已经跟大家介绍过了，我是一名化妆师，你也可以称我为一名魔术师，至于我在工作中的价值，请参考下图效果：

▲使用了CSS前后的效果对比

今天，我要重点跟大家讲一下，跟我玩的话，需要注意哪些游戏规则。正所谓无规则不游戏。

首先，我们一起先来看一下下图中的这辆法拉利跑车，各位，喜欢吗？喜欢。其实，我也很喜欢，红色的，闷骚而拉风。没有关系，只要努力，香车美女会有的，我与各位共勉，美女我就不需要了，要是有帅哥的话，我还是可以考虑一下。

好了，不开玩笑了。说正事。

▲CSS小姐喜欢的跑车

从这张照片里，我们可以得到两个非常直观的信息：

1、品牌：法拉利

2、颜色：红色

如果把上面的信息用中文再简写一下的话，还可以这样写：

法拉利

这个是不是有点像我们平时在网页上看到的CSS代码的样子了？但是，这个还不是我CSS小姐。因为我的合作伙伴，浏览器依然不认识它。虽然长得像我，但还不是我。

你现在可以随便打开一个网站，按一下键盘上的F12键，你就可以看到我是什么样子。

下面是我打开百度，按下F12看到的界面效果，你也可以去试试。

▲百度网页案例截图

发现没有了，HTML和CSS全都是英文。

如果我们把CSS写成：法拉利

中国人是认识了，但我CSS小姐与HTML先生，还有我的电脑朋友，浏览器小伙伴，他们都不认识，所以需要把这行：

法拉利

换成我的小伙伴能够认识的语言。

我们的世界，也是跟你们人类世界一样，我们也有自己的沟通语言。

比方，中国人说中文，但如果你对一个不懂中文的外国人说中文，外国人也会听不懂，一面懵逼。所以，你需要说我们能够听得懂的语言。

所以，如果你把：

法拉利

这样的文字写到网页里，然后发给我们的浏览器朋友，我们的浏览器也会一面茫然，兄弟，你这是啥呀？我完全看不懂呀。

所以，你就会得不到你想要的效果。而程序员就把这种情况称之为BUG。

其实，BUG，不是我们的错，是你在写的时候，就写了一些，我们浏览器小伙伴不认识的东西，他们没有办法，所以浏览器小伙伴就说，不知道是什么东西，直接报错就好了。

那我们应该怎么修改呢？其实，也非常简单：

将法拉利换成Ferrari就可以了。

这样我们的浏览器就认识了。

那我再来说一下，为啥变成英文，我们的浏览器小朋友就认识了？因为我们的电脑朋友只认识英文和数字，而在这些英文与数字里，又有许多规则。只有按照规则出现的英文与数字，我们的电脑朋友与浏览器朋友才会认识。

而在我这里，你们就需要准守我的游戏规则。话说，我的地盘，听我的，请看下面的图：

▲CSS小姐讲解游戏规则

通过上面这张游戏规则图，我想，你可以非常直观的了解到CSS小姐的游戏规则了。

规则一：每条CSS语句，必须有选择器（selector）+声明（declaration）组成；而声明（declaration）里面必须包括，属性（property）与值（value）。

规则二：每条CSS语句，必须将声明（declaration）用大括号（{}）包裹起来，并且声明（declaration）里的属性（property）与值（value）必须用冒号（：）分开来。

规则三：在CSS语句里，每条声明（declaration）与声明（declaration）之间，必须用分号（；）将其区分开来。

听起来好像有点复杂，其实，我的结构真的非常简单，用英文写出来就是这样：

selector {

declaration0;

declaration1;

declaration2;

......

declarationN }

然后再将声明（declaration）细化成：属性（property）与值（value）。所以就有了如下结构：

selector

{

property0: value0；

property1: value1；

property2: value2；

property3: value3；

......

propertyN: valueN；

}

这就是我的游戏规则部分，只要是想跟我玩这个游戏的朋友，就必须要准守这个游戏规则。

除了这个游戏规则外，我还有一些其他的特征，你也需要记住。

在前面，我已经说了，我是跟HTML先生一起工作的，那具体我们是怎么一起协同工作的呢？今天我也来跟大家说一下。

在HTML先生那里，他有三种方式可以获取到我的一些信息。

第一种就是，行内引入。例如，HTML现在想直接获取前面法拉利跑车的外观颜色，红色，那HTML先生就需要这样写：

第二种方式：内部引入方式。就是直接将前面我们写好的那行代码，直接写在HTML的里，那HTML先生就应该这样写：

Ferrari

第三种方式就是：外部引入。

外部引入，也是我们在写界面时候，比较常用的一种方式，也是大家非常推荐使用的一种方式。

HTML先生引入外部样式的时候，应该这样写：

当页面需要用到几个样式文件，就引入几个，一般来讲，可以分为以下几个样式文件：

1、公共样式文件（common.css）；就是所有页面都会用的一些样式。

2、头部样式文件（header.css）；这个是页面顶部部分内容，很多页面都会用到，所以也建议建一个独立的文件，便于修改。

3、底部样式文件（footer.css）；这个是页面底部内容，主要用于一些友情链接，底部不怎么重要的菜单，还有一些关于网站的版权信息，为了方便，也建议建一个独立文件，当然如果内容不多的话，也可以跟头部样式文件合并在一个CSS文件里。这个视具体情况而定。

4、当前页面样式文件，在这里列举的当前页面为首页，所以引入的当前页面样式文件为（index.css）。

web小二：

到现在为止，CSS小姐将游戏规则以及怎么与HTML先生配合工作都介绍完了，那么接下来，怎么将这些内容，有序的应用到我们的网站中去呢？这个是我们下期将要与大家分享的内容，本期内容暂时到这里，下期我们再见！