Slide 1

Slide 1 text

Jace Ju @ Sina Taiwan 基礎 CSS

Slide 2

Slide 2 text

什麼是 CSS 1

Slide 3

Slide 3 text

.COM 時代 CIO • font> 集團打造零售四合⼀一計畫　⼀一年半內同時完成⼋八⼤大系統調整 • font> IT是台灣技術創新⽕火⾞車頭　從企業營運⾓角度評選新興科技

Slide 4

Slide 4 text

Cascading Styling Sheets 瀏覽器樣式網⾴頁作者樣式使⽤用者樣式

Slide 5

Slide 5 text

CSS 概念 1994 CSS 2.0 1998 CSS 2.1 2011 W3C 正式接⼿手 1997 History of CSS CSS 1.0 1996.12 CSS 3

Slide 6

Slide 6 text

CSS 能做些什麼 2

Slide 7

Slide 7 text

⽤用以視覺化的 HTML 標籤

Text

Slide 8

Slide 8 text

CSS 樣式化

Text

p { font-family: Arial; font-size: 3em; color: red; }

Slide 9

Slide 9 text

選擇器 CSS 語法 p { font-size: 3em; color: red; }

Slide 10

Slide 10 text

用大括號來包含樣式 CSS 語法 p { font-size: 3em; color: red; }

Slide 11

Slide 11 text

屬性 CSS 語法 p { font-size: 3em; color: red; }

Slide 12

Slide 12 text

值 CSS 語法 p { font-size: 3em; color: red; }

Slide 13

Slide 13 text

分號後再加入下一組屬性 CSS 語法 p { font-size: 3em; color: red; }

Slide 14

Slide 14 text

CSS 檔案 p { font-family: Arial; font-size: 3em; color: red; }

Text

Slide 15

Slide 15 text

怎麼套⽤用 CSS 3

Slide 16

Slide 16 text

inline styling

Text

Slide 17

Slide 17 text

Style Tag p { font-family: Arial; font-size: 3em; color: red; }

Slide 18

Slide 18 text

Link Tag

Slide 19

Slide 19 text

搭配 HTML 4

Slide 20

Slide 20 text

Normal text

Some note

class

Slide 21

Slide 21 text

Normal text

Some note

class p { font-family: Arial; font-size: 3em; color: black; } p.note { color: red; } http://jsﬁddle.net/hkvBC/

Slide 22

Slide 22 text

Bad class p.big-red { font-family: Arial; font-size: 3em; color: red; }

Slide 23

Slide 23 text

Bad class p.big-red { font-family: Arial; font-size: 3em; color: blue; }

Slide 24

Slide 24 text

Bad class p.note { font-family: Arial; font-size: 3em; color: blue; }

Slide 25

Slide 25 text

Title

id http://jsﬁddle.net/hkvBC/

Slide 26

Slide 26 text

Title

id #header { height: 80px; } http://jsﬁddle.net/hkvBC/

Slide 27

Slide 27 text

CSS 排版 5

Slide 28

Slide 28 text

CIO • font> 集團打造零售四合⼀一計畫　⼀一年半內同時完成⼋八⼤大系統調整 • font> IT是台灣技術創新⽕火⾞車頭　從企業營運⾓角度評選新興科技 Table Layout

Slide 29

Slide 29 text

...

Footer

...

CSS Layout

Slide 30

Slide 30 text

CSS Layout #header { position:relative; height:80px; background-color:#FFFFFF; width:100%; display:block; overflow:auto; } #aside { width:240px; float:left; position:relative; } #main { background-color: #FFFFFF; position: relative; width:720px; float:right; } #footer { height:100px; background-color:#FFFFFF; clear:both; display:block; overflow:auto; }

Slide 31

Slide 31 text

IE must die! Problems ‧設計師必須學習 CSS 語法 ‧瀏覽器呈現不一致 ‧IE 舊版本不符合 Web 標準

Slide 32

Slide 32 text

CSS Reset ‧瀏覽器有預設樣式 ‧解法：將所有樣式去除 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, ... { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } http://meyerweb.com/eric/tools/css/reset/

Slide 33

Slide 33 text

CSS3 簡介 6

Slide 34

Slide 34 text

‧外部字體 ‧方盒模型 ‧背景 ‧多欄排版 ‧2D 漸變 ‧3D 漸變 ‧媒體偵測 ‧進階選擇器 CSS3 Modules 其他還有很多... http://www.css3.info/modules/ http://www.w3schools.com/css3/

Slide 35

Slide 35 text

-moz- /* Firefox */ -webkit- /* Safari, Chrome */ -o- /* Opera */ -ms- /* Internet Explorer */ Vendor Prefix http://css-snippets.com/browser-preﬁx/

Slide 36

Slide 36 text

.box { border: 1px solid #ccc; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } Vendor Prefix http://css-snippets.com/browser-preﬁx/

Slide 37

Slide 37 text

Graceful Degradation http://jonraasch.com/blog/graceful-degradation-with-css3 ⽀支援 CSS3 不⽀支援 CSS3

Slide 38

Slide 38 text

Examples 7

Slide 39

Slide 39 text

• CSS3 buttons • 3D CSS Cube • Image Gallery • 秋⼭山澪 http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

Slide 40

Slide 40 text

問題與討論