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

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

CSS样式表: 做网页中需要掌握的八个CSS布局技巧; CSS属性 - white-space 空白属性使用说明; 用CSS构建iframe效果代码; 用div+css解决出现水平滚动条问题; ul在Firefox和IE下的不同表现的解决方法; 用css实现隐藏文本框; css实现行间距效果; 研究了一下div+css的高度自适应问题; 做网页字体大小参考网页中同字号字体的不同单位对比列表; css 之 background-position-x; css实现兼容各个浏览器的技巧的代码; css中的行间距的代码; HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解; scrollWidth,clientWidth与offsetWidth的区别; 大家需要掌握的 html下SPAN和DIV的区别; 布局用CSS+DIV的优点总结; 纯CSS生成抗锯齿圆角的代码; IE6，IE7和firefox对DIV的支持区别; DIV+CSS布局的网站对网站SEO的影响分析; 非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]

No. « ‹ 39 40 41 42 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 139 ::

收藏到网摘: n/a

CSS3 优势以及网页设计师如何使用CSS3技术 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                                            }

图：

你还有什么好方法？

CSS3 优势以及网页设计师如何使用CSS3技术 CSS 样式表中引用图片地址在各浏览器中的差异

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

评论 (0) All

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