指定內(nèi)容

在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，要生成內(nèi)容，需要有一種辦法來(lái)描述生成的內(nèi)容。前面已經(jīng)看到，這是利用content屬性處理的，不過(guò)關(guān)于這個(gè)屬性還有更多內(nèi)容，前面了解的還遠(yuǎn)遠(yuǎn)不夠。

前面已經(jīng)看到了串和URl值的使用，計(jì)數(shù)器將在本章后面介紹。在介紹attr()和quote 值之前，我們將更詳細(xì)地討論串和URI。

串值會(huì)原樣顯示，即使其中包含某種標(biāo)記也不例外。因此，以下規(guī)則會(huì)原樣插入到文檔中。

這說(shuō)明，如果你希望生成內(nèi)容中有一個(gè)換行（回車(chē)），不能直接使用<br>，而要使用串\A，這是CSS表示換行的方法（由Unicode換行符得來(lái)，其十六進(jìn)制位置是A）。相反，如果有一個(gè)很長(zhǎng)的串，需要把它分成多行則要用\符號(hào)對(duì)換行符轉(zhuǎn)義。還可以使用轉(zhuǎn)義來(lái)指示十六進(jìn)制Unicode值，如\00AB。

利用URI值，只需指向一個(gè)外部資源（一個(gè)圖像、視頻、聲音剪輯或用戶(hù)代理支持的其他任何資源），然后插入到文檔中適當(dāng)?shù)奈恢?。如果用?hù)代理出于某種原因不支持所指定的資源，例如你想向?yàn)g覽器插入一個(gè)SVG圖像，但這個(gè)瀏覽器無(wú)法識(shí)別SVG，或者向一個(gè)要打印的文檔中插入視頻，此時(shí)就要求用戶(hù)代理完全忽略這個(gè)資源，不插入任何內(nèi)容。

插入屬性值

在網(wǎng)頁(yè)設(shè)計(jì)中，有些情況下，你可能想取一個(gè)元素的屬性值，使之作為文檔顯示的一部分。舉一個(gè)簡(jiǎn)單的例子，可以把每個(gè)鏈接的href屬性值直接放在鏈接的后面，如下：

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

這也會(huì)導(dǎo)致生成內(nèi)容與具體內(nèi)容沖突的問(wèn)題。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，為解決這個(gè)問(wèn)題，可以向聲明增加一些串值。

所有屬性值都可以作為生成內(nèi)容插入：alt文本、class或id值，以及任何屬性。創(chuàng)作人員可能會(huì)明確顯示塊引用的引用信息，如下，

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

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

對(duì)此，利用更復(fù)雜的規(guī)則還可以顯示一個(gè)法律文檔的文本和鏈接顏色值：

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;}

注意，如果一個(gè)屬性不存在，會(huì)在相應(yīng)位置插入一個(gè)空串。正如圖12-19所示，在此向一個(gè)文檔應(yīng)用以上示例規(guī)則，該文檔中body元素沒(méi)有alink屬性。

可以看到，文本“Active:”（包括后面的空格）確實(shí)插入到了文檔中，不過(guò)后面什么也沒(méi)有。如果只想在屬性存在時(shí)才插入該屬性的值，這就很方便。