指定內容

在網頁設計時，要生成內容，需要有一種辦法來描述生成的內容。前面已經看到，這是利用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:”（包括后面的空格）確實插入到了文檔中，不過后面什么也沒有。如果只想在屬性存在時才插入該屬性的值，這就很方便。

網站標題：網頁設計中的指定內容
網頁網址：http://m.2m8n56k.cn/news21/164321.html

成都網站建設公司_創新互聯，為您提供網站導航、網站排名、靜態網站、商城網站、響應式網站、品牌網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯