技巧延伸
在这个单元里,一起来探讨怎么以继承选择器为一组嵌套状清单的不同级别分别制定特殊样式.我们所制作的是个小网站地图的一部分.我们将发现保留十分基本的标记代码,不需要加上额外的分类属性也能为每一层级分别指定样式.
首先,一起来看看标记代码.
原始的标记
嵌套,未指定样式的清单能为大纲之类的提供最基本的层级结构(当然也十分适用这个例子中的网站地图).由于使用了嵌套清单,因此我们能确信所有浏览器,设备都能正确显示它的结构,同时稍后也能轻易使用CSS指定样式.
小网站地图的标记代码也许像这样,三个顶层项目,还有几个嵌套项目.
<ul>
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox</li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All That Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
图9-1是大多数浏览器显示这个例子的效果,你能发现,只要使用预设值,我们追求的结构就已大致成型.就算不指定样式,结构仍然十分明显,虽然他的确有点无聊,所以接着就开始加上一些CSS.
图9-1 尚未设定样式的嵌套状清单
加上样式
假设我们想为网站地图的某一层加上一些样式定义,我们需要对标记代码新增一些东西,其实也就只是一个id,这样我们才能为这个清单指定与页面上其他部分的清单不同的样式,而不需要加上任何其他的标记内容.
<ul id="sitemap">
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox</li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All That Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
使用继承选择器,就能为清单每一层分别制定独特的样式.举例来说:如果想让最外层的字体方法,粗体,使用橘色,而内层逐渐缩小的话,可以先为整个清单指定大小,粗细和颜色.
#sitemap {
font-size: 140%;
font-weight: bold;
color: #f63;
}
这样会让整个清单变成大字,换成橘色粗体.接着为任一层嵌套结构内的<li>标签缩小字体,改变颜色.
#sitemap {
font-size: 140%;
font-weight: bold;
color: #f63;
}
#sitemap li ul {
font-size: 90%;
color: #000;
}
前面这段CSS会使所有顶层项目以大字,橘色粗体显示,而内层嵌套中的清单则是以黑色,90%字体(在这里是140%的90%)显示,结果见图9-2.
图9-2 为顶层清单项目指定样式
我们不需要为第三层指定更小的字体,因为他会自动使用90%的90%(有点让人困惑,但是真的能运作!)
现在清单的每一层有自动缩小的font-size了,接着加上一些圆点符号.
