CSS2.1 內容樣式(Content)與滑鼠游標(Cursor)

content

屬性樣式 設定值
content
內容樣式
normal
none
content: "字串"
content: attr(屬性); (追加屬性值)
content: url('路徑與檔名') (追加圖片或影音資料。)
open-quote (利用 quotes 屬性追加引號,起始。)
close-quote (利用 quotes 屬性追加引號,結束。)
no-open-quote (利用 quotes 屬性不追加引號,起始。)
no-close-quote (利用 quotes 屬性不追加引號,結束。)
預設值:normal
適用於::before 與 :after 擬元素
繼承性:無

這個樣式是用來追加內容到元素的前面或後面(IE6 不支援)。

<p class="MyStyle1">山不在高,有仙則名。</p>
p.MyStyle1:before {content: "【追加在前頭】";}

下面的圖是上述範例的結果:

<p class="MyStyle2" title="陋室銘">山不在高,有仙則名。</p>
p.MyStyle2:before {content: "【" attr(title) "】";}

下面的圖是上述範例的結果:

quotes

屬性樣式 設定值
quotes
引號樣式
none
"字串" "字串"
預設值:視使用者瀏覽器而定
適用於:全部
繼承性:有

這個樣式是用來設定引號(IE6 不支援)。

<q class="MyStyle3">山不在高,有仙則名。</q>
q.MyStyle3 {quotes: "\201E" "\201C";}

下面的圖是上述範例的結果:

字元 ISO 10646 code(hex) 字元 ISO 10646 code(hex) 字元 ISO 10646 code(hex)
" 0022 ' 0027 2039
203A « 00AB » 00BB
2018 2019 201C
201D 201E    

counter-increment, counter-reset

屬性樣式 設定值
counter-increment
增加(減少)編號計數器的值
[計數器名稱 整數]
(整數可為正整數或負整數,若未指定數值的話,其預設的值為 1。)
counter-reset
重設編號計數器的值
[計數器名稱 整數]
(整數可為正整數或負整數,若未指定數值的話,其預設的值為 0。)
預設值:視使用者瀏覽器而定
適用於:全部
繼承性:無

這兩個樣式是用來增加(減少)、重設編號計數器的值(IE6、Firefox2 不支援)。

<h1></h1>
	<h2></h2>
	<h2></h2>
<h1></h1>
	<h2></h2>
	<h2></h2>
	<h2></h2>
	<h2></h2>
h1:before {
	counter-increment: myChapter;
	content: "第" counter(myChapter) "章";
	counter-reset: mySection;
	}
h2:before {
	content: "第" counter(myChapter) "章 第" counter(mySection) "節";
	counter-increment: mySection;
	}

下面的圖是上述範例的結果:

cursor

屬性樣式 設定值
cursor
滑鼠游標
auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
預設值:auto
適用於:全部
繼承性:有

這個樣式是用來當滑鼠游標指到某個元素時,游標應使用的游標圖示。

div.MyStyle {
	cursor: wait;
	}

文章分類:CSS2.1
文章標籤: |
發表日期: 20080516

文章標籤

Adobe Artiste BuddyPress CPBL CSS Download Free Game Google JavaScript MLB Plugin Politics Pretty Software Taiwan Template Tags WP WPMU XHTML YouTube 三立 今日推薦 佈景主題 教學 新聞引用 日劇 棒球 正體中文 筆記 緯來 語系檔 資訊 隨筆手札 雜感 驀然回首