网页设计中的指定内容

指定内容

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

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

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

这说明，如果你希望生成内容中有一个换行（回车），不能直接使用
，而要使用串\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:”（包括后面的空格）确实插入到了文档中，不过后面什么也没有。如果只想在属性存在时才插入该属性的值，这就很方便。

网站标题：网页设计中的指定内容
网页网址：https://www.cdcxhl.com/news21/164321.html

成都网站建设公司_创新互联，为您提供网站导航、网站排名、静态网站、商城网站、响应式网站、品牌网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联