位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 8 再谈清单（5）

[翻译]标记语言和样式手册 Chapter 8 再谈清单（5）

作者：zhaozy　来源：3user.com　发布时间：2008-01-29 13:16:00　

标签：样式,标记,css,手册,清单

由结构引导样式

语义上来说,方法B十分完整,让我们能为清单的每一个元素使用独立标签,这让我们能分别为名词,揭示内容制定特定样式.

举例来说,我们能做个简单修改,以CSS把<dt>变成粗体.只要几行声明就能达成这个目的.完全不必修改标签内容.

dt {
font-weight: bold;
}

只要这样就够了,不必为清单内容加上<strong>,<b>甚至是<span>标签,现在所有的<dt>都会变成粗体,与图8-7一样.

图8-7 方法B为<dt>加上font-weight:bold的效果

加上图片

或许你发现我喜欢用CSS为标签加上小图标,我喜欢这个做法的理由,是因为我能使用CSS的background属性打扮页面,同时把属于装饰性,不重要的图片与页面内容,结构分开.

更换,增加或移除这些图片的动作十分简单,因为我不需要修改标签内容就能完成这些变动.

对定义清单来说,如果加上小箭头图标,从名词指向定义内容的话,应该很有意思.我们能以下面这段CSS轻松加上这个效果:

dt {
  font-weight: bold;
  }
dd {
  margin-left: 15px;
  padding-left: 15px;
  color: #999;
  background: url(dd_arrow.gif) no-repeat 0 2px;
  }

我们所做的修改,首先是以margin-left:15px稍微拿掉一些<dd>标签预设的外补丁,接着,我们把定义描述的颜色换成灰色,使其与<dt>的区别更大.同时在描述文字的左边,理顶端2像素的地方放上一个小巧的橘色箭头图标,并且在描述文字的左边留下15像素的内部定,让图标不会与文字重叠,图8-8就是完成的效果.

图8-8 加上图标,凸显文字关联性的定义清单

如你所见,使用定义清单结构,我们就能轻易地为每个构成项目指定独特的样式,让版面更丰富,而完全不必修改标签内容,我们也能确信不支持样式的浏览器仍会以有组织,容易阅读的方式显示这个清单.

其他应用

又见很重要的事情必须指出:那就是定义清单的用途不仅限于标注名词,定义内容.定义清单还能用来标注对话,导航条,甚至是表单排版.

我们甚至可以引用W3C在HTML 4.01规范中对于定义清单的定义http://www.w3.org/TR/html4/struct/lists.html)"以<dl>标签建立的定义清单,通常包含一系列名词,定义内容(虽然定义清单也能应用在其他地方)"。所以,别害怕把定义清单用在名词,解释内容之外的地方!

概要

本章到目前为止,我们看了另外的两种清单:有序清单,定义清单.我们发现借着使用这些清单结构,代替无序清单加上额外标签的做法,能够让我们更容易控制样式,同时也让清单变得更容易维护.

接着以我们本章最初的步骤清单当作例子,用CSS为他调整一下样式.

第一页上一页 3 4

6 7 下一页

投稿

[翻译]标记语言和样式手册 Chapter 8 再谈清单（5）

猜你喜欢