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

共用粗体与斜体

在打算同时用粗体和斜体显示文字内容的时候,我觉得必须先思考一个问题,你打算传达什么程度的强调?根据这个问题的答案,我会选择适当的标签:<em>(强调)或<strong>(更强烈的强调),然后以选择的标签标记文字.

举例来说,以下面的例子来说,我原本打算让"fun"同时以粗体,斜体显示,最后我选择用<em>来强调这个字.

Building sites with web standards can be <em>fun</em>!

大多数浏览器只会以斜体来显示这个字,要同时使用粗体和斜体,我们有几种选择.哦,我真的希望你同意上面这句话.

普通的<span>

方法之一,是以普通的<span>包在"fun"之外,并且指定CSS规则将所有<em>之内的<span>以粗体显示.标记语法看起来像这样:

Building sites with web standards can be <em><span>fun</span></em>!

而CSS看起来则像这样:

em span{
  font-weight:bold;
}

明显的语义部分并不好,因为我们加上了额外的标签,但是这个方法人人仍然有用.

以class强调

另一个方法则是为<em>标签指定一个class,并且以CSS加上粗体效果,标记语法看起来像这样:

Building sites with web standards can be <em class="bold">fun</em>!

而CSS看起来则像这样:

em.bold{
    font-weight:bold;
}

使用<em>就能达成斜体效果(同时在语义上强调了文字内容),而为它加上bold class则会使<em>之内的文字以粗体显示.

类似的方法也能用来修饰<strong>.这时我们能在加重强调某段文字的时候,设计italic class加上斜体效果,再配上<strong>原来就有的粗体效果.

标记语言看起来像这样:

Building sites with web standards can be <strong class="italic">fun</strong>!

而CSS则是这样:

strong.italic{
  font-style:italic;
}