Web字體,尺寸轉換速查表

  在Web设计中,常用的字体尺寸单位有:points(pt)、Pixes(px)、Ems(em)、百分比(%),下面这张表就是这些Web设计字体尺寸单位转换的一个速查表。可能由于字体、浏览器、操作系统的不同,这个转换表只能是一个近似值,但它还是很有参考价值。

Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

[轉載]http://css9.net/web-design-length-convert/

CSS Reset

  在一份CSS Reset中又學到兩招:

  1. 可以用 unicode 來寫中文字體,以解決一些編碼上的問題。
    如:“\5b8b\4f53” 就是宋體,”\5fae\8f6f\96c5\9ed1″就是微軟雅黑。
  2. 重設滚動條,html { overflow-y: scroll; } 可以防止一些閃爍的情況,我知道IE6默認是有滚動條的,但不太清楚是怎麽個“閃爍”法。後來在群中問得個例子:同一個網站中一個頁面内容比較短(不會出現滚動條),另一個頁面内容比較長(出現滚動條),兩個頁面切換的時候會出現一些跳動的感覺。

  因為IE6默認本身就有垂直滚動條,不會有什麽問題,但其它瀏覽器就會出現上述例子的情況。重設了滚動條的樣式就可以解決這個問題。

Continue reading →

[譯文]HTML語義和搜索引擎優化

翻译文字还有待完善,有阅读不通顺的地方请在评论中指出。

导言

什么是POSH ? 不,这不是一些新的网页设计上的时尚的宣传- POSH是Plain Old Semantic HTML(清晰老式语义化HTML)缩写 。 语义的HTML这个词被用于各种各样的事情,但它起源于一个目标:使用语义化的标记和属性建立XHTML文档,而不是用表象的HTML 。POSH这个名词被创造出来,因为一群高度值得尊敬的网页设计师想有一个简短的便于记忆的,能轻松捕捉的语义化HTML本质概念 。
在这篇文章中,我会谈到为什么你应该使用POSH,准确的说是你如何去实施它(很多人很早就开始去做了,一些人或许还不知道他!) ,以及如何有效的使用他提升你的网站的SEO效果。我还会简要的在文章的末尾介绍一下微格式。

Continue reading →

OOCSS

  今天在網上看到一篇文章,内容不多,卻令我知道了一個新的概念:OOCSS。Object Oriented CSS 面向對象的CSS?汗~~還是第一次聽說,太落後了。可惜找不到翻譯,如果懂英文就好了-__-….

下文轉載自:http://www.qianduan.net/object-oriented-css.html

“你如何为成千上万的用户和页面提供CSS?” 这是Nicole Sullivan在她的在丹佛的Web Directions North 大会上的幻灯片中尝试回答的问题。得益于面向对象的CSS (OOCSS),这个想法从社区收集到了大量的反馈。

OOCSS显然已经不仅仅是一个工具了,它还是一种思考的方式。根据这个观念可以有很多优势,主要来说有:

  • 它可以让你写更快的、可维护的、基于标准的前端代码。
  • 它在CSS中预先加入了一些必须的元素,这样即便是初学者也可以参与写出漂亮的网站。

OOCSS 基于两个主要原理:

  1. 分离结构和表现;
  2. 分离容器和内容。

建议花些时间看一看面向对象的CSS的幻灯。总共有64页,绝对值得一看。
《Object Oriented CSS》

View more documents from Nicole Sullivan.

 
 

延伸閲讀:ppt 翻譯《CSS之繼承詳解》

View more presentations from 张 鑫旭

[譯文]CSS水平等級

原文作者:Emil Stenstr?m
原文地址:Levels of CSS knowledge http://friendlybit.com/css/levels-of-css-knowledge/

你应该已经知道我现在非常推崇web标准。现在普遍流行的标准是:用(X)HTML来表示页面结构,用CSS来设计样式,而用Javascript来表现行为。现在很多人都已经熟悉HTML,它从web发展的初期就已经出现了,你可以到处找到它的教程。CSS正慢慢被人们所掌握,大公司们开始把它们的网站转移到css布局,网站开发者的博客圈也在影响着越来越多的人。

当你向大家推广web标准的时候,跟我们大部分人一样,你会给和很多人讨论。如果是在类似EFNET上#CSS这样的在线聊天室推广的时候你会更清楚的发现:里面的人们对CSS了解有着很多不同的级别。这篇文章就准备按等级列出这些不同级别的开发者是怎样影响着web的。现在开始:

等级0
“CSS(Counter-Strike Source:反恐精英-起源)? 不是那种多人游戏么??”

这些人可能从未制作过网页。也许他们用过纯HTML设计但他们几乎不知道他们曾经做过什么。我们在#CSS(聊天室)遇到过这么一些人,倒不是他们打算开始学习web标准而是因为他们进错了聊天室,大部分以为进入的是Counter-Strike Source(反恐精英-起源)。没有必要为这些人担心,他们这辈子可能永远也不会去做网页所以不会带来什么害处。

等级1
“哦,我有时候用它去掉链接的下划线。”
Continue reading →

No tags for this post!!