当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 网页制作 提高CSS可阅读性

CSS样式表
web标准知识：用途相似的标签
文本框css关闭输入法
CSS DIV制作梯形状的不规则网站导航
优化CSS在网页中的加载方式
IE对网页中引入CSS样式表的限制
以HTML为基础学习DIV CSS
关于CSS 框架的论述
网页制作人员在设计网页时注意的细节
CSS样式表教程：浏览器默认样式
CSS教程：汇总CSS初学者的几个技巧
CSS设计网页时的一些常用规范
网站字体大小 CSS该重新改写？
cookie和dom操作调用样式表实现网页换肤
CSS初学：如何修改Zblog中的CSS
网页制作之学习CSS的理由
动态加载外部CSS与JS文件
CSS教程：CSS放入网页的几种方式
CSS教程：媒体类别语法
Javascript动态创建 style 节点
CSS网页隔行换色技巧

No. « 73 74 75 76 »

技术文章搜索

关键字

CSS样式表 中的 CSS 网页制作 提高CSS可阅读性

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 88 ::
收藏到网摘: n/a

也就是总结一下，良好的书写习惯对于后期的维护有着很让人惊诧的作用；同时，书写习惯决定了阅读的难易程度。而这里的写法，基本上也就是对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                                            }

图：
 

你还有什么好方法？