:::
7-2 上課範例：style2.css
8. 表格、清單、超連結
一、表格
- 取消隔線間隔：border-collapse: collapse;
- table和td或th需分別設定border。
二、基本清單
- 樣式：list-style-type: decimal-leading-zero(補零數字) , none(不要符號)
- 位置：list-style-position:inside , outside(預設)
- 圖片：list-style-image:url(圖片位置);
- 集合寫法list-style: 樣式 位置 圖片;
三、變形清單（選單、相簿...等）
- 浮動：float:left , right; ←必要
- 溢出處理：overflow:visible(預設) , hidden(隱藏) , scroll(捲軸) , auto(自動)
- 滑鼠：cursor: pointer;
- 配合 border , margin , padding , text-align , vertical-align 一起用，效果更佳
- 最後記得用clear:both來清除浮動
四、段落
- 首行縮排：text-indent: 24px (亦可用%)
- 大小寫：text-transform: capitalize (首字大寫) , uppercase(全部大寫) ,lowercase(全部小寫)
- 擬元件（Pseudo-elements）建立一個抽象的網頁元件，例如「段落第一行」或者「段落第一個字」，而且也提供另一個方法來套用樣式到一個不存在的內容。（:before 及 :after）。
- (1) :first-letter 設定目標第一個字的樣式
- (2) :first-line 設定目標第一列字的樣式
- 例如：p:first-letter { font-size:20px}
五、超連結
- 文字裝飾：text-decoration: none(取消任何線), overline(頭頂線) , linethrough(刪除線) , underline(底線) , blink (閃動，僅Firefox支援)
- 擬類別（Pseudo-classes）通常是動態的，也就是和使用者的操作互動有關的的一個狀態，例如滑鼠移過（:hover）這類的狀態。
- (1) :active 滑鼠點下該元件的瞬間
- (2) :hover 滑鼠移到該元件上
- (3) :link 尚未瀏覽過的超鏈結
- (4) :visited 已經瀏覽過其內容的超鏈
- 想想看，這是怎麼做的？
