CSS排版程式(8)-Content屬性

Content是CSS2發展出來的屬性,它和傳統的CSS有著很大的不同。傳統的CSS是改變內容的樣式,例如顏色、大小等等,但是Content屬性則類似輸出字串,讓我們可以利用CSS,在原本的內容裡增加額外的資訊。不過,通常增加的內容都只是補助性的資訊,為了使原文變得更清楚,而不會夾雜效果字。結合 :before 與 :after 的選擇器(selector),可以在原始內容的前面或後面加入額外資訊(參考套用規則)。

屬性名稱

content(輸出內容)、counter-increment(計數器)、counter-reset(計數器歸零)、quotes(括號)

content

說明:在指定位置中加入補充內容。

屬性值:(字串)、(網址)、none(取消設定)、normal(設定成一般,預設值為none)、counter(輸出計數器)、attr(屬性)(加入屬性值)、open-quote(加入上括號)、close-quote(加入下括號)、no-open-quote(移除上括號)、no-close-quote(移除下括號)、inherit(繼承父元素設定)

【範例】

.line1:before { content:"NEW - "; }
.line2:before { content:url(https://lh3.googleusercontent.com/-wbFZ08rCw4I/Tc9bttIpZYI/AAAAAAAACkI/DkYWndQrwlc/chrome.gif); }
a:after { content:"(" attr(href) ")"; }
.line4:before { content:open-quote; }
.line4:after { content:close-quote; }

【結果】

NEW - 利用CSS的content屬性可以在不影向本文的情況下加入文字。

指定的內容是網址時,可加入圖片、聲音、影片等。

想要把某個HTML標籤的屬性值顯示出來,只要使用content:attr(屬性)即可將該屬性輸出。例如把網址(http://www.moke.tw/wordpress)的連結位置顯示在後面。

“加入括號時,有上括號就一定要有下括號”

counter-increment

說明:建立與設定一個計數器。透過計數器ID來識別不同的計數器。

屬性值:none(沒有計數器會增加)、(計數器ID)、inherit(繼承父元素設定)

【範例】

body { counter-reset:section; /* 遇到body時重置計數器section */ }
h1 { counter-reset:subsection; /* 遇到h1時重置計數器subsection */ }
h1:before {
    counter-increment:section;          /* 指定控制的計數器為section */
    content:"Section " counter(section) ". ";   /* 在h1前面加入Section n. */
}
h2:before {
    counter-increment:subsection;           /* 指定控制的計數器為subsection */
    content:counter(section) "." counter(subsection) " ";
}

【結果】

Section 1. 網路基礎程式

1.1 HTML

1.2 CSS

1.3 JavaScript

Section 2. 進階程式設計

2.1 Android

2.2 facebook

counter-reset

說明:將計數器歸零(確保計數器從頭開始計算)。範例請參考counter-increment

屬性值:none(沒有計數器要重置,預設值)、(計數器ID)、inherit(繼承父元素設定)

quotes

說明:加入括號並指定括號格式。

屬性值:none(取消括號,包含用open-quote與close-quote加入的括號)、(字串) (字串)、inherit(繼承父元素設定)

【範例】

q { quotes: "<" ">" "'" "'"; }

【結果】

<透過’quotes’可指定第一層、第二層…依序的括號形式>