[翻译]标记语言和样式手册 chapter 6 短语元素（5）

改变<cite>的样式

在我们讨论以结构,语义构建页面内容的过程中,我们也同样让页面变得更容易用CSS指定样式(以及修改样式).以<cite>标签为例,如果我们固定使用这个标签标记出版物的话,我们就能完全掌握现实的样式,在任何需要的时候都能轻易的修改.

假设所制作的整个网站,过程中使用了<cite>标签标记书籍参考资料以及出版物标题,我们加上全局CSS规则用斜体显示所有的<cite>元素,但是在几个月之后,我们希望不仅以斜体显示书籍出版无标题,还要用粗体,红色文字灰色背景.

当然,可以用几个CSS规则快速完成这项任务,立刻改变先前以<cite>标记的所有参考资料标题,如果使用<i>或者<em>的话就没办法明确指明对象了.

cite {
  font-style: italic;
  font-weight: bold;
  color: red;
  background-color: #ddd;
  }

图6-2使大多数浏览器的显示效果,而这是另一个先写结构化标记的好例子,让你稍后能轻易修改全站的设计风格.

图6-2. 以<cite>标记,使用CSS样式的效果