CSS 3 報告人：Sean Huang 日期：2014/11/27.

Presentation on theme: "CSS 3 報告人：Sean Huang 日期：2014/11/27."— Presentation transcript:

1 CSS 3 報告人：Sean Huang 日期：2014/11/27

2 大綱 CSS3 課程概述 CSS3 概述 CSS3 新特性 參考資料

3 課程概述 本課程需先了解基本的CSS知識 本課程以介紹CSS 3 所新增的屬性為主 課堂實作練習

4 CSS3是什麼 瀏覽器支持 瀏覽器支持度 - 哆啦A夢 CSS3 概述

5 1：CSS3是什麼 CSS3 分成了不同類別，稱為「modules」。
而每一個「modules」都有於 CSS2 中額外增加的功能 ，以及向後相容。 CSS3 早於1999年已開始制訂。 直到2011年6月7日， CSS 3 Color Module 終於發布為 W3C Recommendation。 CSS3只是表示下一代CSS，3只是版本號，css3在css2.1 版本上加入了一些新特性

6 2：瀏覽器支持 可以輸入屬性,該網站會幫你過慮是否能使用. (關鍵字 : css3 browser support 2014)
CSS3 Browser Support Reference W3C 所制作的比較列表 Can I use (關鍵字 : css3 browser support 2014)

7 3：哆啦A夢

8 CSS3 新特性 簡介 邊框 背景 漸變 文本效果 字體 2D 轉換 3D 轉換 過渡 動畫 多列 多欄佈局 用戶界面 選擇器
媒體查詢（Media Queries） CSS3 新特性

9 1：簡介 CSS3把很多以前需要使用圖片和script來實現的效果，只需要 短短幾行程式就能搞定。
CSS3 被劃分為Modules。其中最重要的包括： Selectors Box Model Backgrounds and Borders Image Values and Replaced Content Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface

10 2：邊框 通過 CSS3，能夠畫出圓角邊框，將矩形添加陰影，或使 用圖片來繪制邊框 – 而且不需使用設計軟體 border-radius
box-shadow border-image

11 2：邊框 -邊框圓角 在 CSS2 中添加圓角矩形需要技巧。必須為每個圓角使用不同的圖 片。 在 CSS3 中，繪出圓角是非常容易的。
div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ }

12 2：邊框 -邊框陰影 box-shadow 用於向方框添加陰影。 div {
box-shadow: 10px 10px 5px #888888; }

13 2：邊框 -邊框圖片 border-image 屬性，使用圖片來創建邊框。 div {
border-image:url(border.png) round; -moz-border-image:url(border.png) round; -webkit-border-image:url(border.png) round; -o-border-image:url(border.png) round; } 原始圖片

14 3：背景 - background-size 屬性規定背景圖片的尺寸。
在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，可以規定背景圖片的尺寸，這就允許我們在不同的環境中 重復使用背景圖片。 您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸，那麼尺 寸相對於父元素的寬度和高度。 div { background: url(img_flwr.gif); background-size: 80px 60px; background-repeat: no-repeat; }

15 3：背景 - background-origin
規定背景圖片的定位區域。 背景圖片可以放置於 content-box、padding-box 或 border-box 區域。

16 3：背景 -多重背景圖片 CSS3 允許您為元素使用多個背景圖像。 body {
background-image:url(img_tree.gif), url(img_flwr.gif); } =

17 4：漸變 CSS3漸變可顯示兩個或多個指定的顏色之間的平滑漸變。
在CSS3之前，必需使用圖片達成，現在使用CSS3不僅能減少下載頻 寬，更可以在元素被放大時，不會失真。 #grad1 { height: 200px; background: linear-gradient(to bottom right, red , blue); }

18 5：文本效果 CSS3 包含多個新的文本特性。 text-shadow word-wrap
text-shadow: 5px 5px 5px #FF0000; word-wrap p {word-wrap:break-word;}

19 6：字體 CSS3 @font-face 規則 在 CSS3 之前，設計師必須使用已在用戶電腦上安裝好的字體。
當找到或購買到希望使用的字體時，可將該字體文件存放到Server上，它會在需 要時被自動下載到用戶的電腦上。 Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。 Internet Explorer 9+ 規則，但是僅支持 .eot 類型的字體 (Embedded OpenType)。 <style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } </style>

20 7：2D 轉換 對元素進行移動、縮放、轉動、拉長或拉伸 使元素改變形狀、尺寸和位置的一種效果。 2D 轉換方法： translate()
rotate() scale() skew() matrix()

21 7：2D 轉換 2D 轉換方法： transform: rotate(30deg);
通過 translate() 方法，元素根據給定的 left（x 坐標） 和 top（y 坐標） 位置參 數移動 transform: translate(50px,100px); 通過 rotate() 方法，元素順時針旋轉給定的角度。負值，元素將逆時針旋轉。 transform: rotate(30deg);

22 7：2D 轉換 2D 轉換方法： transform: skew(30deg,20deg);
通過 scale() 方法，根據給定的寬度（X 軸）和高度（Y 軸）參數，元素的尺寸會 增加或減少 transform: scale(2,4); 通過 skew() 方法，根據給定的水平線（X 軸）和垂直線（Y 軸）參數翻轉角度 transform: skew(30deg,20deg);

23 7：2D 轉換 2D 轉換方法： transform: matrix(0.866,0.5,-0.5,0.866,0,0);
matrix() 方法把所有 2D 轉換方法組合在一起。 matrix() 方法需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾 斜元素。 transform: matrix(0.866,0.5,-0.5,0.866,0,0);

24 8：3D 轉換 使用 3D 轉換來對元素進行格式化。 3D 轉換方法：
rotateX() transform: rotateX(120deg) rotateY() transform: rotateY(130deg);

25 9：過渡 通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下， 當元素從一種樣式變換為另一種樣式時為元素添加效果 CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。 要實現必須規定兩項內容： 規定希望把效果添加到哪個 CSS 屬性上 規定效果的時間長度

26 9：過渡 通應用於寬度屬性的過渡效果，時長為 2 秒： 規定當鼠標指針懸浮於 <div> 元素上時： width:300px;
{ transition: width 2s; } (如果時長未規定，則不會有過渡效果，因為預設值是 0。) 規定當鼠標指針懸浮於 <div> 元素上時： div:hover width:300px;

27 10：動畫 通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片 、Flash 動畫以及 JavaScript。
@keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。 中創建動畫時，需把它捆綁到某個選擇器，否則 不會產生動畫效果。 通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器 規定動畫的名稱 規定動畫的時長

28 10：動畫 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。 使用者可以改變任意多的樣式和任意多的次數。
使用百分比來規定變化發生的時間，或用關鍵詞 “from” 和 “to”，這等同於 0% 和 100%。 0% 是動畫的開始，100% 是動畫的完成。 為了得到最佳的瀏覽器支持，應該始終定義 0% 和 100% 選擇器。

29 10：動畫 @keyframes myfirst 把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒 { } div
from {background: red;} to {background: yellow;} } 把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒 div animation: myfirst 5s;

30 11：多列 創建多個列來對文本進行布局 EX: 報紙 column-count  屬性規定元素應該被分隔的列數 色規則

31 11：多列 創建多個列來對文本進行布局 EX: 報紙 column-gap 屬性規定列之間的間隔

32 11：多列 創建多個列來對文本進行布局 EX: 報紙 column-rule 屬性設置列之間的寬度、樣式和顏色規則

33 12：用戶界面 在 CSS3 中，新的用戶界面特性包括使用者可以: resize 重設元素尺寸 (屬性規定是否可由用戶調整元素尺寸)
box-sizing 重設盒 (允許以確切的方式定義適應某個區域的具體內容) outline-offset 重設輪廓(對輪廓進行偏移，並在超出邊框邊緣的位置繪制輪廓)

34 13：選擇器 element1~element2 Selector [att^="value"] 匹配屬性包含以特定的值開頭的元素
設定一個背景顏色給所有在<p>之下的<ul> (只要parent是<p>) p ~ ul { background: #ff0000; } [att^="value"] 匹配屬性包含以特定的值開頭的元素 [att$="value"] 匹配屬性包含以特定的值結尾的元素 [att*=「value」] 匹配屬性包含含有特定的值的元素

35 13：選擇器 :checked 選擇所有<input>為checked的元素 :disabled
選擇所有<input>為disabled的元素 :empty 選擇所有不包函子元素的<p>元素(包括text節點) :enabled 選擇所有<input>為enabled的元素 :first-of-type 選擇在某個父節點之下的第一個<p>元素 :in-range 選擇有範圍選擇效果的<input>元素 :invalid 選擇所有有invalid value的<input>元素 :last-child 選擇所有在某個父節點之下的最後一個子節點元素 :last-of-type 選擇所有在某個父節點之下的最後一個子節點<p>元素

36 13：選擇器 :not(selector) 想對某個結構元素使用樣式，但是想排除這個結構元素下面的子結構元素 :nth-child(n)
直接匹配第number個元素。參數number必須為大於0的整數 :nth-last-child(n) 與上個選擇器的思想同樣，但是從後面匹配元素 :nth-last-of-type(n) 選擇所有在某個父節點之下的第二個<p>(從最後一個子節點開始數) :only-of-type 選擇在某個父節點之下的唯一<p> :only-child 選擇在某個父節點之下的唯一節點 :optional 選擇沒有"required"屬性的<input> :out-of-range 選擇輸入值超過範圍的元素

37 13：選擇器 :read-only 選擇有readonly屬性的元素 :read-write 選擇沒有readonly屬性的元素
:required 選擇有"required"屬性的<input> :root 選擇頁面的根元素 ::selection 選擇使用者所選擇的範圍的一部份 :valid 選擇所有有驗證值的<input>

38 14：媒體查詢（Media Queries） Media Queries 要在可以使用CSS3 的瀏覽器中才能作用，因此IE8 以下不支援
Media Queries 是 Responsive Web Design實作常用的方法 較佳的開發步驟： 先寫一份在你的螢幕顯示沒什麼問題的 CSS 樣式。 開始使用 Media Queries 在不同裝置上做調整。 Media Queries 有兩種使用方法 在同一個 CSS 檔案中，用 Media 來判斷使用者之螢幕寬度， 選擇載入哪一段 CSS。 在 HTML 的 載入的地方，用 media 屬性判斷使用者之裝置 / 視窗寬度，選擇載 入哪一個 CSS 檔案。 Example: w3school example

39 參考資料

40 CSS 3 新增的屬性列表 backface-visibility background-clip background-origin
background-size border-bottom-left-radius border-bottom-right-radius border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-radius border-top-left-radius border-top-right-radius box-shadow box-sizing column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns @font-face

41 CSS 3 新增的屬性列表 font-size-adjust font-stretch hanging-punctuation icon
@keyframes @media nav-down nav-index nav-left nav-right nav-up opacity perspective perspective-origin resize text-justify text-overflow text-shadow transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function word-break word-wrap

42 參考網址 http://fundesigner.net/css3-media-queries/
%E4%BB%8B%E7%B4%B9/ 42

43 參考網址 http://csswarp.eleqtriq.com/
43

44 Q&A