在網(wǎng)頁設(shè)計時,要生成內(nèi)容,需要有一種辦法來描述生成的內(nèi)容。前面已經(jīng)看到,這是利用content屬性處理的,不過關(guān)于這個屬性還有更多內(nèi)容,前面了解的還遠遠不夠。
前面已經(jīng)看到了串和URl值的使用,計數(shù)器將在本章后面介紹。在介紹attr()和quote 值之前,我們將更詳細地討論串和URI。
串值會原樣顯示,即使其中包含某種標(biāo)記也不例外。因此,以下規(guī)則會原樣插入到文檔中。
這說明,如果你希望生成內(nèi)容中有一個換行(回車),不能直接使用<br>,而要使用串\A,這是CSS表示換行的方法(由Unicode換行符得來,其十六進制位置是A)。相反,如果有一個很長的串,需要把它分成多行則要用\符號對換行符轉(zhuǎn)義。還可以使用轉(zhuǎn)義來指示十六進制Unicode值,如\00AB。
利用URI值,只需指向一個外部資源(一個圖像、視頻、聲音剪輯或用戶代理支持的其他任何資源),然后插入到文檔中適當(dāng)?shù)奈恢?。如果用戶代理出于某種原因不支持所指定的資源,例如你想向瀏覽器插入一個SVG圖像,但這個瀏覽器無法識別SVG,或者向一個要打印的文檔中插入視頻,此時就要求用戶代理完全忽略這個資源,不插入任何內(nèi)容。
在網(wǎng)頁設(shè)計中,有些情況下,你可能想取一個元素的屬性值,使之作為文檔顯示的一部分。舉一個簡單的例子,可以把每個鏈接的href屬性值直接放在鏈接的后面,如下:
a[href]:after {content: attr(href);}
這也會導(dǎo)致生成內(nèi)容與具體內(nèi)容沖突的問題。在設(shè)計網(wǎng)頁時,為解決這個問題,可以向聲明增加一些串值。
所有屬性值都可以作為生成內(nèi)容插入:alt文本、class或id值,以及任何屬性。創(chuàng)作人員可能會明確顯示塊引用的引用信息,如下,
blockquote:after {content:"("( attr(cite)")" display: block;
text-align: right; font-style: italic;}
對此,利用更復(fù)雜的規(guī)則還可以顯示一個法律文檔的文本和鏈接顏色值:
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;}
注意,如果一個屬性不存在,會在相應(yīng)位置插入一個空串。正如圖12-19所示,在此向一個文檔應(yīng)用以上示例規(guī)則,該文檔中body元素沒有alink屬性。
可以看到,文本“Active:”(包括后面的空格)確實插入到了文檔中,不過后面什么也沒有。如果只想在屬性存在時才插入該屬性的值,這就很方便。