URL, 計數器

長度 | 百分比 | URI | 計數器 | 顏色 | 角度 | 時間 | 頻率 | 字串

URI

URI 指到資源的位址。可用函式 url('資源網址') 指定。資源網址可用 ' ' 或 " " 作首尾標示；或不加標示也可。可用相對於風格表網址的資源網址。( ) , 空白 ' " 左列符號必須加上脫離字 \。也可用 URI 脫離字碼。

<style type='text/css'> p.uu { font-size:28px; width:200px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg")} </style> <p class='uu'>Not ask what your country can do for you, ask what you can do for your country.</p>

• 範例中，用 url() 指定一張圖像作為 P 元件的背景。

計數器

可用來計算章節或頁數。計數器起始值為 0。 計數器可用 counter-increment, counter-reset 改變其值。 計數器的值必須用 CONTENT 特徵擷取。

參用計數器的值的方法有：counter(identifier), counter(identifier, list-style-type)。 參用數個巢狀式同名的計數器的方法有：counters(identifier, string), counters(identifier, string, list-style-type)。

IE6 沒有支援 counter；IE8, Firefox3.0, Safari, Chrome 都可用。 <style type='text/css'> p.ctr { counter-increment: pnum } h3.ctr { counter-reset: pnum } p.ctr:before { content: "＜"counter(pnum, upper-roman)"＞" } </style> <h3 class='ctr'>子曰：</h3> <p class='ctr'>學而時習之，不亦說乎？</p> <p class='ctr'>有朋自遠方來，不亦樂乎？</p> <p class='ctr'>人不知而不慍，不亦君子乎？</p>

• 範例中，計數器的名稱是 pnum。遇到類別為 ctr 的 H3 元件，pnum 會設為 0。 遇到類別為 ctr 的 P 元件，pnum 會加 1，並且在其前面加上計數器值。文句多加上了 I, II, III 是計數器的值。