网页设计中的生成内容

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。内容未经允许不得转载，或转载时需注明来源： 创新互联