通常用户看到的页面的样式会受到三层控制，第一层是浏览器的默认样式，第二层是网页定义样式，第三层是用户自定义样式。和CSS一样，后面的优先级高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能，但是极少数会有用户去自定义，一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

以后准备使用如下默认字体样式：

body{
  font: 12px/1.5 arial;
}

阅读全文 »

去年曾总结了《IE对CSS样式表的限制和解决方案》中限制的第4条写道“一个CSS文件的不能超过288kb？”，这是一个疑问句，当时没有重现出来且参考来自Internet Explorer CSS File Size Limit。今天终于看到了IE在CSS上的另一个限制：IE中每个style标签或css文件的选择符个数不能超过4095。其实style属性也应该有这个限制，但是几乎不可能发生。这个限制在IE6、IE7和IE8中存在。请看IE关于4095个选择符限制的DEMO。

阅读全文 »

CSS3草案中定义了{opacity: | inherit;}来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而IE则很早通过特定的私有属性filter来实现的，所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支持的用CSS实现元素透明的方案：

阅读全文 »

两年前发表的《The visual design of Web 2.0》中提到“Rounded everything”，圆角因使人感觉舒适的友好风格而变得无处不在。这个无处不在也让很多前端工程师累个半死，YAHOO Performance Research Engneer Team的Nicole在讲演《Designing Fast Websites》中用的副标题是don’t blame the rounded corners!，从侧面也说明了圆角给实现者带来的困扰：实现麻烦、兼容困难、性能不佳。而W3C早在2002年的CSS3草案中就加入了一个叫border-radius的属性，通过它可以直接来定义HTML元素的圆角。 阅读全文 »

Java一直标榜一句老话叫“编写一次，到处运行(Write Once,Run Anywhere)”，CSS也差一点点做到了。但就是为了差的一点点往往需要大量的工作，虽然这并不是CSS的错。基本上别妄想兼容所有的解析器了，仅仅是为了让网页在YUI中列举的A级浏览器呈现一致就不是一件特别容易的事情。虽然通过精心的组织HTML结构加上使用最合适最通用的CSS代码可能实现多浏览器呈现一致，但当在视觉的过度设计、精确到像素的规定和前端快速实现的要求的前提下，可能你不得不为不同的浏览器写不同的CSS代码，这就是CSS Hacks了。我们的目标是保持CSS简洁和没有CSS Hacks，但即使多年以前就呼吁Keep CSS simple的PPK也不得不在他的网站中使用CSS Hacks，即便如此其站点在所有的A级浏览器中也无法保持一致的呈现。所以，下面这个我常用的CSS Hacks列表或许有些用： 阅读全文 »

今天是Firefox3的2008下载日(貌似北京时间是6.18的凌晨1:00)，这就意味着Firefox3正式发布了。Firefox3有众多的改进和新功能，我最关注的功能之一是“全页面缩放（Full page zoom）”。这就意味着Firefox3和Opera以及IE7+都可以让用户“完全控制显示内容的大小同时自动调整页面布局和结构”，说白了就是可以让整个页面直接放大或缩小却不会乱掉。这就意味着我们不用再考虑为了可访问性而整个页面是基于字体大小（em）的设计了。 阅读全文 »

HTML文档与CSS的关联常见有4种方式：

1. 使用link标记

   <link rel="stylesheet" type="text/css" href="sheet.css" />

2. 使用style元素

   <style type="text/css">
   body{background:#fff;}
   h1{font-size:2em;}
   </style>

3. 使用@import指令

   <style type="text/css">
   @import url(sheet1.css);
   @import "sheet2.css";
   </style>

4. 使用style属性的内联样式(inline style)

   <p style="color:#f00;">这是红色的字</p>

在实际应用中，使用style属性的内联样式是不推荐使用的，XHTML1.1已经将其标准为不建议使用，原因很简单这种方式不比font标记强多少，削弱了CSS集中控制整个文档外观的优点。前3种方式利用了link标记和style标记，在IE(包括IE6、IE7和IE8 beta1)中有如下限制： 阅读全文 »

每个浏览器都有自己的默认样式，这是一段预定义的CSS，用以简单地呈现网页。在Firefox中的地址栏中输入resource://gre/res/html.css即可以看到该浏览器的默认样式。在Firebug 1.2 Alphas的styles中就可以看到默认样式对页面定义样式的影响。毫无疑问，理解和学习浏览器的默认样式能更好的理解浏览器对解析样式和呈现页面。Firefox3和Firefox2相比，默认样式仅有8处不同，但这些改变也可以让我们感觉到Firefox3在样式上的改进： 阅读全文 »

CSS的display有属性值inline-block{display:inline-block;}，下面是应用其来实现用图片替代文字的两个例子：

请看例一。

Markup：

<i class="arrow-1 replacement">箭头1</i>
<a href="http://dancewithnet.com" class="arrow-2 replacement">箭头2</a>
<p class="arrow-3 replacement">箭头3</p>

CSS： 阅读全文 »

2002年W3C推出CSS2.1规范时，给元素的display属性增加了inline-block值。其作用是“这个值导致一个元素产生一个块状盒模型（block box），而本身作为单一的内联盒模型（inline box）流动排列（flow），类似一个被替代的元素。Display值为inline-block的元素内部形成一个块状盒模型，而本身形成类似一个内联的被替代元素”^[1]。即display为inline-block的元素既可以像块状元素一样定义高度宽度，又可以和内联元素（比如文字）排列在一行。

这个效果在页面设计的时候，很多地方都可以带来便利，最常见的莫过于设计导航时，既可以像inline元素那样实现居中，又可以设置像block元素那样设置单个菜单大小，还可以通过text-indent来隐藏文字显示背景图片。请看 演示实例>>>> 阅读全文 »