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

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

CSS样式表: 分页显示之超级提速版; 兼容多浏览器实现半透明(Opera ie firefox); 解析IE, FireFox, Opera 浏览器支持Alpha透明的方法; utf8和unicode编码究竟是什么关系？有何区别?; XHTML下css+div布局总结超强推荐; 在IE下拖动滚动条时border消失的解决方法; CSS中常用的单位; 有关表格边框的css语法整理(1); 中文排版CSS心得; 一个针对IE7的CSS Hack; css也疯狂! 用background 插入flash播放器; 如何解决下拉菜单被flash覆盖的问题; 网页中关闭IE的图像工具栏和XP主题; 解决IE升级后Flash线框问题; em px的关系; 在iframe中隐藏横向滚动条的方法大全; Iframe自适应其加载的内容高度; 固定右栏宽度, 左栏内容先出现同时自适应宽度的布局; IE Bug--浮动对象外补丁的双倍距离的解决方法; 解决IE7以下版本不支持无A状态伪类的几种方法

No. « ‹ 33 34 35 36 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 130 ::

收藏到网摘: n/a

CSS实例:精简代码的兼容各浏览器的滑动门英文教程:CSS的Float

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

图：

你还有什么好方法？

CSS实例:精简代码的兼容各浏览器的滑动门英文教程:CSS的Float

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

评论 (0) All

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