当前位置:天才代写 > tutorial > 网页教程 > CSS编码顺序研究

CSS编码顺序研究

2018-05-17 08:00 星期四 所属: 网页教程 浏览:729

       我们在书写css编码时,往往会率性而为,没有遵循一定的规范。自己想到哪就写哪,要用什么属性的时候就写什么属性。但这种做法往往会导致一些不良后果。对此,我们课课家网站对CSS编码顺序问题进行了研究,下面和大家分享一下。

CSS编码顺序研究_Web开发_CSS课程_编码顺序_课课家

  或许你还是觉得编码顺序没有什么重要。对于个人而言可能真看不出什么影响。但如果是一个团队,那就很容易出现你写的代码别人很难看懂的状况。

       不相信?我们不妨来看看下面两则代码:

  代码一

  #main{

  font-size:13px;

  width:500px;

  background:url(http://www.inlco.cn/wenjian/link/linklogo3.gif) no-repeat 20px 200px;

  height:600px;

  line-height:22px;

  color:#c00;

  float:left;

  margin:10px 0 15px 0;

  }

  代码二

  #main{

  float:left;

  width:500px;

  height:600px;

  margin:10px 0 15px 0;

  background:url(http://www.inlco.cn/wenjian/link/linklogo3.gif) no-repeat 20px 200px;

  color:#c00;

  font-size:13px;

  line-height:22px;

  }

  我们发现,代码二明显要比代码一工整很多,这样在修改样式时可以很快的找到相关属性,进而进行调整。而代码一看上去很杂乱,如果定义的属性足够多,根本不清楚写在了什么地方。如果你是团队的一份子你更愿意选择哪种方案呢?代码二是吧!因为代码二的形式按一定的次序进行编码,这样有利于团队协作共同开发。

  由此可见万事都要有一个顺序。对此,我们课课家网站给大家推荐一个CSS编码顺序,具体如下:

  1、定位:其中有的属性为:position z-index left right top bottom clip

  2、尺寸:其中属性为:width height min-height max-height min-width max-width

  3、文字:其中属性有:color font-size letter-spacing color-text-align

  4、背景:其中属性有:background-image border

  5、其他:一般有:animation transition等

  此外,编码顺序还涉及另一方面的问题。

  众所周知,最后定义的CSS样式将会覆盖在其之前定义的所有已经存在、或与之冲突的样式。

  比如下面这个例子:

  p{color:red;background:yellow}

  p{color:green}

  以上的段落最终将呈现绿色的字体,并带有黄色的背景,这是因为最后定义的color:green将之前定义的red覆盖掉了,至于黄色背景为何没有消失,那是因为第二个p的定义中并没有与之冲突的定义,因此它还是有效的。 

  由此可见,编码的顺序在一定程度上会影响我们的样式定义效果。如果我们在编码时不注意顺序,那么显示出来的样式就不是你心中所想了。

  综合以上所述,我们不难看出CSS编码顺序在Web开发过程中的重要性,但在实际操作中,大家往往会忽略它,不知道正在看这篇文章的你是不是其中一员?如果是的话,相信通过本文的学习,你对CSS编码顺序会有一个新的认识。

 

    关键字:

天才代写-代写联系方式