CSS编辑器:TopStyle Pro使用技巧

柠檬不萌YY丶

柠檬不萌YY丶

2016-02-19 19:34

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享CSS编辑器:TopStyle Pro使用技巧教程,希望对大家能有一点小小的帮助。

  大家在编写CSS的时候可能认为记事本并不是最棒的,有什么css编辑工具可以提高我们编码的效率呢?

  TopStyle是我一直用的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"

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

  选项位置: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 设置属性的大小写。

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

  Property order 设置属性的排序方式。  Shorthand Properties 缩写属性面板:可以选择将font、background、margin、padding属性缩写。

  Others 其他属性面板:

  Color Format 颜色格式:可选择十六进制、RGB、颜色名称等。

  说了这么多还是希望大家在实践当中不断的提高自己的CSS能力,TopStyle是个不错的好帮手!

展开更多 50%)
分享

猜你喜欢

CSS编辑器:TopStyle Pro使用技巧

Web开发
CSS编辑器:TopStyle Pro使用技巧

虾米编辑器如何使用

电脑网络
虾米编辑器如何使用

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

如何使用135编辑器

电脑网络
如何使用135编辑器

使用资源编辑器编辑对话框

编程语言 网络编程
使用资源编辑器编辑对话框

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

公式编辑器的进阶使用

电脑入门
公式编辑器的进阶使用

FCKeditor在线编辑器的使用

编程语言 网络编程
FCKeditor在线编辑器的使用

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

DesignPattern之FactoryMethod

DesignPattern之FactoryMethod

根据浏览器和分辨率调用CSS代码

根据浏览器和分辨率调用CSS代码
下拉加载更多内容 ↓