線上書籍

Home

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 已經瀏覽過其內容的超鏈