CSS编辑器:TopStylePro使用技巧

大家在编写css的时候可能认为记事本并不是最棒的,有什么css编辑工具可以提高我们编码的效率呢?   topstyle(点击下载:topstyle v3.5 beta 4)是我一直用的css编辑工具,最开始就是瞎用也没有仔细研究过,不过后来把里面的功能仔细看了看发现它的功能真是太强大了!   在这里分享一下使用经验,我在编辑css时常用的快捷键:   文字注释:shift+ctrl+m   向右缩进:shift+ctrl+.   向左缩进:shift+ctrl+,   下一个css:ctrl+]   上一个css:ctrl+[   选颜色:shift+ctrl+c   保存以后不能撤销(ctrl+z)?   我们给改过来,选项位置:options--editor--选择enable undo after save   自动替换   比如你打"!i"然后按一个空格,topstyle就自动将"!i"替换成"!important"   选项位置:options--editor--auto replace 你也可以自己添加快捷输入。   树型css   有时候是不是觉得css太多了不好浏览?topstyle提供了一个将css内容隐藏只显示选择器名称的缩略形式,很方便。   选项位置:options--editor--rule collapsing 选择enable rule collapsing   快速校验   快捷菜单中的w3c css validator 和w3c html validator按钮很方便,编辑完直接一点就能知道是否通过了校验。   样式表清道夫   下面隆重推荐topstyle自带css整理功能。样式表清道夫 style sweeper。它能把你的css整理的非常工整,规范。一个非常不错的功能。   选项位置:tools--style sweeper   rules 规则面板:rule format 可以设置单行多行显示。   combine rules 设置是否将有相同属性的css组合。   selectors 选择器面板:selector case 设置选择器的大小写。   selector order 设置选择器的排序方式。   property属性面板:property case 设置属性的大小写。   property order 设置属性的排序方式。  shorthand properties 缩写属性面板:可以选择将font、background、margin、padding属性缩写。   others 其他属性面板:   color format 颜色格式:可选择十六进制、rgb、颜色名称等。   说了这么多还是希望大家在实践当中不断的提高自己的css能力,topstyle是个不错的好帮手!

时间: 2024-08-30 10:51:25

CSS编辑器:TopStylePro使用技巧的相关文章

CSS高手分享精典技巧

CSS高手分享精典技巧 一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次.对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权重要比class大. 三.一个兼容性调整(IE和Mozilla)的笨办法: 初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或

CSS的优化与技巧

css|技巧|优化 使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就不展开描述.二.明确定义单位,除非值为0忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格.三.区分大小写当在X

网页制作知识:浅谈CSS编码与组织技巧

css|编码|技巧|网页 如何让 CSS 代码简洁而易于编写?这恐怕是许多开发者都关心的问题.我想,大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间. 组织你的样式表 尽管我们有种种 CSS 的开发工具,比如 TopStyle,比如 StyleMaster,它们可以让你对当前这个样式表里面定义了哪些规则,涉及哪些 class,哪些 ID 一目了然,但这不等于说你

DIV CSS制作网页之浅谈CSS编码与组织技巧

css|编码|技巧|网页 如何让 CSS 代码简洁而易于编写?这恐怕是许多开发者都关心的问题.我想,大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间. 组织你的样式表 尽管我们有种种 CSS 的开发工具,比如 TopStyle,比如 StyleMaster,它们可以让你对当前这个样式表里面定义了哪些规则,涉及哪些 class,哪些 ID 一目了然,但这不等于说你

详解CSS的规范及技巧

CSS在网页设计中经常使用,有很多朋友还是会写CSS,但是写出来的都不规范,不需要的css样式,可以简介的样式很多很多.     本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案,我愿意把这些与你分享,我会重点解释一些新手容易犯的错误(包括我自己也犯过的),如果你已经是CSS高手,这些经验技巧可能已经都知道,如果你有更多的,希望可以帮我补充. 一.使用css缩写     使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就

CSS常见11条技巧与经验收集

在使用css过程中难免会碰到一些常见的bug及浏览器兼容方面的处理,下面与大家分享下CSS常见的11技巧与经验,喜欢web前端的朋友可以参考下,希望对大家有所帮助   1.如何清除图片下方出现几像素的空白间隙? 复制代码 代码如下: 方法1: img{display:block;} 方法2: img{vertical-align:top;} 备注:除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length>和<pe

分享5款Linux系统下免费的 CSS 编辑器

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   一台计算机系统不能没有操作系统,大公司的开发者也开发过不复杂易于使用的操作系统.而Linux被认为是复杂的系统,它仍然是最常使用的系统,当然不仅仅是开发者和极客会使用,也可能是日常生活中的你或我,也喜欢它.因为它的神奇般的稳定因素和应用的拓展水平,都比Windows OS好得多. 互联网上,有很多工具为网页设计者和开发者而准备的.今天我要分享一款适用于linux

CSS writing-mode 的特别技巧

本文讲的是CSS writing-mode 的特别技巧, 最近在 Opera inspector 中编辑 CSS 时,我第一次注意到有一个名为 writing-mode 的 css 属性.经过一番搜索,发现它是用于垂直排版的语言,比如中文或者日文.然而,有趣的是如果我们把它用在英语中,可以很方便的创建垂直文本. writing-mode 属性定义了文字在文文字块中垂直或者水平方向,参考MDN. 默认的书写模式 支持这一属性的浏览器默认将这一属性设置为 horizontal-tb .这将作用于水平

Ubuntu/linux 下的8款经典免费的CSS编辑器整理

本文我们推荐8个在Linux为核心的发型系统上免费的css代码编辑器,非常的经典. 1)jEdit jEdit是一款成熟的文本编辑器,其背后凝聚了许许多多人多年的开发汗水.下载,安装,然后设置,就可以快速轻松地进入jEdit启动页面. 官方网站:http://www.jedit.org/ 2)Bluefish Bluefish是一款功能强大的编辑器,为程序员和web开发人员提供了许多编写网站.脚本和编程代码的选项.Bluefish支持多种编程和标记语言.并且Bluefish是一种多平台的应用程序

浅谈CSS编码与组织技巧

如何让 CSS 代码简洁而易于编写?这恐怕是许多开发者都关心的问题.我想,大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间. 组织你的样式表 尽管我们有种种 CSS 的开发工具,比如 TopStyle,比如 StyleMaster,它们可以让你对当前这个样式表里面定义了哪些规则,涉及哪些 class,哪些 ID 一目了然,但这不等于说你的样式表就组织清晰了,随写