只要粗体或斜体就好

必须注意的是,很多情况下只需要视觉上展示粗体,斜体的文字效果,换句话说,假设你的侧边栏里有一串链接列表,而你喜欢让所有链接用相同的效果显示:也就是粗体(图6-1)

图6-1.粗体链接放在侧边栏里的示例

除了视觉特色外,我们并不打算特别强调链接内容,这里就是以CSS改变链接外观显示效果的好地方,让他们不会被屏幕阅读器以及其他非可视化浏览器特别强调.

举例来说,你真的想让粗体链接被念得更快,更大声,音调更高吗?大概不会,这边的粗体完全只是显示效果.

font-weight相当于粗体

为了达到图6-1的显示效果,让我们假设链接栏放在id设为sidebar的<div>中,这样我们就能用CSS指定#sidebar之内的链接要以粗体显示:

#sidebar a{
    font-weight:bold;
}

极度简单,让我觉得一提起就有些可笑,但是这的确是个帮助分离结构与显示效果的好方法.

那是粗体!
同样的,在思考斜体文字的时候也能应用类似的想法,在你不想强调的内容,只单纯想以斜体显示文字时,你能再度使用font-style属性通过CSS处理这些状况

让我们使用相同的#sidebar作为示例,举例来说如果你想使#sidebar里的所有链接显示成斜体,那么可以这样写:

#sidebar a{
  font-style:italic;
}

又是个简单至极的概念,但是在结构化标记语法的领域里,我觉得讨论这些情况十分重要--使用CSS处理央视,代替显示效果标签的状况.有些时候最简单的解决方法也最容易被忽略.

共用粗体与斜体

在打算同时用粗体和斜体显示文字内容的时候,我觉得必须先思考一个问题,你打算传达什么程度的强调?根据这个问题的答案,我会选择适当的标签:<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;
}

出处：蓝色理想
责任编辑：bluehearts

上一页 短语元素 [1] 下一页 短语元素 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。