blog | 业余项目 | 关于Karry | RSS订阅 | 我在阅读 | 管理

Archive for the ‘XHTML+CSS’ Category

WAP开发相关资源收集

星期二, 五月 11th, 2010

交互原则

  1. Strive for consistency.力求一致
  2. Enable frequent users to use shortcuts.允许频繁的使用快捷键
  3. Offer informative feedback.提供明确的反馈
  4. Design dialog to yield closure.设计对话，告诉用户任务已完成
  5. Offer simple error handling.提供错误预防和简单的纠错能力
  6. Permit easy reversal of actions.应该方便用户取消某个操作
  7. Support internal locus of control.用户应掌握控制权
  8. Reduce short-term memory load.减轻用户的记忆负担
  1. 尽量减少操作的步骤
  2. 尽量利用点击来代替输入
  3. 时刻让用户知道自己所处的位置
  4. 与web保持一致且数据同步
  5. 为输入法让出空间
  6. 摘要形式展现信息
  7. 导航和提示处于明显的位置
  8. 减少滚动

界面简洁的途径：

  • 减少控件的数目，使程序的主功能显然易见，引导用户操作。
  • 当内容过多时，要突出重要信息，便于用户快速浏览。
  • 显示出错信息时，不要只告知用户程序出现错误，要提供有用的信息引导用户完成操作。
  • 手机上网的速度慢，一般在6k/s，这就要求页面的内容尽量精简，避免过多的图片。
  • 页面的内容控制在两屏以内，也不能空白。比如当用户支付电影票之后，不能只显示“支付成功”，可以引导用户使用其他功能。

操作方式

手机操作有物理按键和触摸等多种操作方式，当同样的程序要在多种操作方式下使用，需顾及手指点击时可点区域的大小。使用物理按键时，按钮可以只是两个字，选中控件即可操作，而iPhone的可点击区域最好不低于44×44像素。

分辨率种类（不完全统计）：

  • 128*128  128*160 130*130  176*144  176*220 208*208 208*320  240*160 240*240 240*260
  • 240*320 240*400 240*432 240*480 320*240 320*320 320*400 320*480 345*800 352*416
  • 360*480 360*640 400*800 480*320 480*360
  • 480*640 480*800 480*854 480*864 640*480  800*480

手机浏览器兼容性测试结果概要

注意：以下所说的“大多数”是指在我们测试过的机型中，发生此类状况的手机占比达50%及以上，“部分”为20%到50%；“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖各种特征的手机，但并不代表所有手机的情况。

XHTML部分

大多数手机不支持的：

  • 表单元素的“disable”属性

部分手机不支持的：

  • “button”标签
  • “input[type=file]“标签
  • “iframe”标签。

虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。

少数手机不支持的：

  • “select”标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如”vertical-align:middle”。

CSS部分

大部分手机不支持的：

  • “font-family”属性：因为手机基本上只安装了宋体这一种中文字体；
  • “font-family:bold;”：对中文字符无效，但一般对英文字符是有效的；
  • “font-style: italic;”：同上；
  • “font-size”属性：比如12px的中文和14px的中文看起来一样大，当字符大小为18px的时候你也许能看出来一些区别；
  • “white-space/word-wrap”属性：无法设置强制换行，所以当你网页有很多中文的时候，需要特别关注不要让过多连写的英文字符撑开页面；
  • “background-position”属性：但背景图片的其他属性设定是支持的；
  • “position”属性；
  • “overflow”属性；
  • “display”属性；
  • “min-height”和”min-weidth”属性；

部分手机不支持的：

  • “height”属性：对”height”的支持不太好，奇怪的是在我们的测试当中，仅仅只有很少部分手机不支持”width”属性；
  • “pading”属性
  • “margin”属性：更高比例的手机不支持”margin”的负值。

少数手机不支持的：

  • 少数手机对CSS完全不支持；

JavaScript部分

这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。

在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级。

其他

  • 部分手机不支持png8和png24，所以尽量使用jpg和gif的图片
  • 另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计
  • 部分手机对于超大图片，既不进行缩放，也不显示横下滚动条
  • 少数手机在打开超过20k的测试页面时，会显示内存不足

开发中你需要注意的问题

  1. 手机网页编码需要遵循什么规范？
    遵循XHTML Mobile Profile规范（WAP-277-XHTMLMP-20011029-a.pdf），简称为XHTML MP，也就是通常说的WAP2.0规范。 XHTMLMP是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础，加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同，XHTML MP是严格的XHTML 1.0子集。
  2. 网页文档推荐使用扩展名？
    推荐命名为xhtml，按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。
  3. 为什么现今大多数的网站一行字数上限为14个中文字符？
    由于手持设备的特殊性，其页面中实际文字大小未必是我们在CSS中设定的文字大小，尤其是在第三方浏览器中。例如Nokia5310，其内置浏览器 页面内文字大小与CSS设定相符，但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试，其文本大概在16px左右。 假如屏幕分辨率宽度为240px，去除外边距，那么其一行显示14个字以内，是比较保险（避免文本换行）的做法。
  4. 使用WCSS还是CSS？
    WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集，去掉了一些不适于移动互联网特性的属性，并加入一些具有WAP特性的扩展（如-wap-input-format/-wap-input-required/display:-wap-marquee等）。 需要留意的是，这些特殊的属性扩展并不是很实用，所以在实际的项目开发当中，不推荐使用WCSS特有的属性。
  5. 避免空值属性
    如果属性值为空，在web页面中是完全没有问题的，但是在大部分手机网页上会报错。
  6. 网页大小限制
    建议低版本页面不超过15k，高版本页面不超过60k。
  7. 用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱？
    有条件的话，我们当然建议在手机实体上进行测试，因为目标客户群的手机设备总是在不断变化的，这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情况，比如图片色彩，页面大小限制等就很难再模拟器上测试出来。当然，一些第三方手机浏览器的在线模拟器还是可以进行测试的，第三方浏览器相对来说受手机设备的影响较小。

参考网站

交互

开发

Posted in XHTML+CSS, 移动平台 | No Comments »

最近一段时间学习到的几个知识点总结

星期四, 三月 25th, 2010

IE7下图片缩小失真的解决办法

微软提供的私有属性 -ms-interpolation-mode，请参看：msInterpolationMode Property

img { -ms-interpolation-mode: bicubic; /* Internet Explorer 7.0+ */ }

浏览器 版本号 提供CSS属性
Internet Explorer 7.0 -ms-interpolation-mode: bicubic | nearest-neighbor

仅支持非透明图像格式 (如JPG, GIF, PNG); 无继承属性
Firefox (Gecko) 3.6(1.9.2) image-rendering: auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges

其他浏览器没有相关的样式

外部引入CSS 的两种方式link和@import的区别

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

  • 老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
  • 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显。
  • 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
  • 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

所以，无特殊情况推荐使用link来引入样式，尽量避免使用@import

DTD相关总结

以前一直认为DTD的声明会影响浏览器对页面的渲染模式，直到发现淘宝的新版首页DTD的声明为<!doctype html>，才开始仔细思考和验证这个问题。

声明为Strict.dtd还是Transitional.dtd，在目前的浏览器（请注意发布这篇文章的时间，不保证你看到的时候已经有了新的变化）看来是没有什么区别的。理论上Strict.dtd比Transitional.dtd或者loose.dtd要严格多了，很多元素在strict.dtd里面都不能使用。然而事实上浏览器的兼容以前的版本，通常那些不支持的元素都能正确的展现。

例如iframe这个TAG在strict.dtd里面并不存在，但即使你的DOCTYPE里面声明了strict.dtd，然后使用了iframe这个TAG，浏览器(包括IE7，IE8，FF3.0，Safari 3.0)都能够正确地显示你的文档。目前能够保证你的文档是符合strict.dtd还是Transitional.dtd的，只能通过一些网上的Validator，如W3C Validator来分析。当然，实际上如果你能够严格按照你声明的DTD来书写你的文档，那是最好的，这样保证了以后浏览器对DTD严格遵守的时候，你的文档不会产生错误。

而DTD里面声明是xhtml 还是html其实起不了什么作用，起决定作用的是服务器端提供这个文档的格式。如果服务器端是以”text/html”来提供这个文档的，那么浏览器就会一html来解析，如果是以”application/xhtml+xml“来提供的，那么浏览器会已xhtml的方式来解析。当然，绝大多数时候，服务器端都是以”text/html”来提供的。

总结：

  • 浏览器如何解析文档取决于服务器以什么格式来提供这个文档。如果你的文档是以”text/html”的方式来提供的，那么你就应该声明为HTML。假如你想要让IE7能够正确地显示，那么你就更应该这么做了。(事实上绝大多数服务器端程序都是以这种方式提供的。)
  • 如果你的文档声明为XHTML，那么服务器端提供文档时就应该以”application/html+xml”的方式来提供。
  • 尽量在你的文档前面声明DOCTYPE和DTD，这样能够保证你不是以Quirks Mode的方式来渲染文档的，并且保证向后的兼容性。
  • 如果你声明了DTD，那么就要严格按照DTD的要求来书写你的文档。特别是如果你声明了Strict.dtd，那么你应该注意哪些元素是不能够使用的，当然你也可以为了节省服务器资源像淘宝那样只声明一个<!doctype html>，甚至和google一样连结束的</body></html>标签都不写，但我通常不建议这么干。

Posted in XHTML+CSS | Tags: , , , ,  | 1 Comment »

img标签src为空的陷阱

星期六, 一月 2nd, 2010

把页面中的img标签的src设置为“”存在巨大的风险，无论是在html中写入

<img src=”" />

还是在js中写入

var img = new Image(); img.src = “”;

出现一次这样的标签会导致向你的服务器多做一次请求。

  • 在IE中，这样做会请求一次当前页面所在的目录。如在http://playgoogle.com/demo/a.html 中出现这种空src的标签，会导致重新请求一次://playgoogle.com/demo/
  • 在Safari 和 Chrome中，将请求当前页面本身。
  • 在Firefox 3.5以前的版本中，有和Safari同样的问题，但是在3.5中修正了这个BUG。
  • 在Opera 中，不会做额外的请求。

在一个访问量不高的网站中，多一个这样的请求也无所谓（甚至可以让你的网站浏览看上去翻番），但在一个千万级访问量甚至更高的WEB站点里，这样会导致你的服务器和带宽的成本显著增加。 另外一个隐患是，重新请求某个页面可能会导致用户的一些信息被无意中修改，例如cookies，或者ajax操作。

你永远不会写出这样的代码？

我并不这么认为，很多时候这种情况在无意中出现，比如下面这段php代码：

<img src="$imageUrl" >

你原计划是从服务器端读取这个src地址，但是由于某个原因，这个地址还未设置，或者代码的BUG导致读取失败，就会出现空的src标签。

其他的标签中的空src会不会导致这样的问题？

好消息是，在IE中只有image标签有这个问题。坏消息是，在Chrome, Safari, 和 Firefox中<script src=""> 和<link href="">都会导致出现一个新的请求。

如何解决这个问题？

可以从两方面着手，一是尽量避免这种坏的编程方式，不要出现空的src标签。另外，可以从服务器端着手，在发现时这种无意义的请求时不要返回任何东西给客户端。

<?php
    //Works for IE only when using path URLs and not file URLs

    //get the referrer
    $referrer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '';

    //current URL (assuming HTTP and default port)
    $url = "http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI'];

    //make sure they're not the same
    if ($referrer == $url){
        exit;
    }
?>

原文网址：

Empty image src can destroy your site

Posted in Javascript, XHTML+CSS | Tags: ,  | 6 Comments »

收藏：图片格式详解

星期三, 九月 16th, 2009

Gif格式图片的特点:

透明性

Gif是一种布尔透明类型，既它可以是全透明，也可以是全不透明，但是它并没有半透明（alpha 透明）。

动画

    Gif这种格式支持动画。

无损耗性

     Gif是一种无损耗的图像格式，这也意味着你可以对gif图片做任何操作也不会使  得图像质量产生损耗。

水平扫描

      Gif是使用了一种叫作LZW的算法进行压缩的，当压缩gif的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小

间隔渐进显示

Gif支持可选择性的间隔渐进显示

  由以上特点看出只有256种颜色的gif图片不适合照片，但它适合对颜色要求不高的图形（比如说图标，图表等），它并不是最优的选择，我们会在后面中看到png是最优的选择。

Jpeg

  透明性

     它并不支持透明。

  动画

      它也不支持动画。

  损耗性

     除了一些比如说旋转（仅仅是90、180、270度旋转），裁切，从标准类型到先进类型，编辑图片的原数据之外，所有其它操作对jpeg图像的处理都会使得它的质量损失。所以我们在编辑过程一般用png作为过渡格式。

   隔行渐进显示

     它支持隔行渐进显示（但是ie浏览器并不支持这个属性，但是ie会在整个图像信息完全到达的时候显示）。

   由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。

Png

类型

   Png这种图片格式包括了许多子类，但是在实践中大致可以分为256色的png和全色的png，你完成可以用256色的png代替gif，用全色的png代替jpeg

透明性

   Png是完全支持alpha透明的(透明，半透明，不透明)，尽管有两个怪异的现象在ie6(下面详细讨论)

 动画

    它不支持动画

 无损耗性

    png是一种无损耗的图像格式，这也意味着你可以对png图片做任何操作也不会使  得图像质量产生损耗。这也使得png可以作为jpeg编辑的过渡格式

 水平扫描

   像GIF一样，png也是水平扫描的，这样意味着水平重复颜色比垂直重复颜色的图片更小

间隔渐进显示

    它支持间隔渐进显示，但是会造成图片大小变得更大

更多关于PNG

  PNG8

    256色PNG的别名

  PNG24

    全色PNG的别名

  PNG32

    全色PNG的别名

 其它图片格式与PNG比较

    众所周知GIF适合图形，JPEG适合照片，PNG系列两种都适合。

 相比GIF

PNG 8除了不支持动画外，PNG8有GIF所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩。所以，大多数情况下，你都应该用PNG8不是GIF（除了非常小的图片GIF会有更好的压缩外）。

相比JPEG

    JPEG比全色PNG具有更加好的压缩，因此也使得JPEG适合照片，但是编辑JPEG过程中容易造成质量的损失，所以全色PNG适合作为编辑JPEG的过渡格式.

Png8的在ie中的怪异表现:

1.半透明的png8在ie6以下的浏览器显示为全透明。

2.Alpha透明的全色PNG(png32）在ie6中会出现背景颜色(通常是灰色)。

由上面可以总结:

(a)全透明的png8可以在任一浏览器正常显示（就像gif一样）。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明，其它浏览器都能正常显示半透明。这个bug并不需要特殊对待，因为在不支持半透明的浏览器下只是显示为全透明，对用户体验影响不大，它反而是透明gif的加强版。 

(b)第二个bug没有什么好的方法解决，只能通过影响性能的方法AlphaImageLoader与需要加特殊标签（VML）。

因此得出结论就是:请使用PNG8。

Png8的软件问题

  1.Photoshop只能导出布尔透明的PNG8。

  2.Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.

  3.pngquant与pngnq这两个命令行软件可以转换全色png为256色的png8。

Posted in XHTML+CSS | Tags:  | No Comments »

收藏：淘宝DPL-Design Pattern Library

星期二, 八月 25th, 2009

Taobao DPL

Basic Specification & Usage Guide

  1. 页面基本结构和命名约定
  2. assets 目录组织和文件命名规范
  3. TBra 使用说明

Basic Style Platform

  1. 样式重置 reset.css
  2. 栅格布局 grids.css 栅格使用说明
  3. 基本样式 base.css

Taobao Common Styles

  1. Box
  2. 价格
  3. 图片
  4. 商品信息块
  5. 按钮
  6. 面包屑
  7. 信息提示
  8. 步骤条

Taobao Common Icons

  1. 交易类图标
  2. 会员等级
  3. 杂类图标
  4. …

Modules

  1. 页头和页尾过渡版本v2简头v2
  2. 反馈页面
  3. 旺旺点灯
  4. 日历
  5. 弹出框
  6. 卡盘
  7. 排行榜
  8. 标签云
  9. 自动完成
  10. 协议
  11. 搜索
  12. 级联列表
  13. 就地编辑
  14. …

Misc

  1. 2008年Icons年终汇报

原文地址：http://assets.taobaocdn.com/tbra/dpl/

Posted in XHTML+CSS | Tags:  | No Comments »

三栏布局，左右固定宽度，中间自适应的一种解决方案

星期二, 八月 18th, 2009

 

如图所示，三栏布局中，左右固定宽度，中间自适应有很多总解决方法，之前也看过一篇文章In Search of the Holy Grail ，不过，就我个人而言，跟喜欢通过margin的负值来达到这种效果。

核心CSS代码：

  1. #content{background:#ff6;}
  2.         #left,#right{width:200px;background:#fc0;float:left;}
  3.         #middle{float:left; width:100%;margin:0 -200px;}
  4.             #middle .inner{margin:0 200px;background:#ccc;}
  5.         #right{float:right;}

DOM 结构：

  1. <div id="content" class="clearfix">
  2.     <div id="left">
  3.     </div>
  4.     <div id="middle">
  5.     </div>
  6.     <div id="right">
  7.     </div>
  8. </div>

点击查看示例

Posted in XHTML+CSS | Tags:  | 5 Comments »

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks

星期一, 八月 10th, 2009

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks：

.test{
    color:/*\**/#00f\9; /* IE8 */
}
.test,
.test:-moz-any-link{
    color:#f60; /* Firefox2 */
}
.test,
.test:default{
    color:#000; /* Firefox3 */
    *color:#f00; /* IE7 */
    _color:#0f0; /* IE6 */
}

可同时区分IE8、IE7、IE6、Firefox的CSS hacks：

.test{
    color:#000; /* Firefox */
    color:/*\**/#00f\9; /* IE8 */
    *color:#f00; /* IE7 */
    _color:#0f0; /* IE6 */
}

关于IE8的hacks：

.test{
    color:/*\**/#00f\9; /* IE8 only */
    color:#00f\9; /* 适用于所有IE版本 */
}

Posted in XHTML+CSS | Tags:  | No Comments »

让IE6瞬间崩溃的5种方式

星期一, 六月 22nd, 2009

经常遇到莫名其妙让IE6崩溃的事情。今天看到了一篇好文章，我整理整理发上来，以后开发的时候要注意了。

鉴于国内IE6的市场份额还在主流的情况，一定要避免出现以下情况。

IE6真脆弱啊

1.设置scrollbar-base-color，css里给table做了定位，再通过js改变其定位IE6就崩溃了。

关键代码：

<style type="text/css">
  html, body {
    scrollbar-base-color: #330066;
}
.crash {
position:absolute;
left:200px;
top:200px;
width:200px;
}
</style>
 <script type="text/javascript">
    function galgenfrist() {
        window.setTimeout(‘crashIE();’,1000);
    }

    function crashIE() {
        var moveNode = document.getElementById("move");
        if(moveNode) {
            moveNode.style.top = "100px";
            moveNode.style.left = "200px";
        }
    }
    </script>
<body onload="galgenfrist();">
    <div id="move" class="crash">
    <table>
        <tbody>
        <tr>
        <td>
              <textarea></textarea>
        </td>
        </tr>
        </tbody>
    </table>
    </div>
</body>

用IE6点击测试：ie6崩溃测试一

2.document.write

<script>for (x in document.write) { document.write(x);}</script>

在FF和Chrome中，都会打印出“prototype”字符，在IE6中立即崩溃。

用IE6点击测试：ie6崩溃测试二

3.在CSS中使用通配符*,在HTML的table标签中直接放置内容（而不是<tr>标签之类）

<style>*{position:relative}</style><table>aaabbbccc</table>

用IE6点击测试：ie6崩溃测试三

4.CSS中出现@+任意字符+/* 立即崩溃

<style>@;/*</style>

用IE6点击测试：ie6崩溃测试四

5.onload="window()"

<body onload="window()"></body>

用IE6点击测试：ie6崩溃测试五

原文网址：http://www.catswhocode.com/blog/6-html-and-javascript-codes-to-crash-ie6

注：原文中有6个导致崩溃的问题，我装的是IETester,有一个没有测出来。所以没写上来。

Posted in XHTML+CSS | Tags:  | 5 Comments »

【收藏】详解CSS的优先权

星期五, 六月 19th, 2009

转自：怿飞

发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

Specificity 具体的计算规则：

  • 元素的 style 样式属性，加 1,0,0,0。
  • 每个 ID 选择符（#id），加 0,1,0,0。
  • 每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
  • 每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
  • 其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。

最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。

除了 Specificity 还有一些其他规则：

  • !important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。
  • 如果优先权一样，则按源码中“后来者居上”的原则。
  • 由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例 全局选择符 * ）。

范例分析：

h1 {color: red;}
/* 只有一个普通元素加成，结果是 0,0,0,1 */
body h1 {color: green;}
/* 两个普通元素加成，结果是 0,0,0,2 */
/*0,0,0,1 小于 0,0,0,2 ，后者胜出*/

h2.grape {color: purple;}
/* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/
h2 {color: silver;}
/*一个普通元素，结果是 0,0,0,1 */
/*0,0,1,1 大于 0,0,0,1 ，前者胜出*/

html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7个普通元素、一个属性选择符、两个其他选择符（子选择符 >），结果是0,0,1,7 */
li#answer {color: navy;}
/* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */
/*0,0,1,7 小于 0,1,0,1，后者胜出*/

节选 old9 的《CSS的优先权》（无法穿越 GFW）

Posted in XHTML+CSS | No Comments »

【收藏】层叠加的5条原则

星期三, 四月 29th, 2009

首先明确几点在文中所需要用到的概念：

  1. 静态定位：position:static（为position属性的默认值）。
  2. 动态定位：position:relative或position:absolute或position:fixed。
  3. 祖元素：任意包含该元素的元素。
  4. 父元素：直接包含该元素的祖元素。
  5. 同辈元素：拥有共同的父元素的元素。

注：这些概念为作者自定义，仅用于本文。

引用:

关于同辈元素是个非常关键的词，这里还需要详细解释一下。

  1. <div>
  2.     <div></div>
  3.     <div id="a"></div>
  4.     <div></div>
  5.     <div></div>
  6.     <div></div>
  7.     <div></div>
  8. </div>
  9. <div id="f">
  10.     <div></div>
  11.     <div id="b"></div>
  12.     <div id="c"></div>
  13.     <div></div>
  14.     <div></div>
  15.     <div></div>
  16. </div>

在这个例子中，div#a与div#b并不是“同辈元素”，只有像div#b和div#c这样拥有同样父体div#f的的元素才能叫“同辈元素”。

引用结束

接下来看看这五条法则：

法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。

法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。

 

 猛点这里测试

法则三：同辈元素定位方式不同时，动态定位居上。

猛点这里测试

法则四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上。

 

猛点这里测试

法则五：【重要】非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。 

  1. <div id="ab" style="position:absolute;">
  2.     <div id="a" style="position:relative; z-index:100;">
  3.         <div id="a_inner1">
  4.             <div id="a_inner2">
  5.                 <div id="a_inner3" style="position:relative; z-index:98;">
  6.                     <div id="a_inner4">
  7.                         <div id="a_inner5">
  8.                         </div>
  9.                     </div>
  10.                 </div>
  11.             </div>
  12.         </div>
  13.     </div>
  14.     <div id="b">
  15.         <div id="b_inner1">
  16.             <div id="b_inner2">
  17.                 <div id="b_inner3" style="position:relative; z-index:99;">
  18.                     <div id="b_inner4">
  19.                     </div>
  20.            &n
    bsp;    </div>
  21.             </div>
  22.         </div>
  23.     </div>
  24. </div>

 

情况1：子元素的z-index无论多大，父元素大者居上。

情况2：父元素居下，子元素也可以居上。

情况1、情况2结合扩展比较。

 

猛点这里测试

其实前四点都是基础，只有第五点比较难于理解，这里详细解释一下：

 

在这个例子中，我们来比较div#a_inner5和div#b_inner4的层叠关系。
到它们所共同拥有的祖元素div#ab的下一级为止，div#a_inner5的祖元素包括：div#a,div#a_inner1,div#a_inner2,div#a_inner3,div#a_inner4；div#b_inner4的祖元素包括：div#b,div#b_inner1,div#b_inner2,div#b_inner3。
然后分析它们的祖元素中具有动态定位的：div#a_inner5的祖元素中含有动态定位的元素有：div#a,div#a_inner3；div#b_inner4的祖元素中含有动态定位的元素有：div#b_inner3。
然后再拿出最高级进行比较：div#a > #div#b_inner3。

父元素居下，子元素也可以居上的情况，则是利用非同辈元素在祖元素具备动态布局时，其比较已经与position:static无关，而其祖元素却可以通过html的位置来进行比较。

引用结束

当然，有时候还存在特例，比如flash、比如ie6中的select无法遮住，这些都属于异常情况，大家可以自己搜索一下相关文章。

Posted in XHTML+CSS | Tags:  | 3 Comments »