XOOPS輕鬆架 - 線上書籍

:::

XOOPS 研習講義
==========

### 一、相關資源：

1. CSS手冊：<http://css.doyoe.com/>
2. 線上顏色挑選工具：<https://www.webpagefx.com/web-design/color-picker/>
 
### 二、常用技巧：

1. 文字顏色： 
    ```css
    color: #ffaa00;
    ```
    
    文字顏色
2. 文字字型： 
    ```css
    font-family: 標楷體;
    ```
    
    文字顏色
3. 文字大小： 
    ```css
    font-size: 22px;
    ```
    
    文字大小
4. 文字加陰影：（陰影右移距離、陰影下移距離、陰影模糊的程度、邊框顏色） 
    ```css
    text-shadow: 2px 2px 3px #0d4e5c,
    ```
    
    文字加陰影
5. 文字加外框：簡單講，就是替文字的八個方向都加上文字陰影而已。 
    ```css
    text-shadow: 0px 1px #0d4e5c, 1px 0px #0d4e5c, -1px 0px #0d4e5c, 0px -1px #0d4e5c, -1px -1px #0d4e5c, 1px 1px #0d4e5c, 1px -1px #0d4e5c, -1px 1px #0d4e5c;
    ```
    
    文字加外框
6. 邊框（粗細、線條類型、顏色）： 
    ```css
    border: 1px solid blue;
    ```
    
    <div style="border: 1px solid blue;">邊框</div>
7. 內距（上、右、下、左）： 
    ```css
    padding: 6px;
    ```
    
    <div style="border: 1px solid blue;padding: 6px;">邊框</div>
8. 圓角外框： 
    ```css
    border-radius: 5px;
    ```
    
    <div style="border: 1px solid blue;padding: 6px;border-radius: 5px;">圓角外框</div>
9. 背景顏色 
    ```css
    background: #bfddef;
    ```
    
    <div style="border: 1px solid blue;padding: 6px;border-radius: 5px;background: #bfddef;">背景顏色</div>
10. 漸層顏色 
    ```css
    background: linear-gradient(#bfddef , #2783e5);
    ```
    
    <div style="border: 1px solid blue;padding: 6px;border-radius: 5px;background: linear-gradient(#bfddef , #2783e5);">漸層顏色</div>
11. 背景圖 
    ```css
    background: url('https://圖檔位置');
    ```
    
    <div style="border: 1px solid blue;padding: 6px;border-radius: 5px;background: url('https://campus-xoops.tn.edu.tw/uploads/tad_themes/school2015/bg/retina_wood-300x300.png');">背景圖</div>
12. 外框陰影 
    ```css
    box-shadow: 2px 2px 4px black;
    ```
    
    <div style="border: 1px solid blue;padding: 6px;border-radius: 5px;background: url('https://campus-xoops.tn.edu.tw/uploads/tad_themes/school2015/bg/retina_wood-300x300.png');box-shadow: 2px 2px 4px black;">外框陰影</div>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1499

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器