CSS 網(wǎng)頁制作提高CSS可閱讀性

2024-07-11 08:27:25

字體：大中小

供稿：網(wǎng)友

也就是總結(jié)一下，良好的書寫習(xí)慣對(duì)于后期的維護(hù)有著很讓人驚詫的作用；同時(shí)，書寫習(xí)慣決定了閱讀的難易程度。而這里的寫法，基本上也就是對(duì)css從了解到熟悉到主動(dòng)思考的一個(gè)過程。
剛開始的寫法
.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}

不要以為這兩個(gè)是一樣的。其實(shí)不一樣。按照屬性第一個(gè)字母在26個(gè)英文字母中的順序進(jìn)行書寫。具備良好的閱讀性。
現(xiàn)在基本上我都是采用以上的方法。很多時(shí)候，單行看不出效果。如果多了呢：
.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}

這樣，對(duì)于不自信或?qū)ss不大熟悉的人來說，一般情況下都容易患上代碼恐懼癥。
換個(gè)方式吧：
.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}

可能屏幕不夠?qū)挘敲纯磮D片吧：

再來：
.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                                            }

上一篇：網(wǎng)頁制作需要了解的IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks

下一篇：13個(gè)網(wǎng)頁頁面瀏覽器兼容性驗(yàn)證工具