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先生配合工作都介绍完了,那么接下来,怎么将这些内容,有序的应用到我们的网站中去呢?这个是我们下期将要与大家分享的内容,本期内容暂时到这里,下期我们再见!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181203B076MK00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券