omiga » css

EditPlus使用详解

omiga — Wed, 23 Dec 2009 12:55:34 +0000

EditPlus（EP）帮助手册中列出了EP的主要功能：

语法高亮
Internet功能
HTML工具栏
文档选择器
用户工具和帮助文件
自动完成
素材文本窗口
文档模板
其他功能

其中“语法高亮”，“自动完成”和“文档模板”在EP中非常灵活，用户皆可根据自己需要进行配置。EP默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript 和 VBScript的语法高亮显示，基本上无需再做过多设置。而“自动完成”和“文档模板”默认支持有限，而且可能并不符合个人日常的一些编码习惯，那么则需要我们自己根据习惯进行配置，才能得心应手。

自动完成

自定义自动完成功能可分为两步：1.编写自动完成文件；2.指定关联路径。

#TITLE=CSS
;EditPlus Auto-completion file v1.0 written by wondger(http://omiga.org).
;This file is provided as a default auto-completion file for CSS.
#CASE=n
#T=reset
/*reset*/
body,h1,h2,h3,h4,h5,h6,ul,ol,p,dl,dt,dd,th,td{margin:0; padding:0;}
table{border-collapse:collapse;}
li{list-style:none;}
em{font-style:normal;}
img{border:none;}
a img{vertical-algin:top;}
/*reset*/
#T={
{^!}
#T=m
margin:^!px;
#T=ma
margin:0 auto;^!
#T=mt
margin-top:^!px;
#T=mr
margin-right:^!px;
#T=mb
margin-bottom:^!px;
#T=ml
margin-left:^!px;

以上为一段CSS自动完成文件代码。自动完成文件每个语句必须以“#”开头。

#TITLE – 为自动完成文件标题
#CASE – 指定是否区分大小写。‘y’表示是，‘n’表示否。默认值是‘n’。
每个自动完成片段以“#t=title”形式的开始。title是你要你扩展的缩写词，换行后开始匹配自动完成文本，直到遇到“#”符号。如：

#T=m
margin:^!px;

^! – 指定每一次自动完成后光标的停留位置。
^ – 转义字符，如果需要在自动完成文本中插入“^”或“#”则需要先进行转义：“^^”，“^#”。

自动完成文件编写完成后，保存为.acp文件在任一文件目录即可。

随后打开“工具”菜单-“首选项”-“文件”-“设置和语法”，为相关文件类型设置自动完成文件，“确定”完成设置。

自此自动完成功能配置完成，在对应类型的文件编码中，空格触发自动完成功能。当然，你可以通过Shift 键或Window徽标键来暂时禁止此功能。

文档模板

我们日常处理的不论是HTML文档，还是CSS,JavaScript文档，都存在一定的文档规范，比如版权信息，title，keywords，description，或者一些固定的文档结构。我们显然不希望每次新建这些文档的同时，都需要重新录入这些代码，即使是“Ctrl+v”也还是有损效率。那么EP的“文档模板”则可帮助我们完成所有的工作。

自定义“文档模板”也分为两步：1.编写文档模板，2.关联模板

编写文档模板非常简单，无任何语法。比如，我需要一个HTML文档模板，那么新建一个HTML文档如下。






title | wondger@gmail.com/

根据个人需要编写模板完成后，保存为.html在任一文件目录。

随后打开“工具”菜单-“首选项”-“文件”-“模板”，在模板列表中选择相应模板关联模板文件即可。模板可以是默认模板，也可以新建模板（MY_PAGE）。

这样便完成“文档模板”设置，现在文件新建菜单中便可选择新建该模板文档。（其实你还可以自定义新建文档快捷键，稍后介绍）

其他功能

自定义快捷键

EP所有操作的快捷键皆在“工具”菜单-“首选项”-“工具”-“键盘”中进行设置。我们以新建模板文档为例。

在“文件”菜单的“命令”中并不存在新建的“MY_PAGE”模板，那么如何自定义“新建MY_PAGE文档”的快捷键？其实这里存在一个对应关系，在“文件”菜单的“命令”列表中存在一个“模板1”-“模板20”的选项列表，这就对应于我们的自定义模板。

在EP的模板列表中默认的HTML和XHTML模板无法删除，那么我们自定义的模板则按照从上到下的顺序为“模板1”、“模板2”…（其实我在想第21个自定义模板怎么办？-_-!）。这里“MY_PAGE”对应于“模板5”，在设置快捷键的时候会提示该快捷键是否已定义，如果分配已定义的快捷键，那么较早的定义会被覆盖。一个命令可以定义多个快捷键。

自动保存

EP具有定时自动保存的功能，保存间隔时间可在“工具”菜单-“首选项”-“文件”中进行设置。

保存时创建备份

EP默认会在保存时自动创建一个.bak备份文件。备份文件存放目录，后缀名皆可自定义。

HTML工具栏

EP具有强大的HTML工具栏，具有插入图像、选择颜色、插入特殊字符、表格、段落、列表、注释、表单等丰富功能。这个HTML工具同时也是可以在“工具”菜单-“首选项”-“工具”-“工具栏”自定义。

OK，以上内容为个人认为是在EP使用中较多涉及的一些功能。除此之外关于软件本身的一些设置，如字体，颜色，背景，布局等，大家就慢慢折腾吧！

纯CSS实现IE6 max-width

omiga — Fri, 13 Nov 2009 09:32:52 +0000

前段时间看到的一个纯CSS实现IE6 max-width属性的方法。原理就是通过两个浮动层（leftpad,rightpad）的负边距来构成一个“内容区”。

没有什么其他好解释的了，看下图，再看下例子：center,left,right。

CSS Naked Day 2009

omiga — Wed, 08 Apr 2009 06:48:05 +0000

今年的裸奔节又到了，具体裸奔方式参阅http://naked.dustindiaz.com/

如果你使用的是WP，安装一个插件就可以了～···

今晚零点准时扒皮裸奔，为期48小时～···

精通CSS？

omiga — Mon, 09 Feb 2009 09:37:32 +0000

经常看到些招聘都要求精通CSS，然后后面也会有一大群人信心十足地回复“精通CSS”“手写代码”“通过W3C验证”“兼容IE5678,FF,opera,safari…”，姑且对你对自身认识的准确度不谈，你所罗列的这一大堆东西你真的觉得是有意义的吗？

难道CSS的最高境界就是熟知各浏览器的对HTML/XHTML，CSS解析的差异性，然后熟记一大堆hack技巧？表现上差异性，hack技巧可以说都是可以量化的，是可以通过付出时间成本来获取的。你用了两年的实际工作时间，通过你的辛勤实践总结掌握了很多不同浏览器表现上的差异性，也通过各种手段解决了这些差异性，做到了完美的兼容，你觉得你很有经验，你精通了CSS，你很牛叉了。可是事实上，你引以为傲的这些东西，一个勤奋的学生可能通过书籍、搜索引擎两个月就搞定了。然后某天，浏览器市场在经过多年的厮杀和开发者的口诛笔伐后实现了天下一统，你所有的付出、你所有的经验、你所有的精通就会在一夜之间迅速贬值！这一天是完全可以预见的！

但并不是说研究浏览器对HTML/XHTML、CSS解析的差异性毫无意义，熟知这些东西对提高工作效率还是相当有帮助的。只是它的意义远没有到要把它当着神一样膜拜的地步，也绝对不应该成为你学习CSS的终极目标。

知识技术的研究要么是基础研究要么是应用研究的。显然，对于大多数开发人员而言都属于应用层面的研究，所要做的就是如何灵活运用已有的技术成果高效率的去完成工作。而具体到web前端开发，具体到页面制作人员，重心就应该是在如何去构建简洁、强壮、易扩充和高效的代码上面！而不是成天在无数个浏览器之间来回切换地去寻找表现差异性的规律，它们在很多时候就是没有规律的，还有很多时候是你庸人自扰，本来可以很简单的页面结构你却写的更复杂，兼容性问题自然就会更多，这就是自己给自己制造麻烦。浏览器自身的缺陷留给他们自己去解决，你的没日没夜的辛勤劳动在那帮开发浏览器的家伙眼里也就是自作多情罢了。

简洁、强壮、易扩充和高效的代码不但能提高页面效率的，为JS编程提供良好的接口，同时能够大大的提高开发效率和质量。但是这个却是很难从书上看来的，只能在实践中不断的总结积累，属于经验问题。在我刚接触CSS的时候，看了很多到底是该用id还是class的文章（相信很多人都看过～囧～），现在想来价值甚少，到底是用id还是class绝不单单是id只能唯一而class可以重复多次使用的问题，你还得为JS编程提供了好接口作更多考虑～···大型项目样式文件结构的安排，命名规则，页面结构往往也并不如想像中那样随意和简单，经验问题，仁者见仁，智者见智。

兼容性的研究，适可而止，不要走火入魔！好久没更新，随便扯两句～···

中文按钮完美显示方案

omiga — Sat, 20 Dec 2008 06:17:30 +0000

先看这段代码在不同浏览器中的表现。

代码：

在各浏览器中的表现：

可以明显观察到在默认样式下IE6/7中文按钮显示主要存在两个问题：

文本无法正常垂直居中
按钮中文本与左右边框的间距会随文本长度变化，而不是一个固定值

那么一个按钮正常的默认样式是怎么样的？我们可以通过Firebug观察button的“盒模型”，如下图：

Firefox中按钮默认有2px的边框，6px的左右内边距。

注意：以上测试都是在windows经典主题下完成，而不同主题下的按钮的样式是有所差别的。比如我最初使用的MCE 2005主题下按钮的边框宽度为3px。

在上面的测试中似乎IE8 beta2已经比较完美了，其实不然。我们对按钮的高度做一些改变，你就会发现IE8还没有想象中的完美，如下图：

可以看到，事实上IE8(b2)中，按钮中的文本（包括英文文本）是固定在距按钮上边框4px的位置，看起来情况比IE6/7还要糟糕！当然IE8(b2)已经解决了左右内边距随文本变化的问题，而且IE8也还是beta版本，希望能在正式版中修复这些问题。

而对于IE6/7（更低版本没测试）中按钮文本与左右边框的间距随文本长度变化的问题就不仅限于中文文本的按钮，所以似乎早在05年就有人提出了解决办法：http://jehiah.cz/archive/button-width-in-ie

具体方法即是重置padding：

.button{
    overflow:visible; /* for ie6/7 */
    padding:0 6px;
}

该方法存在一个明显的缺点：IE6/8中按钮的高度会增加1px。

（更新说明：经过进一步测试发现IE6/7中文本与左右边框的间距并不是附加在按钮上的左右内边距，而是附加在文本上的某种边距。个人认为overflow:visible;在此正是用于清除该边距。）

而对于中文文本无法正确居中对齐的问题，在我和TZ讨论一天后似乎也没找到一个比较满意的解决方案。暂时只能通过line-height来解决，而且还得使用hack来解决重置padding后增加的1px高度问题。

line-height的具体取值就去这里看看吧：http://fedcn.org/?p=3

XHTML&CSS_reference

omiga — Mon, 03 Nov 2008 03:31:10 +0000

和TZ一起弄的，多的不说了，拖了很长时间了，由于各种原因，与初衷相去甚远。XHTML手册比较像手册，CSS的就像本教程了。但是如果说是教程又显得简单了点，说是手册又详细了点，都不像了～···但是还是有一定参考价值的，比较详细地介绍了一些XHTML和CSS最基础的东西～···
BI地址：http://bbs.blueidea.com/thread-2894326-1-1.html

纯CSS实现tab切换

omiga — Wed, 29 Oct 2008 14:01:40 +0000

Demo

前两天在一个页面中使用锚点时偶然发现了纯CSS实现tab切换的方法，其实在很久很久以前就有人实现过了，但是我从没留心过，也从没看过具体的实现方式。因为JS其实也很简单，但是如果纯CSS能实现当然再好不过了。

但是，遗憾的是这种方法opera不支持～同时这种方法确实限制也比较多，比如往往需要设置另外的样式来区分当前激活的tab，纯CSS显然是无法做到的。所以如果要求不是很高，不用兼容opera，这种纯CSS的写法还是可以选择的！

wordpress主题—ND

omiga — Tue, 28 Oct 2008 13:30:38 +0000

前几天说要做个主题，原因有四：

原来的techicon真的用了很久了，虽然很好，还是视觉疲劳了
techicon不是自己做的，虽然我改了很多东西～···
techicon的宽度是固定的，晚上回家用宽屏看，很不爽～
呃～没有4了～···

其实早就在说自己做个theme，也画过好几张图，也写了几段代码，但是每次在中途就被我自己扼杀在摇篮中～:)

ND其实和techicon在布局上差别不大，我太喜欢techicon的三栏布局了，所以继续沿用。配色最开始主体部分用的白色背景，着实闪眼睛，液晶屏更甚，所以最后加了点灰色，减小了对比度，看着舒服多了。

遗憾：

CSS中两处使用了hack～···（静态页面很完美，套上WP的主题标签，出问题了～至今没有得解！）
Micro-Blogging页面fanfou API中的时间格式太BT了吧~很脑残！
widget支持有点问题，但是我不用widget，无视～···

Firefox，Opera不支持通用字体系列名定义

omiga — Mon, 13 Oct 2008 04:27:07 +0000

为了保证页面字体的通用和兼容性，通常都会为字体设置一个字体系列，而且往往会在最后加上该类别字体的通用字体系列名。如：

p{font-family:Arial, Helvetica, sans-serif;}
h1{font-family:"Times New Roman", Times, serif;}
pre{font-family:"Courier New", Courier, monospace;}

但是事实证明Firefox和Opera并不支持通用字体系列名称的字体定义！事实说明一切～

2008-10-14日更新

非常感谢Csineneo的留言，Firefox和Opera必须手动设置通用字体方可生效！但是我仍然有一点疑问，不管是FF还是Opera这个过程都无疑增加了用户的使用难度，而且用户“不准确”的设置必然影响页面的显示效果，毕竟不是所有的用户都知道哪些字体属于衬线字体，哪些字体属于非衬线字体，哪些字体属于等宽字体～···难道FF和Opera无法自动选择合适的通用字体？

附：List Of Web Safe Fonts

textarea，input和select的继承性

omiga — Thu, 11 Sep 2008 05:22:12 +0000

在目前我所有的浏览器中，textarea，input和select这三个标签默认无继承性。测试

IE8 beta2和非IE浏览器中通过为样式属性指定继承性(inherit)可解决该问题。测试

IE7及以下版本此三个标签的继承性问题尚无法解决。只能通过另为其书写样式达到效果。测试