:::
1-1 index.html
2. 用CSS3美化版面
一、 關於CSS
- Cascading Style Sheets：串接樣式表，簡稱CSS，可用來控制網頁上各元素之外觀
- 其註解符號為 /* 這裡寫CSS的註解 */
二、 CSS樣式設定的基本結構
- 基本概念：挑出網頁中的元素，套上指定樣式。
- 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」，如：「h1 {color: blue}」
- 若有多個宣告，請用「;」隔開。
- CSS樣式屬性以及可用的值可從這裡查詢： http://css.doyoe.com
- 套用樣式的三種方法：
行內樣式
內部樣式
外部樣式
影響範圍
最小
單一頁中
許多頁
優先權
最高
用法
<HTML標籤 style=”CSS宣告;”>
<style type="text/css">
CSS宣告;
</style>
<link href="CSS檔.css" rel="stylesheet">
- 一個頁面可以同時套用好幾個css檔或設定，若裡面有挑選器重複的，則以最後讀到的為主。
- 在CSS檔中，還可以用import來引入其他的CSS檔：如：@import url("block.css");
三、 常用工具
- 常用圖庫：https://pixabay.com
- 線上配色：https://coolors.co、 http://paletton.com/
- 免費影片：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）屬性
- 背景：http://css.doyoe.com/properties/background/background.htm
- background: url('圖') || 位置 || /尺寸 || 重複 || 固定 || 圖像原點 || 裁剪區域 || 顏色;
body {background:url('bg.png')bottomright/50%no-repeatfixed#252a44;} - 若有第二組背景用 , 隔開即可。
- 背景淡化（加在</body>前即可）
1<divstyle="2position: fixed;3top: 0;4left: 0;5width: 100%;6height: 100%;7background-color: rgba(255,255,255,0.5);8z-index: -100;">9</div>
五、 常用的CSS單位及顏色碼
- 長度：http://css.doyoe.com/values/length/index.htm
- 長度大小單位：%（百分比）、in（英吋）、cm（公分）、mm（公釐）、em（1em等同於目前預設字型大小）、pt（點，約1/72英吋）、px（像素）
- 顏色碼：http://css.doyoe.com/values/color/index.htm
- 顏色碼：red（顏色名稱）,#FF0000（十六進位，00~FF）,rgb(255,0,0)（十進位，0~255） ,rgba(255,0,0,0.5) （CSS3，a是透明度），transparent（透明）
六、 CSS常用的文字相關屬性
- 字型：http://css.doyoe.com/properties/font/index.htm
- font：樣式 || 大小寫 || 粗細 || 大小 || /行高 || 字型
h1{font:bold10em/1.5'微軟正黑體';} - 顏色：http://css.doyoe.com/properties/color/index.htm
- 段落文字：http://css.doyoe.com/properties/text/index.htm
p {word-break: break-all;line-height:1.8;text-align:justify;} - 文字裝飾：http://css.doyoe.com/properties/text-decoration/index.htm
a {text-decoration:none;}mark {text-decoration:underlinedashedred;background-color:#8dbeb2;opacity:0.5;}
七、 CSS的三種挑選器
- 標籤挑選器：即一般網頁標籤。如：body、h1、mark、p...等，只要是該標籤都會受影響。
- (1) 樣式表：p {CSS屬性: 值;}
- (2) 網頁：<p></p>
- ID挑選器：樣式表以「#名稱」宣告，網頁則需使用id屬性，如：
- (1) 樣式表：#web_title{CSS屬性: 值;}
- (2) 網頁：<div id="web_title"></div>
- 類別挑選器：樣式表以「.名稱」宣告，網頁則需使用class屬性，如：
- (1) 樣式表：.row{CSS屬性: 值;}
- (2) 網頁：< div class="keyword"></div>
八、 CSS常用的版面布局技巧
- 設計版面前，會先大致規劃一下版面布局，也就是把畫面劃分成幾個<div>區域來設計。
- container層用來放置整個網頁內容
.container {width:1170px;box-sizing: border-box;margin:0pxauto;} - 內間距：padding: 0px 40px;（上 右 下 左）
- 外邊界：margin: 0px auto 20px auto（上 右 下左）←就是順時針
- (1) 凡是有上右下左的屬性，都可以分開寫。例如 border、margin、padding等屬性。
- (2) margin-top:10px; padding-bottom:15px;
- 利用box-sizing: border-box;定義盒模型為 border-box，如此就不用煩惱寬度問題（標準盒模型的寬度是「內容寬」+「內距寬」+「邊框寬」）。
- FireFox自47版後就拿掉3D模型顯示功能，需要的請加入Title 3D 外掛，點選 Ctrl+Shift+M即可開啟。
九、 CSS邊框設定
- 邊框：http://css.doyoe.com/properties/border/border.htm
- border: 粗細 || 框線類型 || 顏色
h3{border:1pxsolid#8dbeb2;border-left-width:10px;padding:2px20px2px10px;background-color:rgb(255,255,255);display: inline-block;text-shadow:1px1px1pxrgba(0,0,0, .3);}header {padding:1px0px0px;margin-top:10px;background: rgba(255,255,255, .3);color:#000;text-align:center;border-radius:10px;} - 顯示模式：http://css.doyoe.com/properties/layout/display.htm
- (1) 每個 HTML 元素都有預設的 display 值，通常是 block「區塊」 或 inline「行內」元素
- 文字陰影：http://css.doyoe.com/properties/text-decoration/text-shadow.htm
- 圓角邊框：http://css.doyoe.com/properties/border/border-radius.htm
十、 比較常用的關係挑選器
- #nav a（包含）：<div id=”nav”>底下的所有<a>
- #nav>a（子層）：僅<div id=”nav”>下一層的<a>
十一、 清單列表的相關CSS樣式
- 列表：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:14px16px;} - list-style：清單類型 || 位置 || 圖片
- float浮動，其值有left 、right、none
十二、 擬類別（Pseudo-classes）
- 擬類別通常是動態的，也就是和使用者的操作互動有關的一個狀態：
- (1) :active 滑鼠點下該元件的瞬間
- (2) :hover 滑鼠移到該元件上
- (3) :link 尚未瀏覽過的超鏈結
- (4) :visited 已經瀏覽過其內容的超鏈
nav>ul>li a:hover {background: rgba(141,190,178,0.9);}
十三、 版面布局
- 用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;}
十四、 陰影效果
- 陰影：http://css.doyoe.com/properties/border/box-shadow.htm
- box-shadow: 上位置 右位置 下位置 左位置 顏色;
figure {box-shadow:04px8px0rgba(0,0,0,0.2);text-align:center;padding:20px;background: rgba(255,255,255,0.2);}
十五、 過渡效果
- 過渡：http://css.doyoe.com/properties/transition/transition.htm
- transition: 欲套用屬性 || 持續時間 || 動畫 || 延遲時間
figure:hover {transition:0.3s;box-shadow:08px16px0rgba(0,0,0,0.2);background: rgba(255,255,255,0.5);}
十六、 利用display:table來美化表單
- 表單加入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;} -
美化表單，多個挑選器共用同一個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;}
十七、 用影片作為背景
- 先利用<video>標籤建立影片，詳情：http://www.runoob.com/tags/tag-video.html
<videoloop muted autoplayposter="Raindrops_Videvo.jpg"class="video"><sourcesrc="Raindrops_Videvo.mp4"type="video/mp4"></video> - 媒體請求：http://css.doyoe.com/properties/media-queries/index.htm
- 將影片平鋪放大，固定於底層；當比例大於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 區塊
快速登入
