2007年04月10日
CSS Mastery - Advanced Web Standards 是一本好书，虽然写了挺久的CSS了，却没有时间去正式的学习一下。今天借着小半天的空闲时间，看了一下“关于CSS优先级(Specificity)的解释”的章节。
在CSS编写中，优先级是一个非常有用的技巧。当初学CSS的时候，并没有正儿八经的从文档学起，走了不少弯路。这次正好巩固一下。
以下是我的阅读笔记和练习一
CSS选择符(selector)的优先级分为4级:a,b,c,d
- 如果是行内样式(inline style)*,则a=1
- b等于ID选择符*的数量
- c等于样式(class),伪类(pseudo-class)*和属性(attribute)*选择符的数量
- d等于类别(type)*，伪对象(pseudo-element)*选择符
(*)解释:
*行内样式(inline style)：元素的style属性，比如<div style="color:red;"></div>,其中的color:red;就是行内样式
*ID选择符：元素的id属性，比如<div id="content"></div>可以用ID选择符#content*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.具体看这里*属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素
*类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素
*伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的第一个单词。具体看这里
得出的值按照abcd来连接，然后对比整个数字的大小就可以了 :) 来一个范例看看：
首先页面结构是这样的
<div id="wrapper">
<div id="content">
<p class="article"><span class="date" style="color:red;">10-21</span></p>
</div>
</div>
以各种方式为“10-21”设定文字颜色的优先级关系表 | 选择符 | 分析 | 优先级(abcd) |
style="color:red;" | 行内样式,a=1 | 1000 |
#wrapper #content {color:red;} | 两个ID选择符,b=2 | 0200 |
#content .article .date {color:red;} | 一个ID选择符b=1
两个样式选择符c=2 | 0120 |
div#content {color:red;} | 一个ID选择符b=1
一个类别选择符d=1 | 0101 |
#content {color:red;} | 一个ID选择符b=1 | 0100 |
p.article .date {color:red;} | 两个样式选择符c=2
一个类别选择符d=1 | 0021 |
p.article {color:red;} | 一个样式选择符c=1
一个类别选择符d=1 | 0011 |
p span {color:red;} | 两个类别选择符d=2 | 0002 |
span {color:red;} | 一个类别选择符d=1 | 0001 |
2007年04月05日
CSS naked day，把网站的style去掉，裸奔一天
什么是网站裸奔？
就是去除网站的样式表链接，更多详细信息，请访问Annual CSS Naked Day
What happened to the design?
To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.
2007年01月03日
Internet Explorer 7中的层叠样式表兼容性不知道怎么的就在MSDN上看见了这篇文章，都2007年了，我还是每天在网上闲逛。
在IE 7下，我的页面乱了、内容溢出了，文字重叠了...这些可能是用了IE 7以后，比较多出现的页面问题吧。不知道我的页面在IE 7下是怎么样的，应该不会有溢出的问题把。（希望）顺便推荐一个网站，可以给你返回各种浏览器浏览你网站的效果图片。（Test your web design in different browsers）
继续话题，文章上提到了几点引起这些浏览的问题关键：
处理overflow:visible的默认行为
设置了默认的高度和宽度，在IE 6的年代，内容如果超出范围，高度将会自适应的变化（好似很智能），但是在IE 7下就会有溢出了，如果你必须要制定一个最小的高度或者宽度的话，推荐使用min-height和min-width由于CSS hacks的改进而导致的错误页面(IE 7对于CSS支持的改进)
一些老的CSS hacks写法，比如用html > body，head + body，head:first-child + body等来区别IE和其他现代浏览器，因为IE 7已经支持以上CSS声明，所以也失效了，必须注意。
关于CSS hacks，可以看看以前的这两篇文章：
2006年12月26日
我们知道visibility:hidden和display:none都可以用来隐藏某个元素，其中的区别是visibility:hidden隐藏但保留其元素所占空间大小display:none隐藏并且不保留其元素所占空间大小
今天做项目的时候，需要用到visibility:hidden，但是一个以前没发现的问题出现了，为一个AA元素设定一个visibility:hidden，然后在AA元素下有一个设定了border:1px...;border-collapse: collapse;的table，table的td也设定了border:1px ...;，接着在IE下你就发现虽然table的内容被隐藏了，但是table下td的border依然在（恶搞，IE经常这么吓人）...
随后发现问题出在border-collapse: collapse;上，本来之所以设定border-collapse: collapse;是为了干掉IE下table默认的cellspacing，现在反而出现了新的问题。查了下border-collapse的属性
border-collapse属性可以决定表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
简单来说collapse参数可以合并邻近单元格的边框。是不是IE在解释border-collapse: collapse;的时候有问题...
遇到同样的问题，你是怎么解决的？
