Download presentation
Presentation is loading. Please wait.
1
CH.12 CSS清單語法與格式設定
2
CSS清單語法與格式設定 編號清單：語法語格式(ol、li) 項目清單：語法語格式(ul、li)
CH.12 CSS清單語法與格式設定 目錄 編號清單：語法語格式(ol、li) 項目清單：語法語格式(ul、li) 清單項目的圖式(list-style-image)與定位(list-style-image) 定義清單：語法語格式(dl、dt、dd) 巢式清單：階層式選單應用(主選單、次選單)
3
編號清單：語法語格式 顯示方式 編號清單(數字清單)的每個項目都已經編號了，如步驟、項次…順序排列 編號清單語法 <ol>
<li> li 代表清單項目，每個項目都放於開始標記<li>與結束標記</li> 中 p.s.在預設值下，瀏覽器會縮排清單 <ol> <li>清單1</li> <li>清單2</li> <li>清單3 </li> </ol> 清單1 清單2 清單3 html語法 顯示方式
4
元素可使用type指定編號類型(數字、字母、羅馬數字等，數字為預設值)
編號清單：語法語格式 編號類型(使用html的type) 參考(較不常用) 元素可使用type指定編號類型(數字、字母、羅馬數字等，數字為預設值) type=A(控制清單之前數字的參數顯示成A. B. C......) type=a(控制清單之前數字的參數顯示成a. b. c......) type=I (控制清單之前數字的參數顯示成I. II. III......) type=i (控制清單之前數字的參數顯示成i. i. iii......) start=起始的數值 < ol type=A > ， 排 序 編 號 是 A , B ,C < ol type=a > ， 排 序 編 號 是 a , b ,c 。 < ol type=i > ， 排 序 編 號 是 i , ii ,iii 。 < ol type=I > ， 排 序 編 號 是 I , II , III。 start 就是起始的數值， 例如 < ol type=a start="4" > ， 那 就 會 從 d 開 始 。
5
編號清單：語法語格式 較常用的list-style-type 編號類型 (使用css的list-style-type)
在ol上使用css的list-style-type 屬性(數字、字母、羅馬數字等，數字為預設值) -> list-style-type 屬性是用來設定在清單中，每一條清單項目之前的記號要使用的格式。 decimal ：標記是數字(預設值)。 decimal-leading-zero ：0開頭的數字標記。(01, 02, 03, 等。) upper-roman ：大寫羅馬數字(I, II, III, IV, V, 等。) lower-roman ：小寫羅馬數字(i, ii, iii, iv, v, 等。) upper-latin ：大寫拉丁字母(A, B, C, D, E, 等。) lower-latin ：小寫拉丁字母(a, b, c, d, e, 等。) upper-alpha ：大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。) lower-alpha ：小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
6
項目清單：語法語格式 顯示方式 項目清單的為清單中項目前的樣式效果(可使用內定義樣式、圖形) 編號清單語法 <ul>
<li> li 代表清單項目，每個項目都放於開始標記<li>與結束標記</li> 中 p.s.在預設值下，瀏覽器會縮排清單 < ul> <li>清單1</li> <li>清單2</li> <li>清單3 </li> </ul> 清單1 清單2 清單3 html語法 顯示方式
7
編號類型 (使用css的list-style-type)
項目清單：語法語格式 編號類型(使用html的type) 參考(較不常用) 元素可使用type指定編號類型 < ul type= disc > ， 使用圓 點 < ul type= circle > ， 使用空心圓點 < ul type= square > ， 使用正方黑點 p.s.< li > 是 可 以 單 獨 使 用 的 編號類型 (使用css的list-style-type) 較常用的list-style-type 在ul上使用css的list-style-type 屬性 none 無標記：沒有無標記 disc 全黑/實心圓圈(預設值) Circle 空心圓圈 square 正方形
8
清單項目的圖式(list-style-image)
清單項目的圖式與定位 清單項目的圖式(list-style-image) list-style-image 屬性是用來將某個圖案設定為記號。 這個屬性的用法為，list-style-image:url([image_url]); 其值得開圖示url，然後是一組括弧，括弧影像竟要在雙引號內 此屬性可套用在<ul>身上，也可套用在<li>身上 所使用的list-style-image大小會原圖顯示(無法調整) 所使用的list-style-image定位定位至左上角(無法調整定位)
9
清單項目的圖式與定位 清單速記(list-style) list-style-image:url("circle.gif") ;
將list-style-style、list-style-position、及 list-style-image 屬性簡化為一個 list-style 屬性。 屬性的順序設定並不會影響顯示的狀況。 list-style-image:url("circle.gif") ; list-style-image: none; list-style-position: inside; list-style:url("circle.gif") , none , inside; 「list-style-type」的限制：無法彈性修正位置以及自訂樣式的缺點。 「list-style-image」的限制： 雖可替換自訂的樣式圖片，卻在各瀏覽器上存在著不一致的情況，在位置上的調整上也具有難以異動的缺點
10
解決清單項目的圖式與定位的方式 利用背景「background」定義清單項目的圖式與定位方式-1
一個具有調整彈性，又能兼容各瀏覽器的「背景圖片製作的項目符號」清單項目做法 Step 1 建立基本的項目清單 Step 2 清除預設的項目符號（以及元素內外間距） 為了清除各瀏覽器之間的差異！ 項目清單的「縮排」在 FireFox 底下預設是使用 padding 來呈現，而在 IE 則是 margin 。 將所有瀏覽器基準同於一線的時候，再去作調整， 則每個瀏覽器之間的差異就不會太大了！ Step 3 自訂縮排間距 隨心所欲將項目清單位置作調整 解決「list-style-type」的限制：無法彈性修正位置以及自訂樣式的缺點。
11
解決清單項目的圖式與定位的方式 利用背景「background」定義清單項目的圖式與定位方式-2 Step 4 加上自訂的背景圖片
在 li 下背景圖片的屬性，須增加一個 no-repeat 必免得背景圖片一直重複。 Step 5 調整背景圖片位置 利用background-position調整 解決「list-style-image」的限制： 雖可替換自訂的樣式圖片，卻在各瀏覽器上存在著不一致的情況， 在位置上的調整上也具有難以異動的缺點 Step 6 調整項目位置
12
定義清單的使用(dl、dt、dd) 定義清單(list-style) <dl> Definition list：項 目 清 單
一般做為解釋一樣動作 <dl> Definition list：項 目 清 單 定義清單通常是用<dl>元素製作的，通常會由一系列的名詞和定義所組成 在<dl>元素內，通常會看到成對的<dt>與<dd>元素 <dl> <dt>AA</dt> <dd>定義一</dd> <dd>定義二</dd> <dt>B-1<dt> <dt>B-2<dt> <dd>都是同個意思</dd> </dl> <dt> Definition term ： 個 別 的 名 詞 項 目 此元素通常用來容納要被應億的名詞(定義名詞) <dd>Definition definiton：名詞的解釋和定義內容 此元素通常用來容納其定義 p.s.可以兩個名詞使用同一個定義，或是一個名詞內有兩個同意義
13
巢式清單：階層式選單應用(主選單、次選單)
1.可將第二個清單放在清單項目中做出階層效果 巢式清單的使用 2.可將第二個清單放清單內，做出階層效果 <ol start=3 type=I> <li>小明的基本資料</li> <ol START=5 TYPE=a> <li>姓名:王小明"</li> <li>性別 : 男</li> <li>生日:95/3/12</li> <li>電話:123456</li> <li>地址:中壢</li> </ol > <li>學生資料</li> <ol TYPE=A> <li>學號: </li> <li>班級:計中一A</li> <li>學校:真理大學</li> </ ol > <ol start=3 type=I> <li>小明的基本資料 <ol START=5 TYPE=a> <li>姓名:王小明"</li> <li>性別 : 男</li> <li>生日:95/3/12</li> <li>電話:123456</li> <li>地址:中壢</li> </ol > </li> <li>學生資料 <ol TYPE=A> <li>學號: </li> <li>班級:計中一A</li> <li>學校:真理大學</li> </ ol >
Similar presentations
