网页设计中的文本阴影

  • 2018-10-11 15:17:40
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

网页设计中CSS2包含一个属性来为文本增加阴彩,不过这个属性并没有在CSS2.1中保留,因为在CSS2.1完成前没有一个浏览器对此提供了充分的支持。可以考虑一下,如果要让网站设计师确定一个元素中文本的轮廓,再计算一个或多个阴影——所有这些阴影还必须混合在一起而不与文本本身重叠——想想看这需要做多少工作,这样看来,规范中去掉阴影也是情有可原的。

显然,默认情况是文本没有阴影。否则,理论上可以定义一个或多个阴影。每个阴影都由一个颜色和3个长度值来定义。这个颜色当然设置了阴影的颜色,所以可以定义绿色,紫色甚至白色阴影。

前两个长度值确定了阴影与文本的偏移距离,第三个长度值可选,定义了阴影的“模糊半径”。要定义一个相对于文本向右偏移5像素向下偏移0.5em的绿色阴影,而且不模糊,可以写作:

text-shadow: green 5px 0.5em;

负长度值会使阴影落在原文本的左上方。

模糊半径定义为从阴影轮廓到模糊效果边界的距离。如果半径为2像素,模糊效果就会作用于阴影轮廓到模糊边界之间的空间。具体的模糊方法并未定义,所以不同的网页设计可能会有不同的效果。举例来说,以下样式可能得到如图6-31所示的显示:

p.cl1 {color: black; text-shadow: silver 2px 2px 2px;}

p.cl2 {color: white; text-shadow: 0 0 4px black;}

P.cl3 {color: black; text-shadow: 1em 1em 5px gray,-1em -1em silver;}

注意:图6-31是用Photoshop生成的,因为写作本书时Web浏览器不支持text-shadow.

图6-31:到处都是阴影

处理空白符

我们已经介绍了很多对文本应用样式的方法,下面来讨论属性white-space,它会影响用户代理对源文档中的空格、换行和tab字符的处理。

white-space

使用这个属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲,默认的XHTML处理已经完成了空白符处理:它会把所有空白符合并为一个空格。所以给定以下标记,它在Web浏览器中显示时,各个字之间只会显示一个空格,而且忽略元素中的换行。

<p>This   paragraph   has   many

spaces  in it.</p>

可以用以下声明显式地设置这种默认行为:

p {white-space: normal;}

这个规则告诉浏览器按平常的做法去做:丢掉多余的空白符。给定这个值,换行字符(回车)会转换为空格,一行中多个空格的序列也会转换为一个空格。

不过,如果将white-space设置为pre,受这个属性影响的元素中,空白符的处理就有所不同,就好像元素是XHTML pre元素一样;空白符不会被忽略,如图6-32所示:

p {wnice-space: pre;}

<p>This  paragraph   has   many

spaces  in it.</p>

图6-32:保留标记中的空格

不过,如果white-space值为pre,浏览器将会注意额外的空格,甚至回车。在这个方面,而且仅在这个方面,任何元素都可以相当于一个pre元素。

与之相对的值是nowrap,它会防止元素中的文本换行,除非使用了一个br元素。在CSS 网页设计中使用nowrap非常类似于HTML 4中用<td nowrap>将一个表单元格设置为不能换行,不过white-space值可以应用到任何元素,以下标记的效果如图6-33所示:

<p style="white-space: nowrap">This paragraph is not allowed to wrap, which means that the only way to end a. line is to insert a line-break element. If no such element is inserted, then the line will go forever, forcing the user to scroll horizontally to read whatever can't be initially displayed <br/>in the browser window.</p>

图6-33:用white-space属性防止换行

还可以使用white-space来替换表单元格上的nowrap属性:

td (white-space: nowrap;}

<table><tr>

<td>The contents of this cell are not wrapped.</td>

<td>Neither are the contents of this cell.</td>

<td>Nor this one, or any after it, or any other cell in this table</td>

<td>CSS prevents any wrapping from happening.</td>

</tr></table>

CSS2.1引入了值pre-wrap和pre-line,这在以前版本的CSS中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。

如果一个元素的white-space被设置为pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line与pre-wrap相反,会像正常文本中一样合并空白符序列,但保留换行符。例如,考虑以下标记,其效果如图6-34所示:

<p style="white-space: pre-wrap;">

This paragraph has a great many spaces within its textual content, but their preservation will not prevent line wrapping or line breaking.

</p>

<p styles="white-space: pre-line;">

This paragraph has a great many spaces within its textual content, but their collapse will not prevent line wrapping or line breaking.

</p>

图6-34:处理空白符的两种不同方法

表6-1总结了white-space属性的行为。

表 6-1: white-space属性

文本方向

如果你读的是本书英文版或其他语言的版本,就会从左到右、从上到下地阅读,这就是英语的流方向。不过,并不是所有语言都是如此。还有许多从右向左读的语言,如希伯来语和阿拉伯语等,CSS2引入了一个属性来描述其方向性。

direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向,以及两端对齐元素中最后一行的位置。对于行内元素,只有当unicode-bidi属性设置为embed或bidi-override时才会应用direction属性(见以下关于unicode-bidi 的描述)。

注意:在CSS3之前,CSS规范中没有涵盖从上到下读的语言。在写作本书时,CSS3 Text Module 还是一个候选推荐,它解决了这个问题。引入了一个新属性writing-mode。

尽管ltr是默认值,但可以想见,如果浏览器在显示从右向左读的文本,默认值会改为rtl。因此,浏览器可能会有以下内部规则:

*:lang(ar),*:lang(he){direction:rtl;}

实际的规则可能更长一些,将涵盖所有从右向左读的语言,而不只是阿拉伯语和希伯来语,不过这也能说明问题。尽管CSS试图处理书写方向,但Unicode有一种更健壮的方法来处理方向性。利用属性unicode-bidi, 网页设计创作人员可以充分利用Unicode的某些功能。

在此我们将简要地引用网页设计中CSS2.1规范中关于这些值的描述,这些描述很好地说明了各个值的实质。

normal

元素不会对双向算法打开附加的一层嵌套。对于行内元素,顺序的隐式重排会跨元素边界进行。

embed

如果是一个行内元素,这个值对于双向算法会打开附加的一层嵌套。这个嵌套层的方向由direction属性指定。会在元素内部隐式地完成顺序重排。这对应于在元素开始处增加一个LRE (对于direction: ltr: U+202A)或RLE (对于direction: rtl: U+202B),并在元素的最后增加一个PDF (U+202C)。

bidi-override

这会为行内元素创建一个覆盖。对于块级元素,将为不在另一块中的行内后代创建一个覆盖。这说明,顺序重排在元素内部严格按direction属性进行,忽略了双向算法的隐式部分。这对应于在元素开始处增加一个LRO (对于direction: ltr: U+202D)或RLO (对于direction: rtl: U+202E),并在元素最后增加一个PDF (U+202C).

小结

即使不改变所用的字体,还是有很多方法来改变文本的外观。除了一些经典的效果(如加下划线)外,CSS还允许在文本上面画线,或穿越文本画线,改变单词和字母间的间隔大小;将段落(或其他块级元素)的首行缩进;将文本左对齐或右对齐,等等。甚至可以修改文本行间的间隔大小,不过这个操作太过复杂,在第7章再详细说明。

这些行为有些得到了很好的支持,有些则根本不被支持。文本两端对齐就是一个没有得到充分支持的行为,20世纪发布的大多数用户代理在文本装饰和垂直对齐方面都存在bug,另外在行高计算上也存在问题。另一方面,如果用户代理支持单词和字母间隔,则总能正常工作,另外文本缩进也只是有很少的一些小bug。改变大小写也是如此,用户代理总能正确地支持这个方面。

在本章中我提到过,行布局比我们谈到的还要复杂,下一章将介绍这个过程的详细内容,同时还将介绍很多其他知识。

  【注释】

  [1] 注1: 网页设计CSS中没有说明如何处理连字符,因为不同的语言有不同的连字符规则。规范没有尝试去调合这样一些很可能不完备的规则,而是干脆不提这个问题。


当前文章标题:网页设计中的文本阴影

当前URL:http://www.lyjtt.cn/news/wzzz/text-shadow.html

上一篇:网页设计中的文本装饰

下一篇:网页设计中的基本框

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)