新组织CSS代码的利器:Styleneat

2016-02-19 17:04 4 1 收藏

下面,图老师小编带您去了解一下新组织CSS代码的利器:Styleneat,生活就是不断的发现新事物,get新技能~

【 tulaoshi.com - Web开发 】

  Styleneat 能够把 CSS 的选择器(selectors),子选择器( sub-selectors)和属性(properties)按照层式结构化重新组织,这样使得程序员更加容易去定义页面区域和查看它们之间的关系。Styleneat 是一个能够帮你重新组织你 CSS 属性的免费服务。

    比如它会把下面这段 CSS 代码

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

id1 { width: 100px; }
id1 .class1 { background: #000; }
id1 .class1 a { text-decoration: none; color: #fff; }
id1 .class1 a span { text-indent: 10px; }
id2 { width: 200px; }

    重新组织成:

id1 { width: 100px; }
    id1 .class1 { background: #000; }
        id1 .class1 a { color: #fff; text-decoration: none; }
            id1 .class1 a span { text-indent: 10px; }
 
id2 { width: 200px; }

    Styleneat 提供三种使用方式:

    直接粘贴 CSS 代码。

    上传一个 CSS 文件。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

    提供 CSS 文件的 URL 地址。

    另外 Styleneat 还提供一些选项,如按照 CSS 选择的字母顺序排列,单行格式或者多行格式等。Styleneat 在 CSS 优化方面还是提供了比较多的帮助。

来源:https://www.tulaoshi.com/n/20160219/1614076.html

延伸阅读
标签: Web开发
在div+css布局中,一般都这样来整体构架的: div id="header"/div div id="center"/div div id="footer"/div 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: div id="header" div id="title"这里是网站的标题/div div...
标签: Web开发
!DOCTYPE a href="/keys/html/index.html" target="_blank"html/a PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" head profile="http://www.w3.org/2000/08/w3c-synd/#" meta http-equiv="content-language" content="z...
标签: Web开发
应程序要求,全部用p+类展示。其他要求请自行更改! 关于有序列表OL: 直接对ol定义text-indent:4em;IE内这4em是在序列号前边,FF,GG内,是在序列号和正文中间。 改用对OL使用padding-left:4em !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt...
标签: Web开发
position=定位方式 padding=内间距 margin=外间距 (top=顶边 right=右边 bottom=底边 left=左边) background=背景 background-image=背景图像 background-repeat=背景图像是否及如何铺排 font-weight=字体的粗细 font-family=选择字体 font-size=字体尺寸 display=设置是否及如何显示元素 list-style-type=列表项所使用的预设...
标签: Web开发
1. This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page. 2. In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals ...

经验教程

766

收藏

75
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部