以下内容节选资料书籍来自CSU中图- -! 这个地方权当做重要笔记摘抄(包括不改变意义的篡改, 简写-___-)，包括之前众多文字，New Riders & 人邮版权所有。或者其他xxx版权归其作者和出版商所有，笔记仅供学习。
属性选择符异常强大，通过它们可以基于一个元素是否有属性名称，例如href, 或是是属性值，如http://www.xx.com 来对这个元素设计样式。
在下面的例子中，所有包含alt属性的图像都将会有一个灰色的色框：
img[alt] {
border: 1px dotted #999;
}
<img src=”../img/5ve.jpg“ alt=”ID: Milo Xing” />
所有包含title属性的链接将是红色：
a[title] {
color: #f00;
}
<a href=”../blog/index.php” title=”5ivedance blog“>blog me</a>
同样能够基于属性的内容来格式化一个元素：
p[class="rant"] {
font-weight: bold;
text-transform: uppercase;
}
<p class=”rant“>
Hi, I’m 5ivedance.</p>
同样，
div[id="main"] {
float=left;
}
<div id=”main“><p>Hi, I’m 5ivedance.</p></div>
【也许你会觉得上面这两个列子不是纯属费事吗，恩，其实我也是这么觉得开始，只是多默念一下这句话吧：基于元素部分的属性设置元素的样式。】
运用模式匹配（pattern matching), 你能够基于元素部分的属性设置元素样式。在下面的例子用到引言（<q>）的引用（cite）属性中的URL:
q[cite*=http://www.5ivedance.com/] {
background: #f00;
}
<q cite=”http://www.5ivedance.com/?134/“>Hi, I … I … I miss u.</q>
HTML并不在意是否使用了html, head和body元素以及DOCTYPE, 儿XHTML需要这些。
HTML允许省略某些结束标记，而XHTML要求每个元素（包括空元素）都有结束标记。为了尽可能保持与浏览器的兼容性，在空元素中加一个空格和一个斜杠，如：
<p>© 2008 5ivedance.com
在HTML中，某些元素（如P）不要求要结束标记。后续p标记隐式地结束前面的p标记。
<p>© 2008 5ivedance.com</p>
在XHTML中，所有元素必须有结束标记。
<img src=ivedance.jpg alt=”ID: milo xing” width=30 height=50>
在HTML中，空元素没有最后的斜杠，即使有也不会报错。
<img src=“ivedance.jpg” alt=”ID: milo xing” width=“30” height=“50” />
在XHTML中，即使是空元素，也必须有结束标记。为空元素编写的独立的结束标记（比如</img>）在技术上是正确的，但是在img标记中添加一个空格和/可以确保与不理解XHTML的浏览器的兼容性。同时，大家注意到上面两行代码的其他不同的地方了吧，在HTML中，只有在属性值包含空格或其他特殊符号（除了字母，数字，连字符，句点，下划线和冒号之外的其他字符）时，才需要加引号。所以上面的例子第一个行，只有alt的属性必须加引号（给其他加也没什么坏处）。在XHTML中，所有的属性必须都加上引号，如第二行。
另外，在HTML中，以大写或小写字母编写元素名、属性名或预定义值是无所谓的，但是在XHTML中，所有的元素名、属性名和预定义值都必须是小写字母。
在HTML中，某些属性，比如<hr width=75% noshade>中的noshade可以没值，但在XHTML中，必须显示声明属性值。对于没有值的属性，只需将属性名做属性值，如<hr width=”75%” noshade=”noshade” />
XHTML真的好无语，为什么搞这么多规则折磨人呢？也许严谨性，利于修改，后续工作轻松，CSS格式化方便，数据库转换什么的，你说你都不太在乎，不过XHTML是从HTML转换到XML的一个罗杰步骤，XHTML做为一个新标准，我们在期待其他新技术以及未来新技术可以支持它。
【Pe-指首先实现一个基本的设计实现，再根据浏览器的功能增强效果的技术】
在Shea的MOSe出现几个月后，另外一篇发布在Triangle TechJourna的文章更进一步地阐述了逐步增强的概念：
逐步增强呈献给我们一个可行的途径去实现根据用户的需求传递信息，而同时具备辅助功能，对未来的兼容能力和根据新设备的能力来决定用户体验。
—–Debra Chandra and Steve Champeon
… …
MOSe和逐步增强已经被应用于个人网站和博客，但你却很难发现在主流的商业项目中发现它。因此逐步增强的Web设计的发展在减速，如此以往，将会停滞不前。
我的问题是，逐步增强这个词汇在它被发明若干年后是否还能叫“逐步“? 答案是否定的，所以是时候前进了。
2003年，加拿大设计师、CSS Zen Garden创始人Dave Shea写了一篇备受关注的文章，阐述了如何跨越那些相互竞争的拥有不同特性的浏览器进行的设计创作的新途径，他把这个途径叫做MOSe(Mozilla，Opera, Safari enhancement)。
… …
原理上讲，Shea的想法不比@import指令技术复杂。但这个有很多不同，尽管IE6有很多不足，但却是一个对大部分CSS规范支持良好的浏览器，同样也是一个使用最为广泛的流行浏览器。所以任何尝试抛弃它的设计都是另人费解的。
通俗的话来说就是抓住IE6不支持PNG图片等特征，分别对各种浏览器做设计，在其他浏览器的用户看来是一个具有alpha透明效果的下拉菜单，可是IE6看来也许是个很平常的菜单，如此看来设计又是一件多么鼓舞人心的事，如果某个好奇的用户突然发现经常访问的页面居然在不同浏览器的效果惊人的不同。-___-
【这里要说的是，这个和一般意义讲的不兼容不是等同的，一般意义的不兼容是由于CSS入门不久所造成的浏览器之间不一致，而且某些浏览器流式布局无法正常按预定位置流动，造成设计失败，而我们这次说的是，故意在设计的过程中造成它们之间奇特的差异，是在利用他们的不同的选择性，也许用hacks带来的兼容效果不及这样创新的设计带来的新气息，可喜也可惜地说，IE6已经逐渐退出了历史舞台，新的浏览器在更多的选择性上做了统一，那么无论怎么发展，我们相信用聪明的智慧设计更好的CSS出来。】
“CSS hack和破碎的页面的灭绝”——Internet Explorer条件注释
… …
我们请求你更新页面，让它们不再使用CSS hack。如果你仍然想锁定IE或者忽略IE，请使用条件注释。
——Markus Mielke(http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx)
制备Windows版本的Internet Explorer支持的条件注释，提供了一个简洁的途径去锁定或者忽略Internet Explorer，只需将注释放在XHTML文档的<head>部分。
例如，要为所有的浏览器提供一系列通用的规则，而仅为所有版本的Internet Explorer提供一系列特殊的规则，可以用这个：
<link rel=”stylesheet” type=”text/css” href=”standa-rds.css” />
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>
锁定IE5或者IE6
<!–[if IE 5]>
<link rel=”stylesheet” type=”text/css” href=”ie5.css” />
<![endif]–>
<!–[if lte IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” />
<![endif]–>
当许多漏洞和错误在Internet Explorer 7中被修正，同时条件注释在XHTML中成为可行的时候，条件注释开始很快地流行起来。
DIV CSS网页布局中列表元素ul ol li dl dt dd释义
Read more
不管怎么说，将就着俺现在也是在做前端的。呵呵，虽然心不在焉，虽然技术遭人鄙视，不过在开这个技术论坛之前就知道这个东西，在黑羽博客看到过，在译飞博客也看到过那个邀请函，可是后来忙考试就不了解具体怎么样了，然后就忘记了，今天路过某地看到这些地址就去看了看，其实Ajax是美工的事，不是程序员的事呢，呵呵。其他的不想说什么了，我不知道到的N多，但是有个词儿AIR（不是RIA）是个值得关注的东西，简单的说就是个跳出了浏览器，模糊浏览器和桌面界限的东西，模糊了离线和在线的东西，黑羽说是革命性的，我不懂，是没听懂。呵呵。（google有好些产品真不赖，docs,code还有好多，恩，不过不能找mp3就是我唯一不满意的地方，嘿嘿。）
这儿给几个地址：
小马的演讲《Ajax, not AJAX》
演示文档：http://docs.google.com/Presentation?id=dgr8f7vc_742pbvkngm
视频(1)：http://www.tudou.com/programs/view/aY3-D2eqACc/
视频(2)：http://www.tudou.com/programs/view/9FgftyBDNuA/
视频(3)：http://www.tudou.com/programs/view/HcXDhjk8hmY/
黑羽的演讲《Adobe Air的应用与前景》
演示文稿：http://docs.google.com/Presentation?id=ac6wrgpvm6fr_50cntjczhh
视频(1)：http://www.tudou.com/programs/view/M02dBm8iB0c/
视频(2)：http://www.tudou.com/programs/view/llYkU30vPsM/
视频(3)：http://www.tudou.com/programs/view/de1DQPF_WxU/
演示程序下载：http://bbs.actionscript3.cn/thread-1833-1-1.html
再摆张照片，孙颖同学长的不是很好看啊，呵呵。
转的PJhome.的。这个东东的网上版本N多，可是Pj大叔给上色了，这样才有用，要不看不明白。转的目的是我自己需要时看啦。嘿嘿。
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
|
IE6 |
IE7 |
FF |
| * |
√ |
√ |
× |
| !important |
× |
√ |
√ |
另外再补充一个，下划线”
_“,
IE6支持下划线，IE7和firefox均不支持下划线。(推荐)于是大家还可以这样来区分
IE6，
IE7，
firefox
: background:
orange;
*background:
green;
_background:
blue;
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
Recent Comments