将CSS按照层叠式结构化重新组织与构建

从新组构后的代码：

能够看到，处置后的文件比本来的结构更加清楚、组织更加整齐、作风非常一致。另外，重组后的代码还可以直接下载使用。

原代码：

#menubar .menus {
 
 
    background:#E9EEF1;
 
    float:left;
 
 
    padding:0 10px;
 
 
}
 
 
#menubar .menus li {
 
 
    float:left;
 
    border-style:solid;
 
 
    border-color:#FFF;
 
 
    border-width:0 1px;
 
 
    margin-left:-1px;
 
 
    list-style-type:none,将CSS压缩至一行的十个步骤;
 
 
}
 
 
#menubar .menus li a { display:block;text-decoration:none;padding:5px 10px;}
 
 
#menubar .menus li a:hover {
 
 
    background:#EEDDCC;
 
    list-style-type:none;
 
}
 
 
#menubar .menus .current_page_item {
 
    background:#FFF;
 
 
    font-weight:bold;
 
 
}
 
 
#menubar .menus li.current_page_item a:hover {
 
 
    background:#FFF;
 
 
}

咱们来看看应用的后果：

#menubar .menus {
    background:#E9EEF1;
    float:left,导航设计与信息架构;
    padding:0 10px; }
 
    #menubar .menus li {
        float:left;
        border-style:solid;
  ,导航网站目录实战操作技巧;      border-color:#FFF;
        border-width:0 1px;
     ,导致网站最终失败的十个原因;   margin-left:-1px;
        list-style-type:none; }
 
        #menubar .menus li a {
            display:block;
            text-decoration:none;
            padding:5px 10px; }
 
            #menubar .menus li a:hover {
                background:#EEDDCC;
                list-style-type:none; }
 
    #menubar .menus .current_page_item {
        background:#FFF;
        font-weight:bold; }
 
    #menubar .menus li.current_page_item a:hover { background:#FFF; }

『Styleneat』CSS 文件结构格局重新组织服务，可以将书写风格混乱的 CSS 文件依照层叠式结构重新组建，便利你进行浏览跟研讨，十分适用的一个在线工具。

您可以通过三种不同的方法使用：1.直接粘贴代码；2.上传 CSS 文件；3.输入 CSS 文件所在地址。另外还有一些选项设置：按照 CSS 的属性、抉择器字母次序排列；兼重组导入的 CSS；多行或单行格式；开启保险重组模式。

编程风格就如人的性情个别，不同程序员（设计师）的书写风格往往不尽雷同，良好的风格更轻易让其余人接收。就拿 WordPress 主题来说，我们或者更偏爱于使用代码风格良好、合乎我们口味的主题文件。而对那些纷乱不堪、难以阅读的 CSS 文件,导致网站可用性差的十个最常见问题，在我们不得不去研究的时候该怎么办？您可以使用『Styleneat』将 CSS 的 selectors（挑选器）、sub-selectors（子取舍器）和 properties（属性）按照层叠式结构化重新组织与构建，从而让 CSS 文件更加整齐易读，这样就能更容易地定义页面布局和查看不同结构之间的关联了。