26 th

August,2010 | CSS

6款极具实用性的CSS工具

目前,随着CSS3的日益流行,开始有越来越多的网站使用CSS3了。可是,目前市面上并不是所有的浏览器都能很好的支持CSS3属性,可能需要对不同的浏览器编写相应的属性或者说是编写hack之类的。如果你也是一个刚开始学习CSS3的新手,就跟我一样,都想让自己提升得更快,那么在此推荐几款CSS3的工具,希望能对你有所帮助。这也是本人最近在网上以及在工作中所接触到的一些。

CSS3 Please!

CSS3 Please!是我师傅推荐给我的,是一个CSS3规则生成器。它允许你在线调正CSS属性,同时右侧的一个大大的CSS3,please圆角框内即展示了当前你所处的样式状态,即时预览,非常方便。接着,你就可以拷贝样式到自己的文件里了。

CSS3 Selectors Test

这是一个选择器的测试,它能自动运行一堆CSS选择器进行测试,以检查你的浏览器是否兼容这些样式。它将以绿色表示兼容的样式。你能点击查看每个CSS选择器的检测结果,它将以一个简单的样例来呈现。
Interesting? … Continue Reading… »

31 st

March,2010 | CSS

怎样选择正确的CSS框架

我们在Web开发的时候,如果选择了正确的CSS框架就能快速改进并且节省你的开发时间,因为它提供了一个强大的方式灵活并高效得样式化我们的网站以及应用程序。

那我们该怎样选择适合自己的框架呢?

首先,你要确保你所要用的框架已经建立了并有了能准确描述细节方面的文档。这一步对于你下一步的实施以及使用你准备好的框架,都是至关重要的。然后,你就应该分析你所选择的框架能够解决怎样的问题。不过,当你碰上几个你自认为是最适合这个项目的框架的时候,你应该明智的对它们进行筛选并仔细衡量是否真正符合你的需求。

同样,你可以大胆的去请教其他开发人员或是同事,哪个框架更加合适,为什么选择这个框架。这样可以帮助你在其他有经验者的基础上获取更多有价值的见解。另外一点,要提的就是,你在这次框架选择的过程中扮演怎样的角色.是主要人物?或只是一个乐于帮忙的普通成员而已?它是否能给你带来价值?每个问题都会帮助你决定是否使用所选的框架。

下面让我们看看同时适合开发人员和设计人员的8个最好的框架

Blueprint CSS

Blueprint CSS 框架使用了栅格化系统来预先构建了字体样式并包含多款插件,内建表单样式等等。同时,你还会发现Blueprint具有良好的文档,Wiki,以及活跃的社区组,以及一些使用Blutprint框架的网站例子。
Interesting? … Continue Reading… »

20 th

March,2010 | CSS

关于网页的字体排版

Tags: , ,

页面的字体排版其实是比较棘手的一件事情,本人刚开始在设计页面的时候,对于字体属性的选择一直定不下来,不过在经过了几次设计之后,也稍微做了些总结,现分析如下:

这是我对于比较正规的页面考虑采用的样式

font: 12px/1.5 Tahoma, Times New Roman,Helvetica,sans-serif;

  1. 字体大小采用px为单位, 而不采用em. 因为em的可用性提升其实是很有限的,加上现在主流浏览器都支持“全页面缩放(Full Page Zoom)”功能了,所以基本可以不用考虑用em来实现了。
  2. 行高采用1.5, 也就是18px. 我觉得这是比较符合大家视觉的,相对于12px字体,这个行高看起来非常舒服。
  3. 字体样式默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体,这个字体比较均衡,显示中英文混排很不错,是经久耐看的一款字体。TahomaMatthew Carter为微软公司设计的一款字体,从Mac OS X 10.5开始,默认也捆绑了这款字体。但在Mac OS X 10.4及其之前的系统中,没有Tahoma字体。
  4. 而我将Times New Roman排在第二位,其实这款字体也是非常的耐看的,而且我觉得大家应该可以留意到,在我们用office word开始,这款字体就已经成为默认的英文字体了,可见其经典程度。所以我将其用来作为自己博客的logo字体。还有一款要推荐的字体就是看起来比Times New Roman更经典的系统默认字体,那就是Helvetica,这是一款已经超过50年历史的字体,在设计界的地位似乎无人能敌,大家可以参考这篇文章。已经其实我非常想将Helvetica放在首位的,不过,考虑到非Mac系统的Helvetica字体都是rip版,以及Windows的市场占有率,因此只能委屈Helvetica, 放在第三位了。
    放在最后的sans-serif是针对强悍的Linux DIY族。Linux默认只有kernel, 字体完全由用户自定义,针对这部分用户,sans-serif可能能派上用场。
  5. 最后,无论在XP还是Vista、Win7下,不指定网页的中文字体时,默认就是宋体或是微软雅黑。因此font-family属性里的’宋体’是多余的,可以省去。
27 th

February,2010 | CSS

为你的CSS技术评个等级

Tags: , ,

Reader Patrick,一位IT软件工程师,提出了一个我认为非常有趣的问题:
“对于我的公司,我正在开发一个项目他能让我们的开发者们能检查他们处在哪个特殊的知识领域。根据大多数的范围,我们设置了5个等级。这些特殊的知识领域的其中之一就是CSS。你知道一些很好的能描述你的CSS知识等级的在线材料吗?并且能够更适合开发者们自己能够评估他是否处于哪个等级?

一个读者提出了他在网络上搜寻到的关于这一点点的研究。在这上面呈现出了一些很有趣的事情,但在这篇文章里,1-4等级几乎是初学者而6级是“超级巨星”。那剩下的都在第5等级的CSS开发世界。

我认为如果我们都把我们的思想聚集在一起,就能提出一个更好的系统。我的一个想法就是如果你甚至连CSS不知道是什么,你就不需要一个评估等级,因此我们不必要仅仅为它而用整个等级。我们能指定第一级别给初学者而指定第五等级给高手。现在我们仅仅需要准确的分解那些组成这些知识等级的东西并试着去分解剩下的三个使之成为有意义的技巧。

仅此开始我们的粗略草案。我将会采用任何人在这方面的评测接着开发它使之成为更加充实的评估系统。我可能将它作为一个民意检测,这可能很搞笑~~ Interesting? … Continue Reading… »

19 th

September,2007 | CSS

非常值得期待的好书——《Pro CSS and HTML Design Patterns》

Tags: , ,

现在CSS的书真是不少,本人首先看过的一本是Andy的《CSS Mastery》(精通CSS),最先在国内有销售,接着又出了一本《CSS禅意花园》,也是相当不错的一本书。到年底的时候,Andy Clark将出版《Transcending CSS》,这本书堪称是网页视觉设计王道,很值得期待啊!!!

这里是官方网站:http://www.transcendingcss.com/

Interesting? … Continue Reading… »