CSS學習之六：產生內容

文本主要展示CSS content及其相關的屬性的一些提示:
•:before和:after虛擬元素
•content屬性
•CSS quotes與content屬性的結合使用
•計數器

它們的基本介紹請參考：CSS content, counter-increment 和 counter-reset介紹及用法

1、插入產生內容

      使用:before 和:after虛擬元素結合content屬性，就可以在頁面內任何一個元素前或後插入內容，比如下面這個聲明，可以在具有href屬性的連結的前面加上字串“(link)”：

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

產生內容的樣式繼承與之關聯元素的樣式，除非給它添加額外的樣式，比如要使插入的字串顏色是灰色的，樣式這麼寫即可：

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

：

2、指定內容（content屬性）

CSS content 屬性可以包括這些值：attr(alt) | counter(name) | counter(name , list-style-type) | counters(name , string) | counters(name , string , list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote | string | url(url)

作用是用來和 :after 及 :before 虛擬元素一起使用，在對象前或後顯示內容。

要注意的是串值會原樣輸出，比如下面的規則：

h2:before { content: "<em>¶</em>"; color: gray; }

會產生如下的效果：

content屬性的串值要包括任何非ASCII字元集或實體，在CSS和XHTML中聲明該字元，並/或為該字元使用ISO編碼(如：”\00a3″)。，詳細請參考：http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

插入屬性值：

使用attr值可以插入alt文本、class或id值以及任何屬性，比如以下的規則可以實現插入超連結的連結地址而不使用js：

a:hover:after { background-color: #008000;content: attr(href);color: #FFF;font-size: .8em;line-height: 1.2em;position: absolute;top: -1.2em;left: 0;}

查看Demo

3、產生引號

CSS quotes屬性值包括：[<string> <string>] |none|inherit
string：用引號括起的嵌套標記定義。兩個為一組。第一個 string 定義前標記（例："<"），第二個 string 定義後標記（例：">"）。組之間用空格格開。嵌套標記的應用深度按定義順序內推；

none：content 屬性的 open-quote 和 close-quote 值將不會產生任何嵌套標記；

inherit：取決於具體的使用者代理程式。

使用content屬性的open-quotes值和close-quotes值以及quotes屬性，使得產生引號的管理成為可能。一般是在content屬性中定義引號，然後用quotes屬性控制引號的“開”與“關”，如有以下HTML結構：

<div class="text"><dl><dt>中國四大名著</dt><dd>三國演義</dd><address>羅貫中</address><br /><dd>水滸傳</dd><address>施耐庵</address><br /><dd>西遊記</dd><address>吳承恩</address><br /><dd>紅樓夢</dd><address>曹雪芹</address><br /></dl></div>

樣式：

.text dd, .text address { quotes: "\300A" "\300B"; display: inline; }.text dd:before { content: open-quote; }.text dd:after { content: close-quote; }dd + address:before { content: "（"; display: inline; }dd + address:after { content: "）"; display: inline; }

會在名著前後添加書名號，在左前前後添加括弧。

不過多層嵌套時各瀏覽器解析有很大的差別，比如有下面的結構：

<blockquote>In the begining,there was nothing.And God said:<q>Let there be ligth!</q>And there was still nothing,but you could see it.</blockquote>

樣式如下：

blockquote { quotes: '\201C' '\201D' '\2018' '\2019'; }blockquote:before { content: open-quote; }blockquote:after { content: close-quote; }blockquote q:before { content: open-quote; }blockquote q:after { content: close-quote; }

在safari 5 顯示不正常，blockquote前後無引號，q前後出現雙引號。

查看Demo

 4、計數器

CSS的counter-reset和counter-increment屬性值包括：[<string> <string>] |none|inherit

counter-reset設定計數器的起點；counter-increment能將其遞增一定的量。

假設有如下HTML結構：

<h1>The secret Life of Salmon</h1><h2>Introduction</h2><h2>Habitats</h2><h3>Ocean</h3><h3>Rivers</h3><h2>Spawning</h2><h3>Fertilization</h3><h3>Gestation</h3><h3>Hatching</h3>

對它使用計數器在標題前面添加所需要的清單項目：

h1 {counter-increment: chapter;/* 在每個h1的前面添加計數器 */counter-reset: section subsec;/* 並在每一個h1後面重設h2的計數器 */}h1:before {content: counter(chapter) ". ";}h2 {counter-increment: section;/* 在每個h2的前面添加計數器 */counter-reset: subsec;/* 並在每一個h2後面重設h3的計數器 */}h2:before {content: counter(chapter) "." counter(section) ". "; }h3 {counter-increment: subsec;/* 在每個h3的前面添加計數器 */}h3:before {content: counter(chapter) "." counter(section) "." counter(subsec) ". ";}

可以產生類似目錄的結構，查看Demo

另外，可以改變計數器的預設值，採用大小寫字母和數字混合的方式顯示清單項目：

h1 {counter-increment: chapter;/* 在每個h1的前面添加計數器 */counter-reset: section 0 subsec;/* 並在每一個h1後面重設h2的計數器 *//* 若“標識符-整數”對沒有指定整數，則預設為0（counter-increment屬性則為1），且數值可以為負 */}h1:before {content: counter(chapter,upper-alpha) ". ";/* 沒有為計數器指定關鍵字，預設為decimal計數樣式。*/}h2 {counter-increment: section;/* 在每個h2的前面添加計數器 */counter-reset: subsec;/* 並在每一個h2後面重設h3的計數器 */}h2:before {content: counter(chapter,upper-alpha) "." counter(section) ". "; }h3 {counter-increment: subsec;/* 在每個h3的前面添加計數器 */}h3:before {content: counter(chapter,upper-alpha) "." counter(section) "." counter(subsec,lower-roman) ". ";}

查看Demo

對於嵌套比較複雜的HTML結構，如果使用計數器，可以使用content的counters值實現，如下面表示目錄的有序列表：

代碼

<ol style="counter-reset: ordered -1;/* 使有序清單項目從1開始 */">
<li><a href="#" title="前言">前言</a></li>
<li>第1章
<ol>
<li><a href="#" title="第1.1節">第1.1節</a></li>
<li><a href="#" title="第1.2節">第1.2節</a>
<ol>
<li><a href="#" title="第1.2.1節">第1.2.1節</a></li>
<li><a href="#" title="第1.2.2節">第1.2.2節</a></li>
<li><a href="#" title="第1.2.3節">第1.2.3節</a></li>
</ol>
</li>
<li><a href="#" title="第1.3節">第1.3節</a></li>
</ol>
</li>
<li>第2章
<ol>
<li><a href="#" title="第2.1節">第2.1節</a></li>
<li><a href="#" title="第2.2節">第2.2節</a></li>
<li><a href="#" title="第2.3節">第2.3節</a></li>
</ol>
</li>
<li>第3章
<ol>
<li><a href="#" title="第3.1節">第3.1節</a></li>
<li><a href="#" title="第3.2節">第3.2節</a></li>
<li><a href="#" title="第3.3節">第3.3節</a></li>
</ol>
</li>
</ol>

只需添加如下的樣式即可實現可自動增加的清單項目：

ol { counter-reset: ordered; margin-left: 2em; list-style-type: none; }ol li:before {counter-increment: ordered;content: counters(ordered,".") " - ";/* content: counters(ordered,".",lower-alpha) " - ";清單項目會使用小寫字母 */}

查看Demo

想瞭解更多CSS content的運用，請移步：CSS content內容產生技術以及應用，這些高手們講的很精闢。

（全文完）