六月 2008

CSS的优先级与特殊性

即使在不太复杂的样式表中,也可能会有两个或者更多个规则找到同一元素。CSS通过一个叫做层叠(cascade)的过程处理这种冲突。层叠给每个规则分配一个重要程度指数。作者定义的样式具有最高的重要性指数,其次是用户定义的样式。但是为了增强用户的控制能力,用户可以通过为任何规则增加一个!important来提高它的重要性指数,让它的优先级高于任何规则,甚至是比作者的!important还要高。

因此,层叠重要性指数的次序依次为:

阅读全文——共1766字

Continue reading...

使用CSS简单实现垂直居中

学习一些你已经知道的知识也没有什么坏处,是吧?

我知道这可能并不一定非常有意义,但是很多时候我们往往知其然而不知其所以然,这会使得事情出现惊人的差异。这就是CSS的魅力所在,你可以使用不同的方法实现相同的布局。这样的事情同样也发生在了我的身上,某个礼拜,我发现一个网站使用了一种不同的方法来实现居中布局,而这种方法对我们大家来说早已是都是很熟悉知的简单技术了。的确,可能对于大家很多人来说这种方法早已采用过,但是直到今天它起了我的注意。

传统做法:

阅读全文——共4160字

Continue reading...

(X)HTML中最多余的元素标签

    你知道(X)HTML中最多余的标签中是什么吗?在我看来就是这个<a>标签,不错,就是每个网站使用最多的超级链接标签<a>。也许有些人会认为我在哗众取宠,说大话。的确,没有超级链接的网页仅仅是一个“文件”而已,没有超级链接也就没有Internet(万维网)。但是,我这里说的<a>标签(元素)而不是超级链接。或者换个简单的说法,我认为超级链接使用<a>标签的设计很不合理。

    为什么这么说呢?先看看<a>标签的使用方法:

阅读全文——共1221字

Continue reading...

一种有创意的CSS命名规则

    关于CSS中的命名规则(其实我觉得是XHTML元素的命名规则更加合理些)这个问题,已经有很多人在说了,其中也不乏一些真知灼见。不过这种东西也是仁者见仁,智者见智,只要一个团队有统一的命名规则要求,在日常开发和维护中不至于出现混乱就应该说是好的命名规则。比如下面这条基本的命名规则:

CSS开发命名规则

阅读全文——共1348字

Continue reading...

Internet Explorer中雅黑字体给布局带来的变化

    5月20日,微软正式提供了Windows XP下可用的雅黑字体下载,雅黑字体是一款近乎完美的字体,解决了宋体小文字无法辩认的问题,特别是对于液晶显示器(LCD),在开启ClearType效果之后,你就会得到一个更加完美的视觉享受。我现在已经对雅黑着迷了,回头看默认为宋体的系统,锯齿太明显了,很丑。

    但是这样随之而来的问题是,雅黑会对Internet Explorer中的布局页面影响。目前我发现的问题主要存在于两个方面:

阅读全文——共1351字

Continue reading...

微软为你设计的未来——看病也这么酷

我们生活在一个信息化的时代,IT产品几乎渗透到了我们生活的每一个角落。作为“性命攸关”的卫生保健领域,也自然不能例外。不过相比于消费电子领域而言,卫生保健方面的IT产品还不够大众化,也似乎没有多少像iPhone、Surface以及Wii这样耳熟能详的炫酷产品。

可是,你知道在全球顶尖IT企业微软的眼中,未来世界的个人卫生保健将会融入什么样的IT技术吗?那就来看看下面这段刚刚在微软MIX08上发布的一段视频吧。看过之后,你一定会感叹,原来看病也可以这么酷!

http://www.youtube.com/v/6F1u36Y-qlE&hl=en

Continue reading...

说说页面中header的XHTML结构选择

    页面中header部分一般位于最上端(有时根据需要也会位于某一侧,不管它在页面中的位置如何,在XHTML代码中它总是优于其它元素先加载),内容主要包括网站名称(Logo,次级标题可能是网站的一句口号等)和网站的导航部分。在推行Web标准的现代网络中,Web中对于header的代码结构似乎已经趋于稳定化。下面是一个典型的header代码结构:

<div id="header">

阅读全文——共2100字

Continue reading...

那些被我遗忘掉的XHTML标签们

    突然发现自己对Web前端技术掌握得很少很少,就是自己最感兴趣的XHTML+CSS部分知道也不算多。在XHTML 1.1规定的诸多元素中,我平时能用到的只有那么几个,有一半吧,其余得很少在设计中用到。这并不是说没有可以使用的地方,而是自己对他们的使用缺乏了解,即便他们的使用范围本来就很窄,但是他们能从HTML过度XHTML中,说明他们有不可替代的地方。在不断追求Web标准的今天,前端开发者们应该让每个XHTML标签都有用武之地,否则更不用谈什么Web2.0了。

阅读全文——共3170字

Continue reading...

Internet Explorer 8 Beta 2 八月发布,全面支持CSS 2.1

根据微软Internet Explorer开发团队博客的消息,Internet Explorer 8 Beta 2将于今年8月发布,并且将全面支持CSS 2.1。这无疑是一个好消息,Internet Explorer 在7.0之前以其糟糕的标准支持而让Web开发者头疼不已。无论是DOM模型还CSS模型,IE都有自己独立于W3C标准之外的标准。因此,Web开发者不得不在W3C的标准之外再单独为IE设计一套方案,因为Internet Explorer拥有85%左右的市场份额。即便是到了Internet Explorer 7.0 对于CSS 2.1的支持还不够完全,这比Firefox、Opera等现代浏览器要落后很多。

阅读全文——共893字

Continue reading...

清除浮动(闭合浮动元素)的方法总结与选择

很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美。闭合浮动元素(或者叫清除浮动)是web标准设计中经常会遇到的一个问题,因此,这里我想总结一下目前经常用到的几种方法,并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。

问题的提出:

最简单的一种情形就是我们把一个小的、固定宽度的div元素(比如导航、引用等)和其他元素内容一起包含在一个大的div中。比如下面这段代码:

阅读全文——共2920字

Continue reading...