提高CSS可阅读性的方法

来源：爱站网时间：2020-12-15编辑：网友分享

css

良好的书写习惯对于大家的后期维护是很重要的，那么你知道怎么提高提高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个英文字母中的顺序进行书写。具备良好的阅读性。
现在基本上我都是采用以上的方法。很多时候，单行看不出效果。如果多了呢：

这样，对于不自信或对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                                            }

上文就是小编介绍提高CSS可阅读性的方法，小编在这里介绍的写法让大家对css从了解到熟悉到主动思考有一个过程

提高CSS可阅读性的方法

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载