Heluyao的博客 {11gz.com}

　　首先声明，直接在页面里设置链接的时不会出现下划线对不齐的效果。只有当该元素或该元素的父元素带有vertical-middle属性时才会出现。

　　这两者的解决方法不同：

　　1.其本身具有vertical-middle属性时，直接在该元素上加zoom:1。这里值得说一句，w3c是不推崇使用zoom（触发块元素的layout），意思就是不能通过w3c的验证。

　　2.其父元素具有vertical-middle属性时，在该元素上加vertical-middle：baseline后就可以解决。

　　其实也没什么，主要还是利用hack修复IE6以及更低版本的不支持。

　　这个例子需要固定容器的高度（已知外框高度），但中间内容可以任意高度。这里以图片来做内容。以下是方法一：

　　看代码：

　　能兼容FF,IE6,Opera,还是非常不错的，其实要实现此效果，方法有多种。下面再说一种更科学的方法：

　　方法二：

　　可以减少一个没意义的标签，是不是科学很多哦！

　　某些时候，为了文字具有独特的字体，而不得不使用图片来做这些事情。这样一来，就不利于搜索引擎索引你的网站，而且，如果你是将图片嵌入背景的话，在css不可用的情况下将会是一片空白。那么我们就要想个办法来完善这个问题了。不过，还是尽可能的避免使用图像图换。

　　方法有多种：

1.最简单的一种，直接隐藏包含该文本的父标签：

　　这种发法虽然简单明了，但可能会造成一些问题。屏幕阅读器会忽略掉display值设置为none或hidden的元素。因此，最好还是不要使用这种技术。

2.利用负值文本缩进：

　　有一点需要说明的，就是：当用户打开css，但是关闭了图片下载，用户将什么也看不到。所以我们再看下一个方法吧！

3.利用一个元素完全盖住文字：

　　它需要在替换的元素中加一个额外的标签：

　　记住背景图像一定要是实底的，否则下面的文字可能露出来哦！

４.利用flash

　　个人感觉不是很实用，有了上面三种方法来，这个就没什么必要了。这里简单的说下原理吧！

　　由于flash是可以保留字体的，所以这将有一定的意义。这个技术上利用flash与javascript交互，as调用js传给它的文本。所以只需一个flash，就可以重复的使用该技术，而并不是单独为某一处文字做一个swf。还有一个好处，即flash中的文本是可以搜索的，这意味着可以轻松的复制它。

　　具体细节和源码可以去www.mikeindustries.com/sifr找找。

　　告一段落了！

　　让网页变灰色，对5.12地震中遇难的同胞们表示哀悼！

　　CSS

　　CSS 2有些高级的特性，但目前IE6及更低的版本都是不支持的，郁闷之中… 有幸的是， Firefox和Safari等现代浏览器支持这些高级选择器。没关系，学到手了自然也有用。IE会不断 的完善其对标准的支持，在不久的将来定有机会派上用场，只是如果你现在就用这些高级的特性 ，那么切记一则：在对于站点功能很重要的任何元素上应该避免使用这些高级选择器。

　　利用这些属性可以明显的减少结构层的嵌套及类选择的代码，从而使得我们的文档更轻巧， 更具可用性。嘿嘿，下面我们开始看具体用法及代码示例吧！

　　1. 子选择器和相邻同胞选择器

　　这些高级选择器中的第一个是子选择器。后代选择器选择一个元素的所有后代，而子选择器 只选择元素的直接后代，即子元素。在下面的示例中，外层列表中的列表项显示一个定制的图标 ，而嵌套列表中的列表项不受影响：

　　在IE 6和更低版本中，可以使用通用选择器模拟子选择器的效果。为此，先在所有后代上应 用你希望子元素具有的样式。然后，使用通用选择器覆盖子元素的后代上的样式。所以，要实现 与前面的子选择器示例相同的效果，可以这样做：

　　还可能希望根据一个元素与另一个元素的相邻关系对它应用样式。相邻同胞选择器可用于定 位同一个父元素下某个元素之后的元素。可以使用相邻同胞选择器让顶级标题后面的第一个段落 以粗体显示，同时不影响其他段落：

　　2. 属性选择器

　　顾名思义，属性选择器可以根据某个属性是否存在或属性的值来寻找元素。因此能够实现某 些非常有意思和强大的效果。例如，当鼠标停留在具有title属性的元素上时，大多数浏览器会 显示一个工具提示。可以使用这种特性解释某些内容（比如缩写词）的含义：

　　但是，如果不把鼠标停留在这个元素上，那么没有任何迹象能够表明存在这一额外信息。为 了解决这个问题，可以使用属性选择器对具有title属性的abbr元素应用与其他元素不同的样式 ——在下面的示例中，在它们下面加上点。还可以在鼠标停留在这个元素上时将鼠标指针改为问 号，表示这个元素与众不同，从而提供更多的上下文相关信息。

　　除了根据某个属性是否存在对元素应用样式之外，还可以根据属性值应用样式。例如，使用 rel属性值nofollow链接的站点无法从Google获得评级收益（ranking benefit）。以下规则在这 种链接旁边显示一个图像，以此表示不推荐这个目标站点：

由于IE 6和更低版本不支持属性选择器，有一种更聪明的使用属性选择器的方法。可以对IE 应用一种样式，对更符合标准的浏览器应用另一种样式。例如，IE在显示1像素的点边界方面有 问题，所以可以将点边界显示为虚线。可以使用属性选择器将点边界只应用于能够正确地表现它 的浏览器。这需要寻找class属性而不是使用类选择器。

　　一些属性可以有多个值，值之间用空格分隔。属性选择器允许根据属性值之一寻找元素。例 如，一些开发人员建议在链接的属性中使用预定义的关键字来定义站点拥有者与其他人的关系。 可以利用这一信息将一个图像应用于在rel属性中包含关键字friend的任何链接。

　　一旦这些高级的CSS 2选择器得到广泛的支持，在代码中添加额外的div或类的需求就会大大 减少。

　　在一个前端技术很牛的BLOG里找来的。的确很牛，对技术要求到了这种境界，不得不服！

显示属性
display
list-style
position
float
clear

自身属性
width
height
margin
padding
border
background

文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

　　其实也并非必须如此照此书写顺序，只是养成良好书写习惯，对自己还是有好处啊！在前进的道路中不断美化自己的东西。

1、应该将 CSS 放置于结构的上方（一般放置于 head 元素内）。CSS 是解释型语言，Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置，才可在浏览器解析结构时，对页面进行渲染。

导致的问题就是，页面会有一段时间“朴素”，突然之间又“华丽”，用户体验很不好。

2、尽量使用 <link rel=”stylesheet” href=”http://www.planabc/yuanxin.css” type=”text/css”> 的样式导入方式，而减少 @import 的使用，更勿使用多层嵌套的 @import 。因为在 IE 里， @import 相当于将 <link> 放在页面尾部。

　　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 的计算，低于一切其他规则（例 全局选择符 * ）。