Tad 教材網 - 線上書籍

:::

\[1031\]XOOPS佈景設計
=================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1031/02.pdf)### 一、 關於CSS

1. Cascading Style Sheets：串接樣式表，簡稱CSS，可用來控制網頁上各元素之外觀
2. 在<style type="text/css"></style>中，或者 .css 檔裡面使用註解，其註解符號為 /\* 這裡寫CSS的註解 \*/
3. 若是在<style type="text/css"></style>外面，或者 .html 檔裡面使用註解，其註解符號為 
 
### 二、 CSS樣式設定的基本結構

1. 基本概念：挑出網頁中的元素，套上指定樣式。
2. 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」，如：「h1 {color:blue}」
3. 若有多個，請用「;」隔開。
4. CSS樣式屬性以及可用的值可從這裡查詢：
 
- (1) 英文版：<http://www.w3schools.com/cssref/>
- (2) 中文版：<http://css.doyoe.com/>
 
### 三、 【行內樣式】在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>裡面，例如： ```
  <pre class="brush:xml;">
  <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，如： ```
  <pre class="brush:xml;">
  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。

:::