清單的CSS樣式.

Presentation on theme: "清單的CSS樣式."— Presentation transcript:

1 清單的CSS樣式

2 unordered list / ordered list
<ul> <li>XHTML 1.0</li> <li>XHTML 1.1</li> <li>XHTML 2.0</li> </ul> <ol> <li>XHTML 1.0</li> <li>XHTML 1.1</li> <li>XHTML 2.0</li> </ol>

3 清單類型 list-style-type: disc; disc circle square
decimal decimal-leading-zero lower-alpha upper-alpha lower-roman upper-roman none cjk-ideographic

4 清單位置 list-style-position: outside; list-style-position: inside;

5 清單影像 list-style-image: url(icon.png); ul.iconc {
font-size: 18pt; } <ul class="iconc"> <li>XHTML</li> <li>CSS</li> <li>JavaScript</li> </ul>

6 顯示成清單項目 display: list-item; 可指定任何元素，以清單方式顯示 p {display: list-item; … }
h1 {display: list-item; … } h2 { display: list-item; list-style-type: decimal; list-style-position: inside; } … <h2>h2 元素是清單的替代元素</h2>

7 元素之內容屬性 (content) content: 屬性值; 屬性值
[normal | <string> | <uri> | <counter> | attr(<identifier>) |open-quote | close-quote | no-open-quote | no-close-quote ]+ p:before {content: "Answer:"; font-size: 36px; color: purple;} p.after {content: url(smile.gif);} a[href]:after {content: " (" attr(href) ")";} … <p>元素本來的內容</p> <a href="

8 設定清單編號號碼 設定起始號碼(重新開始編號) 設定編號增加量 使用counter-reset屬性
屬性值 [<identifier> <integer>?]+ | none <identifier>為自訂的counter name <integer> 為counter起始值 設定編號增加量 使用counter-increment屬性 <integer> 為每次增加量

9 div {counter-reset : chapter;}
h1:before { counter-increment : chapter; content : "Chapter " counter(chapter) ": " } h2:before { counter-increment : section; content : "Section " counter(section) ": " h1 {counter-reset : section;} <div > <h1>XHTML</h1> <h2>XHTML 1.0</h2> <h2>XHTML 1.1</h2> <h2>XHTML 2.0</h2> <h1>CSS</h1> <h2>CSS 1.0</h2> <h2>CSS 2.0</h2> <h2>CSS 2.1</h2> <h1>JavaScript</h1> <h2>JavaScript 1.0</h2> </div> <div> <h1>PHP</h1> <h2>php基本語法</h2> <h2>_POST與_GET</h2> <h2>表單處理</h2> <h1>MySQL</h1> <h2>SQL</h2> <h2>php與MySQL</h2> </div>