2-2 基礎html5-css3-v3.0

Size: px

Start display at page:

Download "2-2 基礎html5-css3-v3.0"

添飒鄂
5 years ago
Views:

1 老田講座講師 : 田甜甜 RITA TEACHING 基礎 html5-css3 v3.0 rita.design@gmail.com ENTER

3 HTML 超文件標示語言 ( 文件內容架構 ) HTML5 是包含了 : HTML CSS 和 JavaScript 三個部分不單單只是 HTML 部分增加新標籤, CSS3 和 JavaScript 也有許多的創新, 讓整個網頁程式功能更加繽紛 CSS3 層疊樣式表 ( 外觀呈現 ) Java script 行為腳本 ( 動態效果 )

4 是最新版本的 HTML 語言 HTML5 標準, 於 2014 年才正式完成大多數瀏覽器早已開始支援 HTML5 標準結合 html+css3+javascript 三種語言設定 JavaScript 與 CSS 為預設技術 ( 可不另外宣告 ) 統一許多標準, 讓跨瀏覽器的支援度提升精簡舊版標籤, 已取消支援許多舊版元素新的語義, 並加強元件控制加入新的媒體元件與繪圖功能, 建立網站架構有更多元件可選擇許多新功能需依靠 JavaScript 才能使用可建立網路應用程式 API

5 語意化語意標籤可以讓我們自然而然的將網頁內容分割成內容外觀和行為重新認識 HTML 標籤 - 結構與語意先思考內容, 再決定標籤撰寫 HTML 時, 只需專注於內容與結構, 不用考慮外觀顯示的問題撰寫 CSS 時, 給語意標籤附加樣式, 並再次驗証是否還有可套用之語意標籤

6 HTML4&HTML5 內容結構 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!DOCTYPE html> <link rel="stylesheet" type="text/css" href=""> <script type="text/javascript"></script> <link rel="stylesheet" href=""> <script></script> <div class= header > <div class= nav > <header> <nav> <div class= article > <div class= section > <article> <div class= section > <div class= aside > <aside> <div class= footer > <footer>

7 檔頭標籤 <header> 檔頭標籤 <header> <header> 元素表示用於介紹內容或一組導航鏈接的容器一個 <header> 元素通常包含 : 一個或多個標題元素 (<h1> - <h6>) 標誌圖標作者信息 *<header> 標籤不能放置在 <footer>,<address> 或另一個 <header> 元素中 <header> <h1> 田老大工作室 </h1> </header> <header> <h2> 關於田老大工作室 </h2> </header> </section> <header> <h1> 田老大工作室 </h1> <nav> </header> <article> <header> 關於田老大工作室 </header> </section> <footer>

8 導覽標籤 <nav> 導覽標籤 <nav> 建立網頁的導覽區段, 連結其他網頁的超連結集合, 通常只有主要導覽區段會建立在 <nav> 中是以 Navigation 縮寫定義 <header> <h1> 田老大工作室 </h1> <nav> <ul> <li><a href= /news/ > 最新消息 </a></li> <li><a href= /services/ > 關於我們 </a></li> <li><a href= /about/ > 服務項目 </a></li> </ul> </nav> </header> <header> <nav> <ul> <li><a href= /news/ > 最新消息 </a></li> <li><a href= /services/ > 公司服務 </a></li> <li><a href= /about/ > 關於網站 </a></li> </ul> </nav> <article> <footer> <nav>

9 影像群組標籤 <figure> 影像群組標籤 <figure> 用來將多個影像封裝成一個群組 <header> <nav> <article> <figure> <img src= photo1.jpg > <figcaption> 相片名稱標題 </figcaption> </figure> <p> 林書豪 ( 英語 :Jeremy Shu-How Lin,1988 年 8 月 23 日 -), 生於美國加州托倫斯, 美國職業籃球隊球員, 現屬 NBA 夏洛特黃蜂, 場上位置為得分後衛與控球後衛, 擅長擋切戰術以及跑轟戰術 </p> </article> <article> <figure> <p> <footer> <img src= 1.jpg > <img src= 2.jpg > <figcaption> 相片名稱標題 </figcaption> </figure> <nav>

10 區塊元素說明 main section article 文檔的主要內容一段相關主題性的內容區段這段內容可以脫離上下文, 作為完整的獨立存在的一段內容 div 無任何語義, 僅僅用作樣式化或者腳本化的容器原則上來說, 能使用 article 的時候, 也是可以使用 section 的, 假如使用 article 更合適, 那麼就不要使用 section section 包含的內容也能算作獨立的一塊, 但是它只能算是組成整體的一部分,article 才是一個完整的整體

11 主要標籤 <main> 主要標籤 <main> 文檔的主要內容元素中的內容應該是唯一的文檔它不應該包含跨檔案的文件, 如側邊欄, 導航列, 版權宣告, 網站標誌 (logo) 和搜索表單的內容一個文件中只能有一個 <main> 元素, 不能在 <article>, <aside>, <footer>, <header>, <nav> 裡面 <main> <h1> 公司歷史 </h1> <p> 公司歷史內容 </p> </section> <h1> 經營理念 </h1> <p> 經營理念內容 </p> </section> </main> <header> <nav> <main> <article> <h1> 關於我們 </h1> <p> 關於我們內容 </p> </article> <article> <h1> 產品介紹 </h1> <p> 產品介紹內容 </p> </article> </main> <footer>

12 文章標籤 <article> 文章標籤 <article> 包含自我完整內容成份的區域, 能獨立發送重覆使用的資料它比 section 具有更明確的語義, 它代表一段脫離了整體還能作為一個完整的獨立的相關內容 <article> <h1> 公司歷史 </h1> <p> 公司歷史內容 </p> </section> <h1> 經營理念 </h1> <p> 經營理念內容 </p> </section> </article> <header> <nav> <article> <h1> 公司歷史 </h1> <p> 公司歷史內容 </p> </section> <h1> 經營理念 </h1> <p> 經營理念內容 </p> </section> </article> <footer>

13 區段標籤區段標籤用來群組一般用途的文件或應用程式, 區段相關的網頁內容, 絕不可包含不相關的內容, 常用於文章的章節標籤對話框中的標籤頁或者論文中有編號的部分例如 : 一個網站的首頁可以分成簡介最新消息和聯絡方式等多個區段 <article> <h1> 公司簡介 </h1> <p> 公司簡介內容 </p> </section> <h1> 經營理念 </h1> <p> 經營理念內容 </p> </section> </article> <header> <nav> <article> <h1> 公司歷史 </h1> <p> 公司歷史內容 </p> </section> <h1> 經營理念 </h1> <p> 經營理念內容 </p> </section> </article> <footer>

14 額外資訊標籤 <aside> 額外資訊標籤 <aside> 與 article 相關的內容片斷, 可提供額外資訊進一步補強主要內容, 非指向網站其他內頁之超連結, 如 : 說明提示引用附加註解等 <article> <h1> 林書豪簡介 </h1> <p> 林書豪 ( 英語 :Jeremy Shu-How Lin,1988 年 8 月 23 日 -), 生於美國加州托倫斯, 美國職業籃球隊球員, 現屬 NBA 夏洛特黃蜂, 場上位置為得分後衛與控球後衛, 擅長擋切戰術以及跑轟戰術 </p> </section> <aside> ^ kevin Ding. Lin is the NBA's Asian-American inspiration [ 在 NBA 成為美籍亞裔榜樣的林書豪 ]. </aside> </article> <header> <nav> <article> <aside> <footer>

15 頁腳標籤 <footer> 頁腳標籤 <footer> 作為區段內容的結束, 同一網頁中可以有多個不可用於 <header> 及 <footer> 本身 <header> <nav> <aside> <footer> <small> 老田設計版權所有 All Rights Reserved. </small> </footer> <small> 標籤 : 在 HTML5 中為輔助說明之意 <article> <article> <footer> <small> 老田設計版權所有 All Rights Reserved. </small> </footer>

16 多媒體 Audio 音樂的原生播放支援 HTML5 定義了 Audio 標籤, 可以用來撥放音樂, 這表示以後的瀏覽器便不需要外掛一些軟體就可以達到這樣的目地,Audio 標籤可以和 CSS 與 JavaScript 整合, 讓我們更容易進行操控音樂的撥放 <!DOCTYPE html> <html> <body> <audio controls="controls"> <source src="horse.ogg" type="audio/ogg">  <source src="horse.mp3" type="audio/mpeg"> 您的瀏覽器不支援 audio, 請升級您的瀏覽器 </audio> </body> </html>

17 多媒體 Video 影片的原生播放支援 HTML5 定義了 <video> 標籤, 可以用來撥放影片, 瀏覽器不需要外掛軟體就可以撥放,<video> 標籤可以和 CSS 與 JavaScript 整合, 讓我們更容易進行操控影片或音樂的撥放 <!DOCTYPE html> <html> <body> <video width="320" height="240" controls="controls" src="movie.mp4" > 您的瀏覽器不支援 video, 請升級您的瀏覽器 </video> </body> </html> poster: 指定影片影像 ( 預設影像 ) autoplay: 自動播放 loop: 是否自動循環 preload: 是否預先載入 none, auto, metadata controls: 是否顯示播放影片控制面板 width: 影片寬度 height: 影片高度 src: 影片來源 url muted 是否靜音 muted 不輸入

18 多媒體 Canvas 2D 的繪圖功能支援畫布 <canvas> <canvas> 元素能建立一個直接從瀏覽器中執行繪圖平台, 類似一個畫布本身沒有樣式, 必須使用腳本語言來繪製圖形 ( 通常是 JavaScript) 預設的畫布大小是 300px * 150px ( 寬 * 高 ) <!DOCTYPE html> <html> <body> <canvas id="mycanvas" width="200" height="100" > 您的瀏覽器不支援 canvas, 請升級您的瀏覽器 </canvas> </body> </html> <style> canvas border:1px solid #000000; </style>

19 多媒體 SVG 向量圖支援 SVG 是什麼? SVG 的優點可伸縮的向量圖形 SVG 代表 SVG 是用來定義用於 Web 的向量圖形 SVG 圖形利用 XML 格式定義 SVG 圖形縮放或調整, 不會失真在 SVG 文件中, 每一個元素或屬性都可以是動畫, SVG 是 W3C 推薦使用 SVG 比其他圖像格式 ( 如 JPEG 和 GIF) 的優勢 : 可以用任何文本編輯器創建和編輯 SVG 圖像 SVG 圖像可以被搜索, 索引, 腳本, 和壓縮 SVG 圖像具有可擴展性 SVG 圖像可以在任何平台上提供高品質的印刷 SVG 圖像是可縮放 ( 圖像可以進行放大, 縮小, 而不會降低 ) <svg xmlns=" width="50" height="50" viewbox=" " fill="#30745e"> <path d="m l z"/> </svg> *viewbox=" " (min x, min y, width, height)

21 邊框圓角 border-radius 在 CSS2 中要建立圓角是很困難的需要建立背景圖片切片或 Javascript, 才能做到但在 CSS3 中輕易就可以做到它可能是目前使用最多的 CSS3 屬性 CSS3 border-radius 屬性可以被用來創建圓角 : <!DOCTYPE html> <html> <head> <style> div border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ </style> </head> <body> <div>the border-radius</div> </body> </html>

22 邊框陰影 box-shadow CSS3 box-shadow:x y 模糊顏色 ; 屬性可以被用來製造陰影效果 : <!DOCTYPE html> <html> <head> <style> div width:300px; height:100px; background-color:yellow; -moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */ box-shadow: 10px 10px 5px #888888; </style> </head> <body> <div></div> </body> </html>

gif); background-size:100% 100%; -moz-background-size:100% 100%; /*

23 背景伸展背景圖 :background-size CSS3 background-size 屬性可以被用來製造背景圖片效果 <!DOCTYPE html> <html> <head> <style> div background:url(img_flwr.gif); background-size:100% 100%; -moz-background-size:100% 100%; /* Firefox 3.6 */ background-repeat:no-repeat; </style> </head> <body> <div></div> </body> </html>

png'); background-repeat:no-repeat; background-position:left; #div1 background-origin:border-box; <!

24 背景指定背景圖區域 :background-origin CSS3 background-origin 屬性可以被用來指定背景圖片顯示的區域位置 border-box 可指定圖片在邊框區域 content-box 可指定圖片在內容區域 <!DOCTYPE html> <html> <head> <style> div border:1px solid black; padding:35px; background-image:url('icon.png'); background-repeat:no-repeat; background-position:left; #div1 background-origin:border-box;  #div2 background-origin:content-box;  </style> </head> <body> <p>background-origin:border-box:</p> <div id="div1"></div> <p>background-origin:content-box:</p> <div id="div2"></div> </body> </html>

背景漸層背景色 :background:gradient CSS3 線性漸層 : background: linear-gradient(#fff,#000); 放射性漸層 : <!DOCTYPE html> <html> <head> <style> div border:1px solid black; padding:35px; background-image:url('icon.

25 背景漸層背景色 :background:gradient CSS3 線性漸層 : background: linear-gradient(#fff,#000); 放射性漸層 : <!DOCTYPE html> <html> <head> <style> div border:1px solid black; padding:35px; background-image:url('icon.png'); background-repeat:no-repeat; background-position:left; #div1 background: linear-gradient(#fff,#000);  #div2 background: radial-gradient(#fff,#000);  </style> </head> <body> <p>background-origin:border-box:</p> <div id="div1"></div> <p>background-origin:content-box:</p> <div id="div2"></div> </body> </html>

26 文字陰影 Text Shadow CSS3 text-shadow 屬性可以被用來製造文字陰影效果 : text-shadow: x y 模糊顏色 ; <!DOCTYPE html> <html> <head> <style> h1 text-shadow: 5px 5px 5px #FF0000; </style> </head> <body> <h1>text-shadow effect!</h1> </body> </html>

27 文字屬性可以用來指字字體樣式效果 : 有了 CSS3, 網站終於可以使用預先選定的網路安全字體注意 :Internet Explorer8 規則 <!DOCTYPE html> <html> <head> font-family: myfirstfont; src: url(' /* IE9+ */ div font-family:myfirstfont; font-size:2em; </style> </head> <body> <div> With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts. </div> </body> </html>

28 半透明 opacity CSS3 opacity 屬性可以被用來製造出半透明效果 : <html> <head> <style> div.background width:500px; height:250px; background:url(klematis.jpg) repeat; border:2px solid black; div.transbox width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ div.transbox p margin:30px 40px; font-weight:bold; color:#000000; </style> </head> <body> <div class="background"> <div class="transbox"> <p>this is some text that is placed in the transparent box.</p> </div> </div> </body> </html>

29 多欄 CSS3 column-count /* 多欄 */ column-gap /* 欄距 */ 屬性可以被用來製作出多欄果 : column-count column-gap 排版效 <!DOCTYPE html> <html> <head> <style>.newspaper -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; </style> </head> <body> <div class="newspaper"></div> </body> </html>

30 旋轉 rotate() CSS3 transform:rotate ( 角度 deg) 屬性可以被用來轉換製造出旋轉效果 : <!DOCTYPE html> <html> <head> <style> div width:100px; height:75px; background-color:red; border:1px solid black; div#div2 transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -moz-transform:rotate(30deg); /* Firefox */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ -o-transform:rotate(30deg); /* Opera */ </style> </head> <body> <div>hello. This is a DIV element.</div> <div id="div2">hello. This is a DIV element.</div> </body> </html>

div#div2 transform:rotatex(120deg); -webkit-transform:rotatex(120deg); -moz-transform:rotatex(120deg); </style>

31 鏡射 3D rotatex 3D rotatey CSS3 transform:rotatex( 角度 deg) transform:rotatey( 角度 deg) 屬性可以被用來轉換製造出鏡射效果 : <!DOCTYPE html> <html> <head> <style> div width:100px; height:75px; background-color:red; border:1px solid black; div#div2 transform:rotatex(120deg); -webkit-transform:rotatex(120deg); -moz-transform:rotatex(120deg); </style> </head> <body> <div>hello. This is a DIV element.</div> <div id="div2">hello. This is a DIV element.</div> </body> </html>

32 傾斜 skew() CSS3 transform:skew(x,y) 屬性可以被用來轉換製造出傾斜效果 : <!DOCTYPE html> <html> <head> <style> div width:100px; height:75px; background-color:red; border:1px solid black; div#div2 transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg); /* IE 9 */ -moz-transform:skew30deg,20deg); /* Firefox */ -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ -o-transform:skew(30deg,20deg); /* Opera */ </style> </head> <body> <div>hello. This is a DIV element.</div> <div id="div2">hello. This is a DIV element.</div> </body> </html>

33 轉換 transition CSS3 可以添加動畫效果, 而無需使用 Flash 動畫或 JavaScript CSS3 轉換效果, 讓元素逐漸改變你必須指定兩件事情 : 1, 指定 CSS 屬性效果 2, 指定持續時間效果 <!DOCTYPE html> <html> <head> <style> div width:115px; height:115px; background:red; transition:width 2s; -moz-transition:width 2s; -webkit-transition:width 2s; -o-transition:width 2s; div:hover /* 滑入 */ width:300px; </style> </head> <body> <div> 可將滑鼠移到上面的 div 元素, 瀏覽轉換效果 IE 瀏覽器不支援這個功能 </div> </body> </html>

34 動畫 Animations Rule 要建立 CSS3 動畫, 關鍵框架規則 Rule 指定 CSS 樣式和動畫逐步從目前的樣式改變為新的樣式 Rule 時, 一定要指定一個選項, 否則動畫不會有任何效果你必須指定兩件事情 : 1, 指定 CSS 屬性效果 2, 指定持續時間效果 <!DOCTYPE html> <html> <head> <style> div width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; -webkit-animation:myfirst 5s; -o-animation:myfirst myfirst from background:red; to myfirst from background:red; to myfirst from background:red; to myfirst from background:red; to background:yellow; </style> </head> <body> <div></div> </body> </html>

邊框新特性影像邊框 border-image CSS3 在邊框圖像屬性採用圖像和切片成九個部分, 就像一個井字棋板然後, 它會將邊角處的四角, 中間部分被反复拉伸或您指定 border-image source slice; 屬性可以被用來製造圖片邊框效果 : border-image-width 設定圖片邊框的寬度 ; border-image-outset 邊框圖片超出邊框的量 ;

35 邊框新特性影像邊框 border-image CSS3 在邊框圖像屬性採用圖像和切片成九個部分, 就像一個井字棋板然後, 它會將邊角處的四角, 中間部分被反复拉伸或您指定 border-image source slice; 屬性可以被用來製造圖片邊框效果 : border-image-width 設定圖片邊框的寬度 ; border-image-outset 邊框圖片超出邊框的量 ; border-image-repeat repeat 用重複方式填滿 ; round 可指定圖片在邊框上以圍繞的方式呈現 ; stretch 可指定圖片在邊框上以伸縮的方式呈現 <style> div border-width:15px; width:250px; padding:10px 20px; #round/* 圍繞 */ -moz-border-image:url(border.png) round; /* Firefox */ -webkit-border-image:url(border.png) round;/* Safari and Chrome */ -o-border-image:url(border.png) round; /* Opera */ border-image:url(border.png) round; /*border-image:url(border.png) 上右下左 round;*/ /*border-image:url(border.png) 上下左右 round;*/ #stretch/* 伸縮 */ -moz-border-image:url(border.png) stretch; -webkit-border-image:url(border.png) stretch; -o-border-image:url(border.png) stretch; border-image:url(border.png) stretch; </style>

36 END.

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05