深山老林

2006-04-21[原] CSS样式的优先级补遗2

今天看到一篇《深入了解CSS的继承性及其应用》，文章中提到了CSS的特性值

---------------------------引用文字--------------------------------------
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名格式。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表：

H1 {color:blue;} 特性值为：1
P EM {color:purple;} 特性值为：2
.apple {red;} 特性值为：10
P.bright {color:yellow;} 特性值为：11
P.bright EM.dark {color:brown;} 特性值为：22
#id316 {color:yellow} 特性值为：100

从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。
-------------------------------------------------------------------------

可能不太好理解，按照上面的权重顺序，先统计ID，再统计CLASS，再统计HTML标记。即：

-------------------------------------------------------------------------
H1 {color:blue;} 特性值为：1
P EM {color:purple;} 特性值为：1+1=2
.apple {red;} 特性值为：10
P.bright {color:yellow;} 特性值为：10+1=11
P.bright EM.dark {color:brown;} 特性值为：10+10+1+1=22
#id316 {color:yellow} 特性值为：100
-------------------------------------------------------------------------

可以看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100。在文章中还提到了继承的权重为0。

文章中提到一个小技巧：

---------------------------------引用文字---------------------------------
如果想让H1始终为黑色，而EM文字在其他情况下红色，那么下面的样式表设置就是一个很好的方法：

H1，H1 EM {color:black;} 特性值为：1，2
EM {color:red;} 特性值为：1

给定这个规则后，除在H1元素内的任何EM文字就都是红色，而H1内的EM文字仍旧为黑色，由于其选择符分组，在第一条规则中就有两条有效的规则（一条是对H1的，另一条是对H1 EM的）也就有两个特性值——每条规则一个。
-------------------------------------------------------------------------

这个技巧很有意思，HTML是这样的：

-------------------------------HTML--------------------------------------
<H1>黑色的H1<EM>黑色的EM</EM></H1>
<EM>红色的EM</EM>
-------------------------------------------------------------------------

也许你会说是不是跟上面的CSS样式顺序有关系呢？可以试试改成：

---------------------------------改后样式--------------------------------
EM {color:red;} 特性值为：1
H1，H1 EM {color:black;} 特性值为：1，2
-------------------------------------------------------------------------

效果还是一样的。这也解释了为什么“包含选择符(E1 E2)”的优先级比“类型选择符(E)”要高。

这一点对于在写样式时是很有帮助的，比如我们可以在定义列表的时候用到：

-------------------------------------------------------------------------
ul{color:red;}
ul li{color:green;}
div ul{color:orange;}
div ul li{color:blue;}
-------------------------------------------------------------------------

这样就可以在不用增加像“id=XX”、“class=xxx”等属性的情况下对标签进行分别定义了。

2006-04-17[原]属性选择符的使用

在CSS的选择符中，除了常用的“类型选择符(E)、通配选择符(*)、包含选择符(E1 E2)、ID选择符(#ID)、选择符分组(E1,E2,E3)、类选择符(E.class)、伪类及伪对象选择符(E:P)”外还有“属性选择符(E[attr])”和“相邻选择符(E1+E2)”，试了一下属性选择符，感觉很不错，如果使用到页面中的话，会让CSS的定义更加的强大，可惜现在IE并不支持这一选择符。

属性选择符可分为下面几种：

Attribute Selectors
E[attr] 属性选择符。
选择具有attr属性的E。

Attribute Selectors
E[attr=value] 属性选择符。
选择具有attr属性且属性值等于value的E。

Attribute Selectors
E[attr~=value] 属性选择符。
选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E。

Attribute Selectors
E[attr|=value] 属性选择符。
选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E。

下面看看例子：

--------------------HTML code----------------------
<div class="demo">E[attr=value] 属性选择符</div>
<div title="Attribute Selectors">E[attr] 属性选择符</div>
<h1 class="dem demo">E[attr~=value] 属性选择符</h1>
<h2 class="demo-demo2">E[attr|=value] 属性选择符</h2>
---------------------------------------------------

--------------------CSS code-----------------------
body{line-height:1.3em;color:#000000;}
.demo-demo2{background-color:#FFA500;}
div[title]{color:#FFFFFF;background-color:#0000FF;}
div[class=demo]{color:#FF0000;}
h1[class~=demo]{color:#0000FF;}
h2[class|=demo]{color:#008000;}
---------------------------------------------------

2006-03-30[原]一个三栏布局(2)

在《一个三栏布局(1)》中讲到了一个三栏布局，里面使用了JS脚本的方法来达到栏目自适应高度，缺点很明显，当浏览器禁用脚本的时候，布局就会变得混乱，特别是当左边栏或右边栏的高度小于中间栏的时候。下面来看一种不使用脚本的方法，还是按原来的要求，不过得对HTML代码做一下修改：

-----------------------------------------------------
<div id="top">top</div>
  <div id="main">
    <div id="nojs">
      <div id="midpart"><p>midpart</p></div>
      <div id="leftpart"><p>leftpart</p></div>
    </div>
    <div id="rightpart"><p>rightpart</p></div>
  </div>
<div id="bottom">bottom</div>
-----------------------------------------------------

这里是将中间栏跟左边栏放到了一个层里，这样总的结构就变成了是二栏了，然后再中左边里分出二栏。这样就可以不使用绝对定位了，也能使用负边界来解决栏目的高度自适应问题。来看下CSS样式部分：

-----------------------------------------------------
body,html{
 font-family:Arial;
 font-size:12px;
 background-color:#FFFFFF;
 text-align: center;
}
*{
 margin:0;
 padding:0;
}
#top,#bottom{
 width:770px;
 background-color:#0099FF;
 height:50px;
 margin:0 auto;
 clear:both;
}
#main{
 width:770px;
 margin-right: auto;
 margin-left: auto;
 padding: 0px;
 color: black;
 height:auto;
 overflow:hidden;
}
#nojs{
 width:570px;
 height:100%;
 float:left;
}
#leftpart{
 width:200px;
 height:auto;
 float:left;
 background-color:#999900;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}
#midpart{
 width:370px;
 height:auto;
 background-color:#00CC99;
 margin-right: auto;
 margin-left: auto;
 float:right;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}
#rightpart{
 width:200px;
 height:auto;
 float:right;
 background-color:#FF9900;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}
-----------------------------------------------------

使用负边界的方法来实现栏目的自适应高度，不过这里就不然需要JS脚本了。

2006-03-29[原]一个三栏布局(1)

用CSS布局做一个页面：
首先要一个top，下面是一个bottom，中间是一个三列块的模式，leftpart，midpart，rightpart，整个页面宽度770px，HTML代码顺序为先中间再两边。

首先，按要求写出HTML代码部分，如下：

-----------------------------------------------------
<div id="top">top</div>
  <div id="main">
    <div id="midpart"><p>midpart</p></div>
    <div id="leftpart"><p>leftpart</p></div>
    <div id="rightpart"><p>rightpart</p></div>
  </div>
<div id="bottom">bottom</div>
-----------------------------------------------------

加了个id为“main”的层，是为了控制中间宽度，下面写最基本的CSS样式：

-----------------------------------------------------
body,html{
 font-family:Arial;
 font-size:12px;
 background-color:#FFFFFF;
 text-align: center;
}
*{
 margin:0;
 padding:0;
}
#top,#bottom{
 width:770px;
 background-color:#0099FF;
 margin:0 auto;
 clear:both;
}
#main{
 width:770px;
 margin:0 auto;
 padding: 0;
 color: black;
 background-color:#00CC99;
}
#leftpart{
 width:200px;
 height:auto;
 float:left;
 background-color:#999900;
}
#midpart{
 width:370px;
 height:auto;
 background-color:#00CC99;
 float:left;
 margin:0 auto;
 padding: 0px;
}
#rightpart{
 width:200px;
 height:auto;
 float:right;
 background-color:#FF9900;
}
-----------------------------------------------------

上面的样式是最常见的三栏布局所用的样式，但在这里，中间部分跑到最左边了，这可不是我们所要的效果。怎样改呢？想要让中间跟左边的位置调换，只能用到绝对定位了，看看修改后的样式：

----------------------------------------------------
#main{
 width:770px;
 margin:0 auto;
 padding: 0px;
 color: black;
 position: relative;/*让中间栏的定位从层的左边开始*/
 height:auto;
 background-color:#00CC99;
}
#midpart{
 width:370px;
 height:auto;
 background-color:#00CC99;
 position: absolute;
/* margin:0 auto; 因为使用了绝对定位，所以这一句可以去掉*/
 padding: 0px;
 left: 200px;/*距离为左边栏的宽*/
}
----------------------------------------------------

这样，看起来就像是三栏的了，不过还有个问题，往栏里面加内容试试，出问题了，栏目不会自动适应高度的变化。还是用负边界的方法：

----------------------------------------------------
#main{
 width:770px;
 margin:0 auto;
 padding: 0px;
 color: black;
 position: relative;
 height:100%;
 overflow:hidden;
 background-color:#00CC99;
}
#leftpart{
 width:200px;
 height:auto;
 float:left;
 background-color:#999900;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}
#rightpart{
 width:200px;
 height:auto;
 float:right;
 background-color:#FF9900;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}
----------------------------------------------------

不过这样也只是让左右两栏自适应高度，对于中间那一栏，因为使用了绝对定位，所以负边界的方法不起做用，只能用JS脚本啦：

----------------------------------------------------
<script type="text/javascript">
  document.getElementById("leftpart").style.height=document.getElementById("midpart").scrollHeight+"px";
  document.getElementById("rightpart").style.height=document.getElementById("midpart").scrollHeight+"px";
</script>
----------------------------------------------------

我觉得这个方法的缺点是用到了JS脚本，如果浏览器禁用了脚本，那页面布局就会乱了。再看看另一个不用JS的方法吧《一个三栏布局(2)》

2006-03-23[原]我的页面制作经验

前两天跟群里的"白菜"兄谈到了学习web标准中遇到的问题，觉得很值得写一下，是我对标准的一些理解，希望对在学习web标准的朋友有所帮助。

现在学习web标准的人越来越多，对于刚接触标准的人来说，我想大多数人的第一个印象就是用DIV+CSS制作页面，使用DIV来布局的确是标准的一个主要的特点，但标准并不只是用DIV+CSS布局，看过w3cn网站上的文章，你应该也了解到标准是"由符合标准的XHTML组成；用CSS来布局而不是表格；使用结构化、语义化的标记；能够在任何浏览器中显示"最后二点被大多数学习标准的朋友所忽略，结果就是现在很多用DIV+CSS制作的所谓"用标准制作"的页面，一查看源文件，都是 <DIV> <DIV> <DIV>……</DIV> </DIV> <DIV> …… </DIV> …… </DIV> ……，这样的页面在不支持样式表文件的浏览器中就是一堆没有分隔的文字，阅读都有困难，更谈不上可访问性了。"使用结构化、语义化的标记"是标准的一个重点，因为这直接就对不支持样式表文件的浏览器起作用。

下面是我的制作页面的一点经验，权当是总结吧，跟大家分享一下：

第一阶段：

开始制作的时候，应该先从没有样式表文件的页面做起，做到最基本的结构，就是使用结构化、语义化的标记，如用ul,li标签或dl,dt,dd标签等，这时你可以先不考虑布局的问题，只要做到在没有样式表文件的情况下也可以正常的阅读页面中的内容就可以了。要注意使用符合标准的(X)HTML语言，在这个阶段中不使用DIV标签。

第二阶段：

当完成第一个阶段后，再来就是布局了。我们要使用支持标准的浏览器来做为制作时查看的浏览器，推荐使用Firefox。这是为了让我们制作出来的页面更接近标准。这个阶段也要注意少使用DIV标签，因为CSS可以应用于任意的标签上，要好好利用现有的标签，只有当没有标签可以定义或现在的标签不能满足布局上的需要时，再使用DIV标签进行布局。也许你会觉得奇怪，为什么要少用DIV标签呢？因为DIV标签没有语义，添加过多的DIV标签会影响源文件的可读性，不利于日后的维护。

这阶段还有另一点需要注意的，就是图片的问题，图片分为"内容图片"和"背景图片"两种。意思很明显，内容图片就是用于内容中的图片，可使用img标签加入，注意要加alt属性；而背景图片就是用于装饰页面的图片，使用CSS的background-image属性加入。这一步也是为了保持我们上一步的成果，使之在没有样式表文件的情况下也不影响到显示。

第三阶段：

做完上面两个阶段，你的页面基本上已经可以通过W3C的验证了。现在我们来让它偏离一点标准，使它兼容多个浏览器。这个阶段是很无奈的，为什么呢？在IE中打开刚刚制作的页面就清楚了，也许你已经看到，整个页面的布局乱了。因为浏览器对CSS样式的兼容问题，使到我们现在还要做这一步。这时就得出动多个浏览器啦，最基本的IE5/IE5.5/IE6/FF，目前我就只有这几个版本的浏览器，应该也已经足够了吧。因为是在FF中做的页面，所以现在主要要解决页面在IE中的显示问题，在我BLOG上可以找到相关的一些资料，主要是使用hack，但hack不是标准，所以使用hack有可能会通不过W3C的代码验证。

我们不能为了通过验证而做页面，验证只是一种手段，让你知道页面是否符合基本的规范，但能通过验证，并不就是说你的页面达到标准，只能表示没有语法错误，象最开始提到的用DIV+CSS布局的页面，也是可以通过验证的。

还有就是一些细节，主要是一些制作上的习惯问题，像关闭每个标记、标记的每个属性都要有值等等，可能会觉得很烦琐，但只要在制作的时候注意一下，慢慢成为习惯，对于提高页面质量和制作效率是很有帮助的。

由于本人的写作能力较差，如果看得不太明白，欢迎给我留言。