Tad 教材網 - 線上書籍

:::

XOOPS 新版佈景設計
============

### 一、 CSS常用的background背景屬性

1. 背景顏色background-color: #f5f5f5; （比背景圖更底層）
2. 背景位置background-position: 水平（left, center ,right） 垂直（top, center,bottom） 或 x% y% 或 x位置 y 位置
3. 背景尺寸background-size:cover（把圖填滿到顯示區）,contain（把圖縮小到顯示區內）
4. 重複方式background-repeat: repeat（重複）, repeat-x（水平重複）, repeat-y（垂直重複）, no-repeat（不重複）
5. 背景附著background-attachment: scroll（捲動）, fixed（固定）, inherit（繼承）
6. 背景圖background-image:url(圖檔位置)
7. 集合型寫法background: color position size repeat origin clip attachment image;
 
### 二、 常用的CSS屬性值

1. 長度大小單位：%（百分比）、in（英吋）、cm（公分）、mm（公釐）、em（1em等同於目前預設字型大小）、pt（點，約1/72英吋）、px（像素）
2. 顏色碼：red（顏色名稱）,#FF0000（十六進位，00~FF）,rgb(255,0,0)（十進位，0~255） ,rgba(255,0,0,0.5) （CSS3，a是透明度），transparent（透明）
 
### 三、 CSS常用的font字型屬性及text文字屬性

1. 字型粗細font-weight:normal（正常）,bold（粗體）
2. 字型大小font-size:16px;
3. 字型font-family:微軟正黑體,"Times New Roman";（字型名稱有空白者需用引號包起來）
4. 前景顏色color: #233F69;
5. 透明度opacity:0.5;（CSS3，0.0~1.0，透明到不透明）
6. 文字裝飾text-decoration:none（無）,underline（底線）,overline（上線）,line-through（刪除線）
7. 文字陰影text-shadow:2px 2px 4px gray;（水平位置 垂直位置 模糊程度 顏色）
8. 文字對齊text-align: justify;（left、right、center）
 
### 四、 CSS框線設定

1. border: 寬度 線條類型 顏色
2. 線條類型：none（無邊 框）、hidden（隱藏邊框。IE7及以下尚不支持）、dotted（ 點狀）、dashed（虛線）、solid（實線）、double（雙線）、groove（3D凹槽）、ridge（3D凸槽）、inset（3D凹 邊）、outset（3D凸邊）
3. 亦可用border-top、border-left、border-bottom、border-right分開設定
 
### 五、 清單的相關CSS樣式

1. 樣式：list-style-type: decimal-leading-zero(補零數字) , none(不要符號)
2. 位置：list-style-position:inside , outside(預設)
3. 圖片：list-style-image:url(圖片位置);
4. 集合寫法list-style: 樣式 位置 圖片;
5. 顯示模式display:inline（行內）、block（區塊）
6. height搭配等高line-height可以使區塊元件裡的元素垂直置中
 
### 六、 表格

1. 取消隔線間隔：border-collapse: collapse;
2. table和td或th需分別設定border。
 
### 六、 擬類別（Pseudo-classes）

1. 通常是動態的，也就是和使用者的操作互動有關的的一個狀態，例如滑鼠移過（:hover）這類的狀態。
 
- (1) :active 滑鼠點下該元件的瞬間
- (2) :hover 滑鼠移到該元件上
- (3) :link 尚未瀏覽過的超鏈結
- (4) :visited 已經瀏覽過其內容的超鏈

:::