CSS
長 這 樣
結 合 CSS 技 術 到 HTML 中 CSS (Cascading Style Sheet) 樣 式 表, 主 要 用 來 裝 飾 編 排 網 頁 內 容, 與 HTML 相 輔 相 成 HTML 用 來 表 示 結 構 性 的 資 料,CSS 決 定 網 頁 的 樣 式 ( 顏 色 文 字 大 小 位 置 等 等 )
為 什 麼 要 CSS HTML 的 <font> 標 籤 可 以 決 定 文 字 的 顏 色 和 大 小,<b> <i> <u> 等 標 籤 都 有 改 變 文 字 樣 式 的 能 力 在 CSS 尚 未 被 廣 泛 採 用 之 前, 這 些 HTML 標 籤 是 主 要 決 定 網 頁 樣 式 的 方 法
為 什 麼 要 CSS 隨 著 分 工 細 膩, 我 們 希 望 把 美 化 網 頁 的 工 作 和 設 計 HTML 文 件 的 工 作 獨 立 分 開 運 作 如 果 能 讓 同 樣 的 HTML 文 件, 透 過 套 用 不 同 的 樣 式 來 達 到 改 變 外 觀 的 效 果, 那 是 最 理 想 的 => CSS 可 以 做 得 到 例 如 : 部 落 格 樣 式
CSS 語 法 CSS Syntax CSS 語 法 的 基 本 構 成 是 一 個 CSS 屬 性 名 稱 搭 配 屬 性 的 內 容 寫 法 如 下 : color:red 可 以 一 次 定 義 很 多 屬 性, 中 間 用 分 號 隔 開 color:red;font-size:14px Source: W3Schools
在 HTML 中 加 入 CSS 最 簡 單 的 方 式 就 是 為 HTML 標 籤 加 上 一 個 style 屬 性 style 屬 性 的 內 容 必 須 以 CSS 語 法 撰 寫, 用 法 如 下 <div style="css 語 法 ">Hello World</div> Example <div style="color:red;font-size:14px">hello World</div>
使 用 時 機 所 有 HTML 標 籤 都 可 以 套 用 CSS 語 法,CSS 所 描 述 的 特 性 會 套 用 在 該 標 籤 的 內 文 中 <h3 style="color:red"> 這 是 寫 在 h3 標 籤 中 CSS 屬 性 的 套 用 範 圍 </h3>
font 相 關 常 用 屬 性 font-size: 字 型 大 小, 可 使 用 的 單 位 包 括 px, pt, em, % font-size:14px font-size:120% font-size:1.2em font-weight: 粗 細, 可 控 制 字 型 粗 細 font-weight:bold font-weight:normal
粗 體 與 斜 體 font-style: normal italic font-weight: normal bold 數 字
底 線 刪 除 線 大 寫 小 字 text-decoration: none underline line-through font-variant: small-caps
text 相 關 常 用 屬 性 text-decoration: 文 字 裝 飾 text-decoration:underline text-decoration:overline text-decoration:line-through text-align: 對 齊 方 式 text-align:left text-align:center text-align:right
Text-shadow: 右 位 移 下 位 移 模 糊 程 度 顏 色
font-family 如 果 字 體 在 使 用 者 的 電 腦 裡 沒 有 用 下 一 個 最 後 一 個 通 常 放 Generic font family 常 用 之 font-family
Web Font Server 提 供 字 體 給 Browser 來 抓 通 常 抓 下 來 不 能 直 接 裝 在 電 腦 上, 只 能 顯 示 Google Web Font 英 文 的 Webfont @font-face generator 上 傳 字 型 檔 後, 會 轉 檔 為 web font 並 提 供 範 例
大 小 與 行 高 font-size: 12px line-height: 1.4 font-family: Arial, sans-serif line-height: 純 數 字 ( 幾 倍 於 字 體 大 小 ) 或 數 字 px 了 解 更 多
實 機 練 習 小 試 牛 刀, 利 用 CSS 控 制 網 頁 的 文 字 大 小 和 文 字 樣 式
color 相 關 屬 性 color: 設 定 文 字 顏 色, 可 以 用 代 表 顏 色 的 英 文 字 或 是 色 碼 ( 以 # 開 頭 ) color:green color:#0000ff background-color: 設 定 區 塊 背 景 顏 色 background-color:red background-color:#008800
前 景 色 彩
背 景 色 彩
Color Table
Color Table
樣 式 選 擇 器 目 前 為 止 我 們 只 會 在 HTML 標 籤 中 加 入 style 屬 性 以 套 用 CSS 樣 式 我 們 有 更 方 便 的 選 擇 : 利 用 HTML 標 籤 的 class 屬 性 class 選 擇 器
利 用 class 選 擇 器 ( 屬 性 ) 1. 為 你 想 要 套 用 樣 式 的 標 籤 設 定 class 屬 性 <div class="title">my Homepage</div> 2. 將 CSS 文 件 透 過 一 個 特 別 的 標 籤 <style> 撰 寫 在 <head> 和 </head> 之 間 <style type="text/css"> div{color: blue;} </style>
利 用 class 選 擇 器 用. 加 上 class 屬 性 的 名 稱, 再 用 大 括 弧 包 住 CSS 語 法 括 弧 中 的 CSS 是 給 class 設 定 為 該 名 稱 的 HTML 標 籤 用 的 <style type="text/css">.title{ font-size:25px;font-weight:bold }.subtitle{font-size:20px} </style>
CSS 樣 式 規 則 與 選 擇 器 <style> 可 放 在 <head> 或 <body> 均 可
在 <head> 元 素 裡 面 嵌 入 樣 式 表
CSS Box Model 每 個 HTML 標 籤 都 代 表 一 個 方 型 的 作 用 區 塊, 我 們 稱 為 Box,CSS 對 這 個 作 用 區 塊 可 以 做 非 常 細 緻 的 控 制 以 下 先 了 解 CSS 對 於 Box 作 用 區 塊 的 設 計 和 術 語, 接 著 在 一 一 介 紹 相 關 的 屬 性
Box 與 display 屬 性 排 文 字 與 元 素 時 蓋 成 長 方 形 box
CSS Box Model margin, border, padding 圖 片 來 源 :W3C Box Model
Box Model Box Model 是 CSS 針 對 HTML 元 素 所 產 生 的 矩 形 方 塊, 由 內 容 (content) 留 白 (padding) 框 線 (border) 與 邊 界 (margin) 所 組 成, 如 下 圖
心 室 肥 大 注 意.heart 的 寬 度 與 高 度
margin 相 關 屬 性 margin: 設 定 邊 界, 可 搭 配 left, right, top, bottom 使 用 margin:5px margin-top:5px margin-left:3px margin-right:10px margin-bottom:5px
邊 界
padding 相 關 屬 性 padding: 設 定 留 白, 可 搭 配 left, right, top, bottom 使 用 padding:5px padding-top:5px padding-left:3px padding-right:10px padding-bottom:5px
留 白 屬 性
border 相 關 屬 性 border: 設 定 邊 框 此 屬 性 的 內 容 較 複 雜, 有 三 個 部 分, 邊 框 粗 細 (width) 邊 框 樣 式 (style), 邊 框 顏 色 (color) border:1px solid #ff0000 border-width:1px border-style:solid border-color:#ff0000
border-top-style border-bottom-style border-left-style border-right-style border-style border-style ( 框 線 樣 式 )
border-color ( 框 線 色 彩 ) 我 們 可 以 使 用 下 列 屬 性 指 定 HTML 元 素 的 框 線 色 彩 : border-top-color border-bottom-color border-left-color border-right-color border-color
border-width ( 框 線 寬 度 ) 我 們 可 以 使 用 下 列 屬 性 指 定 HTML 元 素 的 框 線 寬 度 : border-top-width border-bottom-width border-left-width border-right-width border-width
單 位 px : 1px = 螢 幕 上 的 像 素 高 em : 1em = 當 前 字 型 大 小 % : 父 元 素 值 的 百 分 比
小 提 醒 屬 性 中 如 果 有 關 長 度 寬 度 高 度 或 者 是 粗 細 的 資 料, 請 務 必 加 上 單 位 padding:5px 正 確,padding:5 不 正 確 某 些 瀏 覽 器 接 受 不 加 單 位, 會 預 設 為 px 但 在 Firefox 則 會 出 現 錯 誤
課 堂 練 習 請 利 用 CSS 樣 式, 搭 配 表 格, 做 出 以 下 畫 面 中 的 效 果
CSS Display 每 個 HTML 標 籤 都 會 有 一 個 顯 示 模 式, 在 CSS 中 可 用 display 屬 性 控 制, 這 個 屬 性 主 要 分 為 兩 種,block 和 inline display:block 標 籤 區 塊 會 佔 據 整 行 的 空 間 會 自 動 換 行 display:inline 標 籤 區 塊 在 行 內, 不 會 自 動 換 行
display Property <p> 的 box 呈 上 下 排 列 <em> 的 box 排 在 字 裡 行 間 和 display 有 關 預 設 display: block; <p>,<h1>~<h6>,<div> 預 設 display: inline; <em>,<strong>,<span>
CSS Display 每 個 HTML 標 籤 都 有 預 設 的 顯 示 模 式 常 見 的 如 下 預 設 block: <div> <p> <h1> ~ <h6> <table> <form> ( 自 動 換 行 ) 預 設 inline: <span> <a> <img> <b> <i> <u> ( 不 會 自 動 換 行 ) 無 論 預 設 值 是 甚 麼, 每 個 標 籤 都 可 以 透 過 CSS 強 制 修 改 成 你 想 要 的 顯 示 模 式
display 的 值
其 他 display 值 none: 連 box 都 沒 有 完 全 沒 有 容 身 之 處 table 系 列 : 當 成 table 來 排 版, 見 SPEC
border 與 outline border 會 佔 有 空 間 推 開 周 圍 元 素 ;outline 不 會
width 和 height 可 利 用 width 和 height 屬 性 設 定 標 籤 作 用 區 塊 的 寬 高 只 有 顯 示 模 式 為 block 的 標 籤 才 有 用 ( 此 規 則 為 標 準 作 法, 某 些 瀏 覽 器 允 許 顯 示 模 式 為 inline 的 標 籤 設 定 寬 高, 但 不 建 議 使 用 ) width:100px;height:200px
width height top bottom left right (Block Box 的 寬 度 與 高 度 上 下 左 右 位 移 量 )
max-width min-width max-height min-height (Block Box 的 寬 度 與 高 度 的 最 大 值 及 最 小 值 )
利 用 CSS 為 標 籤 區 塊 定 位 每 個 HTML 標 籤 都 佔 有 一 個 區 塊, 如 何 為 這 些 區 塊 排 版 呢? 最 常 見 的 就 是 按 照 HTML 文 件 中 標 籤 出 現 的 先 後 順 序 由 上 到 下 由 左 至 右 排 而 我 們 還 有 其 他 方 式
利 用 CSS 為 標 籤 區 塊 定 位 我 們 可 以 利 用 CSS 的 position 屬 性 指 定 標 籤 的 定 位 模 式 有 以 下 幾 種 定 位 模 式 可 以 選 擇 其 語 法 如 下 : static: 預 設 的 定 位 模 式 ( 由 上 到 下 由 左 到 右 ) relative: 相 對 於 預 設 的 位 置, 作 位 移 absolute: 絕 對 定 位, 直 接 指 定 標 籤 區 快 出 現 的 座 標 位 置
使 用 絕 對 定 位 將 position 設 定 為 absolute, 並 且 利 用 top, left 屬 性 指 定 座 標 位 置 position:absolute;top:50px;left:100px
使 用 絕 對 定 位 50px 100px position:absolute; top:50px; left:100px;
使 用 相 對 定 位 將 position 設 定 為 relative, 並 且 利 用 top, left 屬 性 指 定 與 原 先 位 置 的 差 距 Position:relative;top:-20px;left:60px 60px position:relative; top:-20px; left:60px; 20px
使 用 相 對 定 位
實 機 操 作 練 習 使 用 絕 對 定 位 及 相 對 定 位 功 能
z-index ( 重 疊 順 序 )
設 定 標 籤 區 塊 的 背 景 background-color: 設 定 背 景 顏 色 background-image: 設 定 背 景 圖 片 background-image:url("bg.gif"); Background-position: 設 定 背 景 圖 片 位 置, 先 設 定 上 下 對 齊 再 設 定 左 右 background-position:top left; background-position:top center; background-position:bottom left;
背 景 圖 片
設 定 標 籤 區 塊 的 背 景 background-repeat: 設 定 重 複 填 滿 模 式, 圖 片 比 區 塊 小 時, 可 以 設 定 如 何 用 現 有 的 圖 片 填 滿 區 塊 background-repeat:no-repeat background-repeat:repeat-x background-repeat:repeat-y background-repeat:repeat background-attachment: 設 定 圖 片 是 否 固 定 background-attachment:scroll / fixed
background-repeat ( 背 景 圖 片 重 複 排 列 方 式 )
background-attachment ( 背 景 圖 片 是 否 隨 內 容 捲 動 )
設 定 標 籤 區 塊 的 背 景 利 用 background 屬 性 一 次 指 定 所 有 跟 背 景 相 關 的 屬 性 background: color image repeat attachment position background:#ffffff url("bg.gif") repeat-x scroll top left;
漸 層 表 示 法 CSS 3 新 增 下 列 漸 層 表 示 法 (gradient notation): linear-gradient() : 指 定 線 性 漸 層 radial-gradient() : 指 定 放 射 狀 漸 層 repeating-linear-gradient() : 指 定 重 複 線 性 漸 層 repeating-radial-gradient() : 指 定 重 複 放 射 狀 漸 層
http://www.colorzilla.com/gradient-editor/ 課 堂 練 習 設 定 背 景 圖 片 與 漸 層 練 習 linear-gradient(to bottom, #xxxxxx 0%,#xxxxxx50%,#xxxxxx 51%,#xxxxxx 100%);
object-fit ( 配 合 Box 調 整 物 件 大 小 ) fill contain
引 入 外 部 的 CSS 樣 式 表 實 務 上, 我 們 經 常 把 CSS 的 程 式 碼 從 原 本 的 HTML 網 頁 中 分 開 獨 立 成 一 個 新 的 檔 案 使 用 <link> 這 個 標 籤, 一 般 會 放 在 <head> 標 籤 的 內 文 中, 作 法 如 下 <link rel="stylesheet" type="text/css" href="css 檔 案 的 位 址 " >
body.css 引 入 外 部 的 CSS 樣 式 表 linkcss3.html
課 堂 練 習 練 習 樣 式 選 擇 器 將 CSS 樣 式 表 分 開 引 入 外 部 的 CSS 樣 式 表
使 用 CSS 看 起 來 怪 怪 的 嗎?
Chrome DevTool Elements 頁 籤 Styles Computed Styles 根 據 selector 分 類 規 則 點 兩 下 可 修 改 根 據 CSS property 分 類, 方 便 追 蹤
特 殊 值 inherit 所 有 CSS 屬 性, 均 可 設 為 inherit 部 分 CSS 屬 性 預 設 不 會 繼 承 自 父 元 素, 明 確 指 定 inherit 才 會 繼 承
特 殊 值 inherit( 續 ) input,textarea,select,button 等 replaced element, 樣 式 不 會 自 動 inherit 自 父 元 素
總 整 理 tag,.class, #id
進 階 版 tag,.class, #id div.tall 有 tall class 之 div #target.highlight 有 lightlight class 且 ID 為 target 之 element.box.widget 同 時 有 box 和 widget 兩 個 class 之 element
多 個 Selector 套 用 相 同 樣 式 用 逗 號, 將 Selector 分 開
Descendant & Child Selector.root div :.root 的 子 孫 中 為 div 者.root>div :.root 的 孩 子 裡 為 div 者
Universal Selector *: 任 意 元 素.root *:.root 的 子 孫
Attribute Selector 中 括 號 ; [ 屬 性 運 算 子 值 ] https://developer.mozilla.org/en- US/docs/Web/CSS/Attribute_selectors
Pseudo-Class 依 狀 態 套 用 的 假 的 class 幾 乎 所 有 元 素 都 可 用 :hover a 元 素 ::link, :visited, :active 避 免 定 義 相 互 覆 蓋 的 順 序 :LoVe HAte
Pseudo-Class 老 大 :first-child 老 么 :last-child 老 N :nth-child()
Pseudo-Element 需 有 content 屬 性 ::before 像 是 一 個 span 元 素 加 在 start tag 之 後 內 容 之 前 ::after 像 是 一 個 span 元 素 加 在 end tag 之 前 內 容 之 後 亦 可 只 用 一 個 冒 號 (:before, :after)
Sibling Selector :checked : 被 勾 選 之 pseudo-class input + * 選 出 input 的 最 大 的 弟 弟 妹 妹 input ~ * 選 出 input 的 所 有 弟 弟 妹 妹
小 結 Basic Selector tag, #id,.class, [attr], * Pseudo-elements & Pseudo-classes :before, :hover Combinator A B, A>B, A+B, A~B MDN Reference
兩 個 定 義 打 架 Value 不 同 的 兩 個 定 義, 被 套 用 在 同 一 個 元 素 上 時
Source: CSS Tricks CSS Specificity Specificity:Selector 精 準 與 否 用 字 典 順 序 比 較 Specificity Specificity 相 同 的 話, 後 定 義 者 蓋 過 之 前 定 義 者
打 架 調 解 委 員 會 此 div 會 被 selector.loud 和 div 選 中 兩 CSS 定 義 內 均 設 有 color Specificity of.loud : 0,0,1,0 Specificity of div : 0,0,0,1 0,0,1,0 > 0,0,0,1 故 套 用.loud 對 color 的 定 義
Takeaway Specificty 越 小 越 好 盡 量 用 可 重 複 使 用 的 class ID 用 於 分 開 不 重 複 區 塊 Decendent / Child selector 別 太 深
小 練 習 請 將 本 範 例 中 的 css 檔 案 中 加 入 一 名 為 abc 的 id 並 將 顏 色 設 定 為 綠 色 看 其 文 字 顏 色 是 否 會 變 綠 色
Media Queries Media Queries 就 是 要 在 支 援 CSS3 的 瀏 覽 器 中 才 能 正 常 工 作 Media Queries 的 套 用 方 法 千 變 萬 化 要 套 用 在 什 麼 樣 的 裝 置 中, 都 可 以 自 己 來 定 義 http://mediaqueri.es/ http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Media Query 給 不 同 device 不 同 的 CSS 實 例 : 履 歷 Web Designer Wall 精 選
螢 幕 寬 度 max-width: Npx 就 是 width <= Npx min-width: Npx 就 是 Npx <= width