線上書籍

Home

[1061] XOOPS佈景設計

一、 關於CSS
  1. Cascading Style Sheets：串接樣式表，簡稱CSS，可用來控制網頁上各元素之外觀
  2. 其註解符號為 /* 這裡寫CSS的註解 */
二、 CSS樣式設定的基本結構
  1. 基本概念：挑出網頁中的元素，套上指定樣式。
  2. 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」，如：「h1 {color: blue}」
  3. 若有多個宣告，請用「;」隔開。
  4. CSS樣式屬性以及可用的值可從這裡查詢： http://css.doyoe.com
  5. 套用樣式的三種方法：

    行內樣式

    內部樣式

    外部樣式

    影響範圍

    優先權

    用法

     

    最小

    單一頁中

    許多頁

    最高

     

     

    <HTML標籤 style=”CSS宣告;”>

    <style type="text/css">

    CSS宣告;

    </style>

    <link href="CSS檔.css" rel="stylesheet">
  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://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，如此就不用煩惱寬度問題（標準盒模型的寬度是「內容寬」+「內距寬」+「邊框寬」）。
  6. FireFox自47版後就拿掉3D模型顯示功能，需要的請加入Title 3D 外掛，點選 Ctrl+Shift+M即可開啟。
九、 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%;} }