网页设计中的生成内容

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

CSS2和CSS2.1包含一个称为生成内容(generated content)的新特性。这是指由浏览器创建的内容,而不是由标志或内容来表示。

网页设计中,列表标志就是生成内容。在列表项的标记中,没有任何部分直接表示这些标志,而且作为创作人员,你不必在文档内容中写上标志。浏览器会自动生成合适的标志。对于无序列表,标志是某种圆点,如空心圆、实心圆或方块。对于有序列表,标志则是一个计数器,对每个后续列表项不断增1。

要理解如何影响列表标志,以及如何定制有序列表(或任何元素!)的计数,必须先了解更基本的生成内容。

插入生成内容

网页设计时为了向文档中插入生成内容,可以使用:before和:after伪元素。这些伪元素会根据content属性把生成内容放在一个元素内容的前面或后面(content属性见下一节的介绍)。

例如,你可能希望所有超链接前面增加前缀文本“(link)”加以标志,从而在打印时更明显。

a[href]:before (content:"(link)";}

注意,生成内容和元素内容之间没有空格。这是因为前例中content的值未包含空格。可以将这个声明修改如下,确保生成内容和实陈内容之间有一个空格:

a[href]:before {content:"(link)";}

这个差别很小,但很重要。

采用类似方式,还可以在指向PDF文档的链接最后插入一个小图标。为此,规则可能如下:

a.pdf-doc: after {content: url (pdf-doc-icon.gif)}

假设希望进一步设置这些链接的样式,再增加一个边框。可以利用以下第二个规则完成:

a.pdf-doc {border: 1px solid gray;}

a.pdf-doc: after {content: url (pdf-doc-icon.gif)}

假设希望进一步设置这些链接的样式,再增加一个边框。可以利用以下第二个规则完成:

a.pdf-doc {border: 1px solid gray;}

你可能认为定位能解决问题,不过CSS2和CSS2.1明确地禁止浮动或定位:before和:after内容,还禁止使用列表样式属性以及表属性。另外还有以下限制:

如果:before或:after选择器的主体是块级元素,则display属性只接受值none、inline、block和marker。其他值都处理为block。

如果:before或:after选择器的主体是一个行内元素,属性display只能接受值none和inline。所有其他值都处理为inline.

例如,考虑以下规则:

em:after {content:"(!)"; display: block;}

由于em是一个行内元素,生成内容不能是块级内容。因此,值block重置为inline。不过,在下一个例子中,生成内容被置为块级内容,因为目标元素就是块级元素:

h1:before (content:"New Section"; display: block; color: gray;}

生成内容是网页建设中有一个很有意思的方面,它由与之关联的元素继承值。因此,给定以下规则,生成文本将是绿色,与段落内容的颜色相同:

p {Color: green;}

p:before {content:":::";}

如果希望生成文本是紫色,只需一个简单的声明:

p:before (content:":::"; color: purple;}

当然,这种值继承只适用于可继承的属性。特别指出这一点是因为这会影响达到某些效果的方式。请考虑以下规则:

h1 {border-top: 3px solid black; padding-top: 0.25em;}

h1:before (content:"New Section"; display: block; color: gray; border-bottom: 1px dotted black; margin-bottom: 0.5em;}

生成内容(作为块级内容)的下外边距将元素的实际内容向下推了O.5em。不论怎样讲,此例中生成内容的效果就是把hi元素分成了两部分:生成内容框和实际内容框。这是因为生成内容声明为display: block。

注意边框如何放置,还要注意上内边距仍保留。生成内容的下外边距也保留,不过由于生成内容现在是行内内容,而行内元素的外边距不影响行高,所以视觉上外边距不起作用。


名称栏目:网页设计中的生成内容
链接分享:https://www.cdcxhl.com/news/169301.html

成都网站建设公司_创新互联,为您提供企业网站制作网页设计公司标签优化微信小程序营销型网站建设网站内链

广告

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

成都网页设计公司