Tad 教材網 - 線上書籍

:::

1-1 index.html

2-1 index.html next

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

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/42/02.pdf)

### 一、 關於CSS

1. Cascading Style Sheets：串接樣式表，簡稱CSS，可用來控制網頁上各元素之外觀
2. 其註解符號為 /\* 這裡寫CSS的註解 \*/
 
### 二、 CSS樣式設定的基本結構

1. 基本概念：挑出網頁中的元素，套上指定樣式。
2. 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」，如：「h1 {color: blue}」
3. 若有多個宣告，請用「;」隔開。
4. CSS樣式屬性以及可用的值可從這裡查詢：[ http://css.doyoe.com](http://css.doyoe.com)
5. 套用樣式的三種方法： <table border="1" bordercolor="#000000" cellpadding="4" cellspacing="0" class="table table-condensed table-striped table-bordered" width="100%"> <colgroup> <col width="28*"></col> <col width="61*"></col> <col width="90*"></col> <col width="77*"></col> </colgroup> <tbody> <tr valign="TOP"> <td> </td> <th>行內樣式
  
   </th> <th>內部樣式
  
   </th> <th>外部樣式
  
   </th> </tr> <tr valign="TOP"> <th>影響範圍
  
   </th> <td>最小
  
   </td> <td>單一頁中
  
   </td> <td>許多頁
  
   </td> </tr> <tr valign="TOP"> <th>優先權
  
   </th> <td>最高
  
   </td> <td> </td> <td> </td> </tr> <tr valign="TOP"> <th>用法
  
   </th> <td><HTML標籤 style=”CSS宣告;”>
  
   </td> <td><style type="text/css">
  
  CSS宣告;
  
  </style>
  
   </td> <td><link href="CSS檔.css" rel="stylesheet">
  
   </td> </tr> </tbody> </table>
6. 一個頁面可以同時套用好幾個css檔或設定，若裡面有挑選器重複的，則以最後讀到的為主。
7. 在CSS檔中，還可以用import來引入其他的CSS檔：如：@import url("block.css");
 
### 三、 常用工具

1. 常用圖庫：<https://pixabay.com>
2. 線上配色：<https://coolors.co>、 <http://paletton.com/>
3. 免費影片：<https://www.videvo.net>、 <http://www.wedistill.io>、 <https://videos.pexels.com>、[ http://mazwai.com](http://mazwai.com)、 <http://www.splashbase.co>、 <https://vimeo.com/groups/freehd/>、 <http://www.coverr.co/>
 
### 四、 CSS背景（background）屬性

1. 背景：<http://css.doyoe.com/properties/background/background.htm>
2. background: url('圖') || 位置 || /尺寸 || 重複 || 固定 || 圖像原點 || 裁剪區域 || 顏色; ```
  <pre class="brush:css;gutter:false;">
  body {
      background: url('bg.png') bottom right/ 50% no-repeat fixed #252a44;
  }
  ```
3. 若有第二組背景用 , 隔開即可。
4. 背景淡化（加在</body>前即可） ```
  <pre class="brush:xml;">
  <div style="
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,0.5);
      z-index: -100;">      
  </div>
  ```
 
### 五、 常用的CSS單位及顏色碼

1. 長度：<http://css.doyoe.com/values/length/index.htm>
2. 長度大小單位：%（百分比）、in（英吋）、cm（公分）、mm（公釐）、em（1em等同於目前預設字型大小）、pt（點，約1/72英吋）、px（像素）
3. 顏色碼：<http://css.doyoe.com/values/color/index.htm>
4. 顏色碼：red（顏色名稱）,#FF0000（十六進位，00~FF）,rgb(255,0,0)（十進位，0~255） ,rgba(255,0,0,0.5) （CSS3，a是透明度），transparent（透明）
 
### 六、 CSS常用的文字相關屬性

1. 字型：<http://css.doyoe.com/properties/font/index.htm>
2. font：樣式 || 大小寫 || 粗細 || 大小 || /行高 || 字型 ```
  <pre class="brush:css;gutter:false;">
  h1 {
      font: bold 10em /1.5 '微軟正黑體';
  }
  ```
3. 顏色：<http://css.doyoe.com/properties/color/index.htm>
4. 段落文字：<http://css.doyoe.com/properties/text/index.htm> ```
  <pre class="brush:css;gutter:false;">
  p {
      word-break: break-all;
      line-height: 1.8;
      text-align: justify;
  }
  ```
5. 文字裝飾：<http://css.doyoe.com/properties/text-decoration/index.htm> ```
  <pre class="brush:css;gutter:false;">
  a {
      text-decoration: none;
  }
  
  mark {
      text-decoration: underline dashed red;
      background-color: #8dbeb2;
      opacity: 0.5;
  }
  ```
 
### 七、 CSS的三種挑選器

1. 標籤挑選器：即一般網頁標籤。如：body、h1、mark、p...等，只要是該標籤都會受影響。 
  - (1) 樣式表：p {CSS屬性: 值;}
  - (2) 網頁：<p></p>
2. ID挑選器：樣式表以「#名稱」宣告，網頁則需使用id屬性，如： 
  - (1) 樣式表：#web\_title{CSS屬性: 值;}
  - (2) 網頁：<div id="web\_title"></div>
3. 類別挑選器：樣式表以「.名稱」宣告，網頁則需使用class屬性，如： 
  - (1) 樣式表：.row{CSS屬性: 值;}
  - (2) 網頁：< div class="keyword"></div>
 
### 八、 CSS常用的版面布局技巧

1. 設計版面前，會先大致規劃一下版面布局，也就是把畫面劃分成幾個<div>區域來設計。
2. container層用來放置整個網頁內容 ```
  <pre class="brush:css;gutter:false;">
  .container {
      width: 1170px;
      box-sizing: border-box;
      margin: 0px auto;
  }
  ```
3. 內間距：padding: 0px 40px;（上 右 下 左）
4. 外邊界：margin: 0px auto 20px auto（上 右 下左）←就是順時針 
  - (1) 凡是有上右下左的屬性，都可以分開寫。例如 border、margin、padding等屬性。
  - (2) margin-top:10px; padding-bottom:15px;
5. 利用box-sizing: border-box;定義盒模型為 border-box，如此就不用煩惱寬度問題（標準盒模型的寬度是「內容寬」+「內距寬」+「邊框寬」）。  
   ![](http://www.tad0616.net/uploads/tad_book3/image/42/box.gif)
6. FireFox自47版後就拿掉3D模型顯示功能，需要的請加入[Title 3D 外掛](https://addons.mozilla.org/zh-TW/firefox/addon/tilt/)，點選 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>M</kbd>即可開啟。
 
### 九、 CSS邊框設定

1. 邊框：<http://css.doyoe.com/properties/border/border.htm>
2. border: 粗細 || 框線類型 || 顏色 ```
  <pre class="brush:css;gutter:false;">
  h3 {
      border: 1px solid #8dbeb2;
      border-left-width: 10px;
      padding: 2px 20px 2px 10px;
      background-color: rgb(255, 255, 255);
      display: inline-block;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
  }
  
  header {
      padding: 1px 0px 0px;
      margin-top: 10px;
      background: rgba(255, 255, 255, .3);
      color: #000;
      text-align: center;
      border-radius: 10px;
  }
  ```
3. 顯示模式：<http://css.doyoe.com/properties/layout/display.htm>
  - (1) 每個 HTML 元素都有預設的 display 值，通常是 block「區塊」 或 inline「行內」元素
4. 文字陰影：<http://css.doyoe.com/properties/text-decoration/text-shadow.htm>
5. 圓角邊框：<http://css.doyoe.com/properties/border/border-radius.htm>
 
### 十、 比較常用的關係挑選器

1. \#nav a（包含）：<div id=”nav”>底下的所有<a>
2. \#nav>a（子層）：僅<div id=”nav”>下一層的<a>
 
### 十一、 清單列表的相關CSS樣式

1. 列表：<http://css.doyoe.com/properties/list/list-style.htm> ```
  <pre class="brush:css;gutter:false;">
  nav>ul {
      list-style: none;
      margin: 0;
      padding: 0;
      background: rgba(93, 75, 82, 0.5);
  }
  
  nav>ul>li {
      float: left;
  }
  
  nav>ul>li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
  }
  ```
2. list-style：清單類型 || 位置 || 圖片
3. float浮動，其值有left 、right、none
 
### 十二、 擬類別（Pseudo-classes）

1. 擬類別通常是動態的，也就是和使用者的操作互動有關的一個狀態： 
  - (1) :active 滑鼠點下該元件的瞬間
  - (2) :hover 滑鼠移到該元件上
  - (3) :link 尚未瀏覽過的超鏈結
  - (4) :visited 已經瀏覽過其內容的超鏈 ```
      <pre class="brush:css;gutter:false;">
      nav>ul>li a:hover {
          background: rgba(141, 190, 178, 0.9);
      }
      ```
 
### 十三、 版面布局

1. 用display:table、table-cell來模擬表格 ```
  <pre class="brush:css;gutter:false;">
  .row {
      display: table;
      background: rgba(255, 255, 255, 0.8);
  }
  
  article {
      display: table-cell;
      width: 75%;
      padding: 30px;
      vertical-align: top;
  }
  
  aside {
      display: table-cell;
      width: 25%;
      background: rgba(141, 190, 178, 0.2);
      vertical-align: top;
  }
  ```
 
### 十四、 陰影效果

1. 陰影：<http://css.doyoe.com/properties/border/box-shadow.htm>
2. box-shadow: 上位置 右位置 下位置 左位置 顏色; ```
  <pre class="brush:css;gutter:false;">
  figure {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      text-align: center;
      padding: 20px;
      background: rgba(255, 255, 255, 0.2);
  }
  ```
 
### 十五、 過渡效果

1. 過渡：<http://css.doyoe.com/properties/transition/transition.htm>
2. transition: 欲套用屬性 || 持續時間 || 動畫 || 延遲時間 ```
  <pre class="brush:css;gutter:false;">
  figure:hover {
      transition: 0.3s;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      background: rgba(255, 255, 255, 0.5);
  }
  ```
 
### 十六、 利用display:table來美化表單

1. 表單加入class=”form”，每一列用class=”form-group”包起來，輸入框用class=”form-input”包起來。 ```
  <pre class="brush:css;gutter:false;">
  .form {
      display: table;
      width:100%;
  }
  
  .form-group {
      display: table-row;
  }
  
  .form-group>label {
      display: table-cell;
      vertical-align: top;
      padding: 4px;
  }
  
  .form-input {
      display: table-cell;
      padding: 4px;
  }
  ```
2. 美化表單，多個挑選器共用同一個CSS宣告可用逗號 , 隔開：
  
   ```
  <pre class="brush:css;gutter:false;">
  .form-input>input[type="text"],
  .form-input>input[type="password"],
  .form-input>select,
  .form-input>textarea {
      width: 100%;
      font-size: 12pt;
      border-radius: 5px;
      padding: 3px;
  }
  ```
 
### 十七、 用影片作為背景

1. 先利用<video>標籤建立影片，詳情：<http://www.runoob.com/tags/tag-video.html> ```
  <pre class="brush:xml;gutter:false;">
  <video loop muted autoplay poster="Raindrops_Videvo.jpg" class="video">
      <source src="Raindrops_Videvo.mp4" type="video/mp4">
  </video>
  ```
2. 媒體請求：<http://css.doyoe.com/properties/media-queries/index.htm>
3. 將影片平鋪放大，固定於底層；當比例大於16:9時（越扁），高度放大，並往上提；當比例小於16:9時（越長），寬度放大，並往左拉 ```
  <pre class="brush:css;gutter:false;">
  .video {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -100;
  }
  
  @media (min-aspect-ratio: 16/9) {
      .video { height: 400%; top: -150%; }
  }
  
  @media (max-aspect-ratio: 16/9) {
      .video { width: 400%; left: -150%;}
  }
  ```

:::