:::
prev1-1 index.html
2-1 index.htmlnext
[1061] XOOPS佈景設計

2. 用CSS3美化版面

一、 關於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%;}
}

     

 

 

prev1-1 index.html
2-1 index.htmlnext

友善列印 & 下載 PDF 匯出 MarkDown 格式

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Ftad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D1298%26tbsn%3D42

快速登入

Google OpenID 登入 login icon Line OpenID 登入 login icon 基隆市 OpenID 登入 login icon 新北市 OpenID 登入 login icon 新竹市 OpenID 登入 login icon 苗栗縣 OpenID 登入 login icon 彰化縣 OpenID 登入 login icon 雲林縣 OpenID 登入 login icon 嘉義縣 OpenID 登入 login icon 嘉義市 OpenID 登入 login icon 臺南市 OpenID 登入 login icon 屏東縣 OpenID 登入 login icon 澎湖縣 OpenID 登入 login icon

書籍目錄

展開 | 闔起

線上使用者

61人線上 (6人在瀏覽線上書籍)

會員: 0

訪客: 61

更多…