欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

css 世界的游戏规则

最编程 2024-03-18 10:57:26
...

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

CSS×××：

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

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

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

css世界的游戏规则_css

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


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

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

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

css世界的游戏规则_css_02

▲CSS×××喜欢的跑车

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

1、品牌：法拉利

2、颜色：红色

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

法拉利{颜色:红色}

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

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

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

css世界的游戏规则_css_03

▲百度网页案例截图


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

如果我们把CSS写成：法拉利{颜色:红色}

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

法拉利{颜色:红色}

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

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

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

所以，如果你把：

法拉利{颜色:红色}

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

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

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

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

将法拉利{颜色:红色}换成Ferrari{color:red;}就可以了。

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

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

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

css世界的游戏规则_css_04

▲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">

当页面

上一篇： 阿里云民间技术交流QQ群2164185，发广告的不要来了！

下一篇： [转] ACM 取石问题

推荐阅读