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

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

CSS样式表: 可以给img元素设置背景图; 不通过JavaScript实现的自动滚动视差效果; 学DIV+CSS技术,如何入门?; XHTML+CSS制作样式风格切换的WEB站点; 解决IE6.0、IE5.0、IE5.5差异; DIV+CSS制作的个性水平导航菜单实例; css里expression实现界面对象的批量控制; 利用CSS框架进行高效率的站点开发 Elements; CSS模块化设计：从空格谈起; 在IE流览器中正确显示PNG透明图片; CSS样式表创建美妙绝伦的网站; 性感的CSS菜单(Menus); CSS教程关于css框架网页设计; 以HTML为基础学习DIV+CSS; 提高CSS文件可维护性的五种方法; dl、dt、dd 标记来改造163邮箱的广告条; WEB前端涉及的布局、结构化和标准化; CSS网页制作布局实例教程; CSS教程：认识层叠规则互相作用; ul结合CSS制作网页相册滑动浏览效果

No. « ‹ 91 92 93 94 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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可阅读性