1.1 CSS世界的”世界观”

作者 : 小微源码资源网 本文共1662个字,预计阅读时间需要5分钟 发布时间: 2020-01-12 共149人阅读
 ­       对于 CSS 这门语言,我学习和研究已经有 10 年之久,在点点滴滴的积累中,逐渐形成了一套完整的体系。在 CSS 这个世界中,CS并不是一个机械枯燥的语言,所有属性都是有血有肉,有着不同个性和身世的个体。不同的个体可以碰撞出不同的火花,激荡出异彩纷呈的故事。
        这里,我们不妨 “脑洞大开” 一下:如果把 CSS 世界拍成动漫的话,会是什么样子?
        首先,动漫名可以叫作《建筑神域》,讲述一群建筑魔法师为国家存亡惊心动魄战斗的故事,然后,出现了 “Chrome  王国” 的几位建筑魔法师日常训练的画面。只见名为 width的魔法师手持名叫选择器的法器,准确指向称为<div>的最普通的块状建筑魔法石,口中念道:“层叠天星,幻化有变,50%,变!” 只听见一声清脆的 “啪” ,<div>魔法石宽度变成了原来的一半,然而,width 却锁眉摇头,空中喃喃念道:“1毫秒,还不赶快,还要再练,不然在和’IE王国’ 的战斗中很难占得先机!”(如图 1-1 所示)图 1-1 CSS 世界观示图
        此时,width 突然发现前面 1 米之处有一块<span>之石,具有 class=”test”的特殊标记,立即拿出法器,念道:“类名之石,test 为名,为我选择,出 !” 话音刚落,<span>之石蓝色荧光一闪,明眼人都能看出来,width 魔法师和<span>魔法石现在处于契约状态,width 继续念道:“层叠天星,幻化有形,50%,变!” 但<span>魔法石却没有任何变化,此时 width 一拍自己的脑门,似乎明白了什么,转过头对旁边的display 魔法师大声叫道:“小 D,这边这边,过来帮个忙······”
        只见,display  迅速结束自己的练习,屁颠屁颠跑过来:“咋啦?”
        “此为内联之石,我无法驾驭,你帮我重塑一下”
        “小问题!正好,魔法师技能委员会刚通过了我的一个新法术,我给你秀一秀?”
        “哟,不错啊,快让我啾啾!”
“好勒!”只见 display 拿出自己的法器,念道:“类名之石,test 为名,为我选择,出!”  紧接着,“层叠天星,幻化有形,flex,变!”
         只听见一声清脆的 “啪” ,在两人的合作之下,<span>魔法石宽度也变化了(如图 1-2 所示)。

CSS 世界 示意图2

       “哟,很酷嘛!”width 对display 竖着大拇指称赞道。
       只见 display 腼腆一笑,小手在面前轻轻一挥:“就算你这么夸我,人家也不会开心的啦········”
       从上面的描述可以看出,在CSS世界中,HTML 是魔法石,选择器就是选择法器,CSS 属性就是魔法师,CSS 各种属性值就是魔法师的魔法技能,浏览器就是他们所在的 “王国” ,“王国” 会不断更新法律规制(版本升级),决定是否允许使用新的魔法石(HTML5 新标签新属性),是否允许新的魔法师入 “国籍”(CSS3 新属性)或者允许使用新的魔法石(HTML5 新的属性值)以及是否舍弃某些魔法技能(如 display:run-in)操作系统就是他们所在的世界,不同的操作系统代表不同的平行世界,所以,CSS 世界有这么几个比较大的平行世界,即Windows 世界,OS X 世界以及移动端的 IOS 世界和 Android 世界。不同的世界的浏览器王国的命运不一样,列如,在 OS X 世界中,IE王国是不存在的,而Safari 王国却异常强大,但在Windows 世界中,Safari 王国却异常落寞。
       以上这一切就构成了完整的 CSS 世界的 “世界观”。
       下面回答一个很重要的问题,为何要这样认识 CSS 世界呢?
       首先,将抽象的 CSS 直接和具体的现实世界相对应,更加易于理解。试想一下,对于普通人,理解魔法师和魔法石是不是要比理解 CSS 代码容易得多?其次,以完整的体系来学习 CSS 要比单纯关注属性值理解得更加深刻,可以培养从宏观层面认识与理解 CSS 的习惯。再次,这也方便我们记忆,枯燥的代码总是过目就忘,鲜活的角色总是印象深刻。最后,这样也可以让本书散发出与众不同的气质。
版权声明:本章内容出自CSS 世界 —张鑫旭 如有侵权请联系博主删除,谢谢!

★--------------免责声明--------------★

1、本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
2、分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
3、本站邀请码和VIP会员只是赞助,赞助费用仅维持本站的日常运营开支所需!
4、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
5、若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
6、本站所有资源来自互联网转载,版权归原著所有,用户访问和使用本站的资源条件是必须接受本站“免责声明”,如果不遵守,请勿访问或使用本网站资源。
7、本站使用者因为违反本声明的规定而触犯中华人民共和国法律的,一切后果自己负责,本站不承担任何责任。
8、凡以任何方式登陆本网站或直接、间接使用本网站资料者,视为自愿接受本网站声明的约束。
9、本网站如无意中侵犯了某个企业或个人的知识产权,请来信【站长信箱-xsj8168@163.com】告之,本站将立即删除。


网站源码下载 » 1.1 CSS世界的”世界观”

常见问题FAQ

美化包支持最新版本吗?
素材虎最新美化支持永久更新!

发表评论

提供最优质的资源集合

立即查看 了解详情