网页设计中的指定内容

2022-06-07    分类: 网站建设

指定内容

网页设计时,要生成内容,需要有一种办法来描述生成的内容。前面已经看到,这是利用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/news/164321.html

成都网站建设公司_创新互联,为您提供网站设计微信公众号网站收录Google网页设计公司软件开发

广告

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

搜索引擎优化