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('圖') || 位置 || /尺寸 || 重複 || 固定 || 圖像原點 || 裁剪區域 || 顏色; ```
    
    body {
        background: url('bg.png') bottom right/ 50% no-repeat fixed #252a44;
    }
    ```
3. 若有第二組背景用 , 隔開即可。
4. 背景淡化（加在</body>前即可） ```
    
    <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：樣式 || 大小寫 || 粗細 || 大小 || /行高 || 字型 ```
    
    h1 {
        font: bold 10em /1.5 '微軟正黑體';
    }
    ```
3. 顏色：<http://css.doyoe.com/properties/color/index.htm>
4. 段落文字：<http://css.doyoe.com/properties/text/index.htm> ```
    
    p {
        word-break: break-all;
        line-height: 1.8;
        text-align: justify;
    }
    ```
5. 文字裝飾：<http://css.doyoe.com/properties/text-decoration/index.htm> ```
    
    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層用來放置整個網頁內容 ```
    
    .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: 粗細 || 框線類型 || 顏色 ```
    
    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> ```
    
    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 已經瀏覽過其內容的超鏈 ```
        
        nav>ul>li a:hover {
            background: rgba(141, 190, 178, 0.9);
        }
        ```
 
### 十三、 版面布局

1. 用display:table、table-cell來模擬表格 ```
    
    .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: 上位置 右位置 下位置 左位置 顏色; ```
    
    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: 欲套用屬性 || 持續時間 || 動畫 || 延遲時間 ```
    
    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”包起來。 ```
    
    .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宣告可用逗號 , 隔開：
    
     ```
    
    .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> ```
    
    <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時（越長），寬度放大，並往左拉 ```
    
    .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%;}
    }
    ```

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1298

快速登入

書籍目錄

展開 | 闔起

線上使用者

86人線上 (14人在瀏覽線上書籍)

會員: 0

訪客: 86

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者