网页设计中的指定内容

  • 2019-05-28 15:29:00
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

指定内容

网页设计时,要生成内容,需要有一种办法来描述生成的内容。前面已经看到,这是利用content属性处理的,不过关于这个属性还有更多内容,前面了解的还远远不够。

前面已经看到了串和URl值的使用,计数器将在本章后面介绍。在介绍attr()和quote 值之前,我们将更详细地讨论串和URI。

串值会原样显示,即使其中包含某种标记也不例外。因此,以下规则会原样插入到文档中。

这说明,如果你希望生成内容中有一个换行(回车),不能直接使用<br>,而要使用串\A,这是CSS表示换行的方法(由Unicode换行符得来,其十六进制位置是A)。相反,如果有一个很长的串,需要把它分成多行则要用\符号对换行符转义。还可以使用转义来指示十六进制Unicode值,如\00AB。

利用URI值,只需指向一个外部资源(一个图像、视频、声音剪辑或用户代理支持的其他任何资源),然后插入到文档中适当的位置。如果用户代理出于某种原因不支持所指定的资源,例如你想向浏览器插入一个SVG图像,但这个浏览器无法识别SVG,或者向一个要打印的文档中插入视频,此时就要求用户代理完全忽略这个资源,不插入任何内容。

插入属性值

网页设计中,有些情况下,你可能想取一个元素的属性值,使之作为文档显示的一部分。举一个简单的例子,可以把每个链接的href属性值直接放在链接的后面,如下:

a[href]:after {content: attr(href);}

这也会导致生成内容与具体内容冲突的问题。在设计网页时,为解决这个问题,可以向声明增加一些串值。

所有属性值都可以作为生成内容插入:alt文本、class或id值,以及任何属性。创作人员可能会明确显示块引用的引用信息,如下,


blockquote:after {content:"("( attr(cite)")" display: block;

text-align: right; font-style: italic;}

对此,利用更复杂的规则还可以显示一个法律文档的文本和链接颜色值:

body:before {content:"Text:" attr(text)" I Link:" attr(link)

"I Visited:" attr(vlink)" I Active:" attr(alink);

display: block; padding: 0.33em;

border: 1px solid black; text-align: center;}

注意,如果一个属性不存在,会在相应位置插入一个空串。正如图12-19所示,在此向一个文档应用以上示例规则,该文档中body元素没有alink属性。

可以看到,文本“Active:”(包括后面的空格)确实插入到了文档中,不过后面什么也没有。如果只想在属性存在时才插入该属性的值,这就很方便。

当前文章标题:网页设计中的指定内容

当前URL:http://www.lyjtt.cn/news/wzzz/3033.html

上一篇:网页设计中的生成内容

下一篇:网页设计中的生成引号

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