# 上述選擇第一及最後一個的問題可改為 ( 不需再設定 class) HTML CSS3 <nav> <ul> <li><a href=#> 為什麼?</a></li> <li><a href=#> 劇情簡介 </a></li> <li><a href=#> 照片 </a></li> <li><a href=#> 影片 </a></li> <li><a href=#> 引用 </a></li> <li><a href=#> 小考 </a></li> </ul> </nav> - CSS3 的 nth 選擇器 * 假設將導航項目如下修改 <ul> <li class=internal><a href=#> 為什麼?</a></li> <li><a href=#> 劇情簡介 </a></li> <li class=internal><a href=#> 照片 </a></li> <li class=internal><a href=#> 影片 </a></li> <li class=internal><a href=#> 引用 </a></li> <li class=internal><a href=#> 小考 </a></li> </ul> * 選奇數項目 nav ul li:nth-child(odd) a { * 選偶數項目 nav ul li:nth-child(even) a { * 選 3 6 9 項目 (n 從 1 開始 ) nav ul li:nth-child(3n) a { * 選 1 4 7 項目 nav ul li:nth-child(3n-2) a { * 從最後開始反向計數, 選最後 3 個 (1 2 3) 項目 nav ul li:nth-last-child(-n+3) a { * 選 internal 類別的第 3 4 5 6 項目 nav ul li.internal:nth-of-type(n+2) a { * 選非 internal 類別的項目 nav li:first-child { margin-left: 0; nav li:last-child { margin-right: 0; 6-2
nav ul li:not(.internal) a { - 如下修改 oscar5-3.html 及 oscar5-3.css, 並另存新檔為 oscar6-1.html 及 oscar6-1.css * HTML: 修改 CSS 連結 <link rel=stylesheet href=css/oscar6-1.css> * CSS: 粗體文字, 偶數連結設為紅色, 在視域寬度小於 800px 時, 改為單欄排列 nav li a { font-weight: bold; nav ul li:nth-child(even) a { @media screen and (max-width: 800px) { div#wrapper { nav li { float: none; div#content { (2) 網頁的美學 - 網頁美化 * 過去 : 大多利用影像來完成 # 缺點 : 影像下載增加 http 請求 增加所需頻寬 ( 因此網頁載入較慢 ) 設計較無彈性且難以維護 ( 影像修改需重畫 ) 回應式設計不容易達成 * 目前 : 許多可利用 CSS3 完成 - 文字陰影 (Text shadow) * 例如右下角陰影 :text-shadow: 1px 1px 1px #cccccc; # 依序所設定的對象 : 右陰影寬度 下陰影寬度 陰影模糊度 ( 從陰影開始褪色到 6-3
無陰影的距離 ) 陰影顏色 # 陰影顏色亦可使用 RGB 或 HSL # 左上角陰影 ( 沒有模糊度 ): 左陰影寬度 上陰影寬度 陰影顏色 text-shadow: -1px -1px #cccccc; * 亦可以有多個文字陰影, 例如 : text-shadow: 0 1px #ffffff, 4px 4px 0 #dad7d7; - 背景漸層 (Background gradient) * 線性 (Linear) 背景漸層 # 語法 : background: linear-gradient(direction, color-stop1, color-stop2, ); # 由上至下 background: -moz-linear-gradient(red, blue); # 由左上至右下 background: -moz-linear-gradient(bottom right, red, blue); # 由水平 ( 由右到左 ) background: -moz-linear-gradient(180deg, red, blue); # 多個顏色 background: -moz-linear-gradient(red, green, blue); # 加入透明度 background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); # 重複線性漸層 background: -moz-repeating-linear-gradient(red, yellow, green 20%); * 輻射 (Radial) 漸層 : 以圓或橢圓形狀向外漸層 # 語法 : background: radial-gradient(center, shape size, start-color,, last-color); # 平均向外分佈 background: -moz-radial-gradient(red, green, blue); # 以比例方式向外分佈 background: -moz-radial-gradient(red 5%, green 15%, blue 60%); # 設定各種尺寸 : - closest-side : 結束顏色位置在最近的邊 - closest-corner: 結束顏色位置在最近的角 - farthest-side : 結束顏色位置在最遠的邊 - farthest-corner: 結束顏色位置在最遠的角 - cover: 同 farthest-corner - contain: 同 closest-side background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); # 重複輻射漸層 background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); * CSS 漸層產生器 - 背景漸層模式 (Background gradient pattern) * 範例 : 設定 body 的背景漸層模式 background: -moz-repeating-radial-gradient(2px 2px, ellipse, hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px, hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px); 或 6-4
background-color:white; background-image: radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, transparent 50px); background-size: 30px 30px, 90px 90px; background-position: 0 0; * CSS3 背景模式畫廊 - 練習 : 修改 oscar6-1.html 及 oscar6-1.css, 並另存新檔為 oscar6-2.html 及 oscar6-2.css * HTML: 修改 CSS 連結 <link rel=stylesheet href=css/oscar6-2.css> * CSS: # 設定 每年 字體陰影 #content h1 { font-size: 4em; text-shadow: 0.05em 0.05em 0 #dad7d7; #content h1 span { color: #757474; font-size: 0.6em; text-shadow: none; # 方框陰影 (Box shadow) * 將側欄影像加上陰影 aside img.poster { box-shadow: 0 3px 5px #222222; * 將 oscar 之 <body> 內緣加上陰影 body { box-shadow: inset 10px 10px 10px #999999, inset -10px -10px 10px #999999; # 漸層背景 ( 可能需前綴 ): 將 body, aside, 及 #content 分別加上漸層背景 body { width: 100%; padding: 0; box-shadow: inset 10px 10px 10px #999999, inset -10px -10px 10px #999999; background-image: radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px,transparent 50px); background-size: 30px 30px, 90px 90px; background-position: 0 0; aside { 6-5
background: -moz-linear-gradient(left, #888888, #ffffff); div#content { background: radial-gradient(20px 20px, circle cover, hsla(9,69%,85%,0.5) 0%, hsla(9,76%,63%,1) 50%, hsla(10,98%,46%,1) 51%, hsla(24,100%,50%,1) 75%, hsla(10,100%,39%,1) 100%); * CSS 的回應式設計 : 在不同視域可以呈現不同的漸層, 例如在 800px 視域裡加上 : @media screen and (max-width: 800px) { body { background: -moz-repeating-radial-gradient(2px 2px, ellipse, hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px, hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px); (3) 利用 CSS3 產生小圖示 - 小圖示 * 以前的作法 : 繪製小圖示的影像 * CSS3 之解決方案 : 圖示字體 (Icon font), 優點 : 可以自由的 # 放大縮小 # 改變顏色 # 加上陰影 # 改變透明度 # 旋轉 * 例如 :IcoMoon # 點選 IcoMoon App 按鈕 # 點選所需要的圖示 ( 例如 : icon-headphones, icon-music, icon-play, icon-file) Generate Font Download ( 產生 icomoon.zip) # 解壓縮 icomoon.zip 產生下列資料 : /demo-files /fonts 6-6
demo.html Read Me.txt selection.json style.css # 瀏覽並檢視 demo.html 及 style.css 的內容 # 嘗試在各圖示加上顏色並做成按鈕 : - 目錄結構 : /css glyph.css /fonts glyph.html - HTML:glyph.html <!doctype html> <html> <head> <meta charset=utf-8> <link rel=stylesheet href=css/glyph.css> </head> <body> <div class=glyph> <span class=icon-headphones></span>icon-headphones<br> </div> <div class=glyph> <span class=icon-music></span>icon-music<br> </div> <div class=glyph> <span class=icon-play></span>icon-play<br> </div> <div class=glyph> <span class=icon-film></span>icon-film<br> </div> </body> </html> - glyph.css /* From style.css */ @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon.eot?9benu1'); src:url('../fonts/icomoon.eot?#iefix9benu1') format('embeddedopentype'), url('../fonts/icomoon.ttf?9benu1') format('truetype'), url('../fonts/icomoon.woff?9benu1') format('woff'), url('../fonts/icomoon.svg?9benu1#icomoon') format('svg'); font-weight: normal; font-style: normal; [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; 6-7
font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;.icon-headphones:before { content: "\e910 ";.icon-music:before { content: "\e911 ";.icon-play:before { content: "\e912 ";.icon-film:before { content: "\e913 "; /* End from style.css */ div.glyph { margin-top: 20px; padding: 5px; width: 150px; border: 1px solid red; background-color: lightyellow; color: blue; border-radius: 5px; span.icon-headphones { color: olive; span.icon-music { color: blue; span.icon-play { color: chocolate; span.icon-film { color: green; * 使用 icon font 的優點 : # 使用者不需下載圖示影像檔 # 可隨時更改 CSS 設定, 不需重新繪製圖示 - 練習 : 修改 oscar6-2.html 及 oscar6-2.css, 並另存新檔為 oscar6-3.html 及 oscar6-3.css * HTML: 6-8
# 修改 CSS 連結 <link rel=stylesheet href=css/oscar6-3.css> # 再加 CSS 連結 <link rel=stylesheet href=css/oscarglyph.css> * CSS: 在 footer 最後加上聯絡資料 : 網址 (sphere) 電郵 (envelop) 地址 (home3), 儲存至 oscarglyph.css 6-9
6-10