我的菜单修改

技巧延伸

在这个单元里,一起来探讨怎么以继承选择器为一组嵌套状清单的不同级别分别制定特殊样式.我们所制作的是个小网站地图的一部分.我们将发现保留十分基本的标记代码,不需要加上额外的分类属性也能为每一层级分别指定样式.

首先,一起来看看标记代码.

原始的标记

嵌套,未指定样式的清单能为大纲之类的提供最基本的层级结构(当然也十分适用这个例子中的网站地图).由于使用了嵌套清单,因此我们能确信所有浏览器,设备都能正确显示它的结构,同时稍后也能轻易使用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了,接着加上一些圆点符号.

自定义圆点符号

去掉预设的样式,并且使用background属性为第三层项目加上装饰性的圆点符号.首先为所有<li>标签去掉预设的清单样式,接着再为第三层项目指定内镜图片.为了进一步区别,也将为第三层设定font-weight:normal -- 覆盖掉清单的bold设定值.

#sitemap {

  font-size: 140%;

  font-weight: bold;

  color: #f63;

  }

#sitemap li {

  list-style: none; /* turns off bullets */

  }

#sitemap li ul {

  font-size: 90%;

  color: #000;

  }

/* 第三层 */



#sitemap li ul li ul li {

  font-weight: normal;

  padding-left: 16px;

  background: url(bullet.gif) no-repeat 0 50%;

  }

图9-3是完成的网站地图,在第三层<li>标签上使用了自定义圆点符号,普通字体.在左边加上了16像素的内补丁,以便留下装饰用圆点图片的显示位置(同时也多留了一些空白).也告诉浏览器从左边0像素,上方50%开始显示图片,这基本上会使图片左侧对齐,并对齐文字中线.虽然我们能在此以像素指定垂直对齐,但是以百分比制定的话,在文字大小改变时,圆点图片仍能维持正确的排列效果.

图9-3 第三层项目加上自定义圆点小图片

加上边框

接着在第二层清单的左边加上点状边框,完成我们的网站地图,这能进一步提示读者顶层项目有属于它的子项目.

为了只在第二层清单达成这个效果,将加上这些规则:

#sitemap {

  font-size: 140%;

  font-weight: bold;

  color: #f63;

  }

#sitemap li {

  list-style: none; /* turns off bullets */

  }

#sitemap li ul {

  margin: 6px 15px;

  padding: 0 15px;

  font-size: 90%;

  color: #000;

  border-left: 1px dotted #999;

  }

/* for third-level */
#sitemap li ul li ul {

  border: none;

  }

#sitemap li ul li ul li {

  font-weight: normal;

  padding-left: 16px;

  background: url(bullet.gif) no-repeat 0 50%;

  }

我们稍微调整了第二层的外补丁,并且加上了点状边线,在这个规则之后,再使用border:none;来去掉第三层的边框.

图9-4是改好字体,边框与图片的清单效果.

图9-4 完成的清单样式,第二层加上点状边线

在设计大纲之类的清单时,嵌套<ul>是个结构恰当,容易指定样式的解决方法.为顶层<ul>指定独特的id滞后,我们能把分别制定每层样式的任务交给CSS进行,而不需要加上多余的显示效果标签.而设计样式的可能性也远超出这个简单的示例.

图9-5是相同的CSS应用在稍大型网站地图上的效果,由于CSS根据层级指定样式,因此标签内容的写法完全相同,项目会随着嵌套状层级不同而自动选用适当的样式.

图9-5 以CSS与嵌套状清单制作的网站地图扩充版