CSS代码怎样编辑有能提升可阅读性

今天就跟大家聊聊有关“CSS代码怎样写有能提升可阅读性”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“CSS代码怎样写有能提升可阅读性”文章能对大家有帮助。

良好的书写习惯对于大家的后期维护是很重要的，那么你知道怎么提高提高CSS可阅读性吗？

刚开始的写法

.menu ul li

{

color:#087C00;

width:495px;

height:25px;

border-bottom:1px solid #087c00;

text-align:center;

line-height:25px;

}

或者

.menu ul li{

color:#087C00;

width:495px;

height:25px;

border-bottom:1px solid #087c00;

text-align:center;

line-height:25px;}

然后写着写着成这样了：

.menu ul li{color:#087C00;width:495px;height:25px;border-bottom:1px solid #087c00;text-align:center;line-height:25px;}

再写啊写的成这样了：

.menu ul li{color:#087C00;border-bottom:1px solid #087c00;height:25px; line-height:25px;text-align:center;width:495px}

不要以为这两个是一样的。其实不一样。按照属性第一个字母在26个英文字母中的顺序进行书写。具备良好的阅读性。

现在基本上我都是采用以上的方法。很多时候，单行看不出效果。如果多了呢：

.menu{float:left;width:510px;padding-top:18px}

.menu ul{padding-left:20px}

.menu ul li{color:#087C00;border-bottom:1px solid #087c00;height:25px;line-height:25px;text-align:center;width:495px}

.menu ul li.bornone{border-bottom:0px}

.menu ul li a{color:#087C00!important;font-size:12px; font-weight:bold;text-decoration:none}

.menu ul li a:hover{color:#000!important;text-decoration:underline}

.menu ul li a:visited{}

.menu ul li span{margin:0 0.7em!important}

这样，对于不自信或对css不大熟悉的人来说，一般情况下都容易患上代码恐惧症。

换个方式吧：

.menu                  {float:left;width:510px;padding-top:18px}

.menu ul              {padding-left:20px}

.menu ul li            {color:#087C00;border-bottom:1px solid #087c00;height:25px;line-height:25px;text-align:center;width:495px}

.menu ul li.bornone    {border-bottom:0px}

.menu ul li a          {color:#087C00!important;font-size:12px; font-weight:bold;text-decoration:none}

.menu ul li a:hover    {color:#000!important;text-decoration:underline}

.menu ul li a:visited  {}

.menu ul li span      {margin:0 0.7em!important}

再来：

.menu                  {    float:left;width:510px;padding-top:18px                                      }

.menu ul              {    padding-left:20px                                                }

.menu ul li            {    color:#087C00;border-bottom:1px solid #087c00;height:25px;line-height:25px;text-align:center;width:495px    }

.menu ul li.bornone    {    border-bottom:0px                                                }

.menu ul li a          {    color:#087C00!important;font-size:12px; font-weight:bold;text-decoration:none                  }

.menu ul li a:hover    {    color:#000!important;text-decoration:underline                                  }

.menu ul li a:visited  {                                                            }

.menu ul li span      {    margin:0 0.7em!important                                            }

这篇关于“CSS代码怎样写有能提升可阅读性”的文章就介绍到这了,更多相关的内容，小编将为大家输出更多高质量的实用文章！

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!