:::

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.cohttp://paletton.com/
  3. 免費影片:https://www.videvo.nethttp://www.wedistill.iohttps://videos.pexels.com http://mazwai.comhttp://www.splashbase.cohttps://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%;}
    }
    

     

 

 


:::

書籍目錄

展開 | 闔起

線上使用者

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

會員: 0

訪客: 31

更多…