線上書籍

Home

[1031]XOOPS佈景設計

一、 關於CSS
  1. Cascading Style Sheets:串接樣式表,簡稱CSS,可用來控制網頁上各元素之外觀
  2. 在<style type="text/css"></style>中,或者 .css 檔裡面使用註解,其註解符號為 /* 這裡寫CSS的註解 */
  3. 若是在<style type="text/css"></style>外面,或者 .html 檔裡面使用註解,其註解符號為 <!-- 這裡寫HTML的註解 -->
二、 CSS樣式設定的基本結構
  1. 基本概念:挑出網頁中的元素,套上指定樣式。
  2. 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」,如:「h1 {color:blue}」
  3. 若有多個,請用「;」隔開。
  4. CSS樣式屬性以及可用的值可從這裡查詢:
三、 【行內樣式】在HTML標籤中套用CSS
  1. 需靠style屬性,如:<body style="background-color:#f5f5f5;">
  2. 優先權最高,影響範圍最小(只限標籤內)。
  3. 其挑選器為該標籤,適合用在單一樣式上。
四、 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. 在單一網頁中套用CSS必須使用<style type="text/css"></style>標籤,盡可能放在<head></head>裡面,例如: <style type="text/css"> body{ background-color:#f5f5f5; } #container{ width:980px; margin:0px auto;} .keyword{color:red;text-decoration:underline;} </style>
  2. 優先權中等,影響範圍為一整頁內。
  3. 上述的body、#container、.keyword 都是挑選器
  4. 若一篇網頁中,有多個地方要套用相同樣式,可用頁內樣式。
八、 CSS的三種挑選器
  1. 標籤挑選器:即一般網頁標籤。如:p、img、body...等,只要是該標籤都會受影響。
  • (1)  樣式表:p { font-size:11pt;  line-height: 180%; text-align: justify; }
  • (2)  網頁:<p></p>
  1. ID挑選器:樣式表以「#名稱」宣告,網頁則需使用id屬性,如:
  • (1)  樣式表:#container{ width:980px; margin:0px auto;}
  • (2)  網頁:<div id="container"></div>
  1. 類別挑選器:樣式表以「.名稱」宣告,網頁則需使用class屬性,如:
  • (1)  樣式表:.keyword{color:red;text-decoration:underline;}
  • (2)  網頁:<span class="keyword"></span>
九、 版面布局
  1. 一般要設計版面前,會先大致規劃一下版面布局,也就是把畫面劃分成幾個<div>區域來設計。
  2. body通常是最底層,上面可加一個wrap層可用來做背景效果。
  3. container層用來放置網頁內容,裡面還會劃分header(檔頭標題)、nav(導覽)、main(主內容區)、footer(頁尾區)、sidebar(側邊欄)
  4. 其實這些沒有硬性規定,只是一種概念而已。
十、 區塊<div>或段落<p>常用CSS設定
  1. 尺寸:width:寬度px; height:高度px; (亦可用 80% 這樣的呈現方式)
  2. 邊框:border: 1px solid #FF0000; (粗細 框線類型 顏色)
  3. 外邊界:margin: 10px auto 20px auto(上 右 下 左)←就是順時針
  4. 內間距:padding: 30px;(上 右 下 左)
  • (1)  凡是有上右下左的屬性,都可以分開寫。例如 border、margin、padding等屬性。
  • (2)  margin-top:10px; padding-bottom:15px;
  1. 首行縮排:text-indent: 24px (亦可用%)
  2. 大小寫:text-transform: capitalize (首字大寫) , uppercase(全大寫) ,lowercase(全小寫)
  3. 擬元件(Pseudo-elements)建立一個抽象的網頁元件,例如「段落第一行」或者「段落第一個字」,而且也提供另一個方法來套用樣式到一個不存在的內容。(:before 及 :after)。
  • (1)  :first-letter 設定目標第一個字的樣式
  • (2)  :first-line 設定目標第一列字的樣式
十一、 【外部樣式】許多頁面套用相同CSS樣式
  1. 要讓多個頁面套用相同樣式,就必須把樣式表獨立出來,做成一個CSS檔,如:style.css,如: body{ background-color:#f5f5f5; } #container{ width:980px; margin:0px auto;} .keyword{color:red;}
  2. 要套用該樣式表的網頁需利用<link>標籤來呼叫引用:<link rel="stylesheet" type="text/css" href="style.css" />
  3. 優先權最低,影響範圍最大,適合用在多頁用共用同一樣式。
  4. 一個頁面可以套用好幾個css檔,若裡面有挑選器重複的,則以最後讀到的為主。
  5. 在CSS檔中,還可以用import來引入其他的CSS檔:如:@import url("block.css");
十二、 比較常用的關係挑選器
  1. #nav a(包含):<div id=”nav”>底下的所有<a>
  2. #nav>a(子層):僅<div id=”nav”>下一層的<a>
十三、 清單的相關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可以使區塊元件裡的元素垂直置中
十四、 擬類別(Pseudo-classes)
  1. 通常是動態的,也就是和使用者的操作互動有關的的一個狀態,例如滑鼠移過(:hover)這類的狀態。
  • (1)  :active 滑鼠點下該元件的瞬間
  • (2)  :hover 滑鼠移到該元件上
  • (3)  :link 尚未瀏覽過的超鏈結
  • (4)  :visited 已經瀏覽過其內容的超鏈
十五、 表格
  1. 取消隔線間隔:border-collapse: collapse;
  2. table和td或th需分別設定border。