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

CSS样式表
20个优秀CSS网站（3月精选）
网页颜色搭配技巧 文字字体、字号、字体排版等
让人不得不佩服的CSS效果
非常漂亮的Div+CSS布局入门教程
推荐彻底弄懂CSS盒子模式(DIV布局快速入门)
CSS opacity - 实现图片半透明效果的代码
代码实例之纯CSS代码实现翻页效果
比较漂亮的一个导航条的效果DIV+CSS
DIV+CSS布局教程大全与pdf电子书 下载
HTML 30分钟入门教程
css滤镜基础教程
css滤镜效果（一）
css滤镜效果（二）
巧用CSS的MASK滤镜
css动态模糊效果
div+css详解定位与定位应用
彻底弄懂CSS盒子模式系列教程集合
用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦！
HTML下在IE浏览器中的专有条件注释讲解
用css实现的灰度/原色连接效果

No. « 85 86 87 88 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 101 ::
收藏到网摘: 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                                            }

图：
 

你还有什么好方法？