CSS小姐与你聊她世界里的游戏规则
Posted web前端开发
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS小姐与你聊她世界里的游戏规则相关的知识，希望对你有一定的参考价值。
作者 | web小二
来源 | web前端开发
在上期《》中，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{color:red;}就可以了。
这样我们的浏览器就认识了。
那我再来说一下，为啥变成英文，我们的浏览器小朋友就认识了？因为我们的电脑朋友只认识英文和数字，而在这些英文与数字里，又有许多规则。只有按照规则出现的英文与数字，我们的电脑朋友与浏览器朋友才会认识。
而在我这里，你们就需要准守我的游戏规则。话说，我的地盘，听我的，请看下面的图：
▲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先生就需要这样写：
<div style="color:red;"></div>
第二种方式：内部引入方式。就是直接将前面我们写好的那行代码，直接写在HTML的<head>里，那HTML先生就应该这样写：
<style type="text/css">
Ferrari{color:red;}
</style>
第三种方式就是：外部引入。
外部引入，也是我们在写界面时候，比较常用的一种方式，也是大家非常推荐使用的一种方式。
HTML先生引入外部样式的时候，应该这样写：
<link rel="stylesheet" type="text/css" href="common.css">
<link rel="stylesheet" type="text/css" href="header.css">
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="footer.css">
当页面需要用到几个样式文件，就引入几个，一般来讲，可以分为以下几个样式文件：
1、公共样式文件（common.css）；就是所有页面都会用的一些样式。
2、头部样式文件（header.css）；这个是页面顶部部分内容，很多页面都会用到，所以也建议建一个独立的文件，便于修改。
3、底部样式文件（footer.css）；这个是页面底部内容，主要用于一些友情链接，底部不怎么重要的菜单，还有一些关于网站的版权信息，为了方便，也建议建一个独立文件，当然如果内容不多的话，也可以跟头部样式文件合并在一个CSS文件里。这个视具体情况而定。
4、当前页面样式文件，在这里列举的当前页面为首页，所以引入的当前页面样式文件为（index.css）。
web小二：
到现在为止，CSS小姐将游戏规则以及怎么与HTML先生配合工作都介绍完了，那么接下来，怎么将这些内容，有序的应用到我们的网站中去呢？这个是我们下期将要与大家分享的内容，本期内容暂时到这里，下期我们再见！
以上是关于CSS小姐与你聊她世界里的游戏规则的主要内容，如果未能解决你的问题，请参考以下文章