HTML/CSS 前端基礎講座-2

Transcript

1. H T M L / C S S 獮 ᒒ च 器 拻 ଷ - 2 W W C O D E TA I P E I F E S T U D Y G R O U P Friday, September 23, 2016
 Syntrend 11F
 
 Win.Wu (yiyingwu.1990{{at}}gmail.com)
2. 虻 碘 ӥ 斉 9/9, 9/23, 9/30, 10/7 ᮷ᥝ᯿碝ӥ斉 http://goo.gl/wC5a6l 蝱獈盅牧讨螡ݦӤ薫 Clone or download
 簁盅螡䢔 Download ZIP
3. Ջ 讕 ฎ C S S http://goo.gl/wC5a6l
4. C S S Cascading Style Sheets አෝ聅玕翕殷牧蝱ᤈ粚ᶎ戔懯 ୌ缏ࣁ HTML ጱ奾䯤ԏӤ牧ᥝ磪螕吚ጱ HTML 奾 䯤蚤痀௔޸ݷ牐 http://goo.gl/wC5a6l
5. H T M L 膏 C S S ጱ 橕 狌 ૪妿荠অጱ瞆ৼ V.S 荠অӬ妿螂蕕笷ጱ瞆ৼ 奾䯤 誇䓄 蕕笷膏蟴ᗝ HTML CSS http://goo.gl/wC5a6l
6. http://goo.gl/wC5a6l
8. ই ֜ ࣁ H T M L ֵ አ C S S ? • ଉአጱӣ㮆ොୗ׀眅ֵአ • ᤈ獉䰬ୗ - ࣁ HTML ጱ秂壆ӤےӤ style 痀௔ • ֵአ <style> 秂壆 - 㪔疥 CSS 承ဩ䌃ࣁ <style> 秂壆 愊ᶎ • ֵአ <link> 秂壆 - ڥአ link 秂壆ጱ href 痀௔牧瞲ਧ ᥝ蝫奾ጱ css 䲆礯᪠䕩 http://goo.gl/wC5a6l
9. C S S ጱ 䌃 ဩ S E L E C T O R h1 { color: #fff } { } C S S 痀 ௔ 痀 ௔ ጱ 独 : Example: .green-block { background: #fff } selector 蔭纈螡䢔瑊牧ݢ犥ฎ HTML 秂壆ݷ圸牧朼䌘礓㮆 class ౲ฎ id 痀௔缛缛牐 (蝡䰬ਧ嬝螭犋䄪羊伛牧ݝฎय़禊ጱአဩ) http://goo.gl/wC5a6l
10. ( 1 ) ֵ አ ᤈ 獉 䰬 ୗ • 樄珸 inline.html inline ጱ䰬ୗ蔭纈ֵአ HTML 秂壆ጱ style 痀௔
 磦扗秂壆ےӤ CSS 䰬ୗ牐 <HTML秂壆 style=“CSS 痀௔: 独”> ֦犖ݢ犥ےӤग़奲 CSS 戔ਧ: (ֵአ ; 獤ᵍ) <HTML秂壆 style=“CSS 痀௔: 独; CSS 痀௔: 独”> http://goo.gl/wC5a6l
11. ( 1 ) ֵ አ ᤈ 獉 䰬 ୗ • 樄珸 inline.html 藶磦 body 秂壆ےӤ CSS 痀௔: 胙วᜋ background-color Ӭ独傶 #000080 ౲ฎ navy, red, orange. http://goo.gl/wC5a6l
12. ( 1 ) ֵ አ ᤈ 獉 䰬 ୗ • 樄珸 inline.html 藶磦 h1 秂壆ےӤ CSS 痀௔: ෈ਁ氅ᜋ color Ӭ独傶 #FFFFFF ౲ฎ white. http://goo.gl/wC5a6l
13. ( 1 ) ֵ አ ᤈ 獉 䰬 ୗ • 樄珸 inline.html ٚ磦 h1 秂壆ےӤ CSS 痀௔: ෈ਁय़ੜ font-size Ӭ独傶 24px http://goo.gl/wC5a6l
14. http://goo.gl/wC5a6l
15. 匍 ࣁ ౯ 㮉 䨝 ԧ ӣ 㮆 C S S 痀 ௔ b a c k g ro u n d - c o l o r f o n t - s i z e c o l o r
16. አ C S S 瞲 ਧ 氅 ᜋ ѼFF0000 rgb rgba(255,255,255,0.5); hsla(0, 0%, 100%, 0.5) 瞲ਧ氅ᜋݷ圸
17. ଉ አ ጱ C S S ጱ 㻌 ֖ 㻌 ֖ ݷ 圸 藯 ก p x 蓦 癷 向 ᔰ 憙 傶 1 ጱ 㻌 ֖ % 犥 ጯ 獤 穉 戔 ਧ 穉 ֺ e m Ӟ 㮆 य़ 䌃 ਁ ྮ ̿ M ̀ ಅ 㬟 磪 ጱ 疝 ଶ http://jas9.blogspot.com/2011/09/pxemrem.html
18. ( 2 ) 疥 承 ဩ 䌃 ࣁ S T Y L E 秂 壆 愊 ᶎ • 樄珸 inline.html 皤媲㴄಍ጱ娞聜牧 疥 CSS inline (ᤈ獉䰬ୗ) 砆ک style 秂壆愊牐
19. ( 3 ) ֵ አ L I N K 秂 壆 疥 C S S 䲆 礯 螠 獈 • 樄珸 inline.html • 碝ीӞ㮆 my_style.css 䲆礯ࣁ w2 ፓ袅ӥ
20. ( 3 ) ֵ አ L I N K 秂 壆 疥 C S S 䲆 礯 螠 獈 疥 (2) 䌃ࣁ style 秂壆愊ᶎጱ獉਻砆ک my_style.css
21. ( 3 ) ֵ አ L I N K 秂 壆 疥 C S S 䲆 礯 螠 獈 ࣁ inline.html ےӤ link 秂壆牧㪔䌃蝫ک my_style.css <link rel="stylesheet" href=“my_style.css”>
22. 愆 : ڥ አ C S S ጱ @ I M P O R T ࣁ C S S 愊 ᶎ 㶓 獈 ٌ ਙ ጱ C S S 䲆 礯 a l l . c s s i n d e x . h t m l a b o u t . c s s c o n t a c t . c s s p ro d u c t . c s s @import @import "about.css"; @import "contact.css"; @import "product.css";
23. ݱ 圵 螡 䢔 瑊
24. 觊獨螡䢔瑊 (瞲ਧ HTML 秂壆) < h 1 > ӣ 獺 瑼 玟 < / h 1 > h 1 { b a c k g ro u n d - c o l o r : t a n } < h 1 i d = “ b r a n d ” > ӣ 獺 瑼 玟 < / h 1 > # b r a n d { b a c k g ro u n d - c o l o r : t a n } ID螡䢔瑊 Class 螡䢔瑊 < h 1 c l a s s = “ b r a n d ” > ӣ 獺 瑼 玟 < / h 1 > . b r a n d { b a c k g ro u n d - c o l o r : t a n } id ฎ殷ᶎӾࠔӞጱݷ圸牧犋ݢ犥᯿蕦
25. C S S 娞 聜 2 - ڥ አ C L A S S 樄珸 buttons.html 藶傶種殷 html 斉獈 assets/css/button.css 䲆礯 㪔戔懯.btn-fb, .btn-twitter, .btn-register 䰬ୗ http://www.color-hex.com/color-palette/185 http://www.color-hex.com/color-palette/1160
26. C S S 娞 聜 2 - ڥ አ C L A S S 傶ಅ磪ጱ a 蝫奾ےӤ蒅硈觊獨 : v i s i t e d ้ 妿 蝫 螂 ጱ 蝫 奾 : h o v e r 笅 诊 ᑏ 獈 碻 : a c t i v e ᤩ 讨 ೲ 碻
27. L A B
28. 毆 ๗ ౮ ຎ
29. 藶 眸 眸 疥 犥 ӥ C S S 獉 ਻ 䌃 ک U S E R C A R D . C S S Step1 ྯਠ౮Ӟ㮆 step 碻牧ਂ䲆牧㪔薪疗翕殷ጱ虋玕牐
30. Step2 ྯਠ౮Ӟ㮆 step 碻牧ਂ䲆牧㪔薪疗翕殷ጱ虋玕牐 翕࣎ฎ : https://images.unsplash.com/photo-1430353602645-76d3731b8eeb? dpr=2&auto=format&crop=entropy&fit=crop&w=767&h=511&q=80&cs=tinysrgb
31. Step3 ྯਠ౮Ӟ㮆 step 碻牧ਂ䲆牧㪔薪疗翕殷ጱ虋玕牐
32. Step4 ྯਠ౮Ӟ㮆 step 碻牧ਂ䲆牧㪔薪疗翕殷ጱ虋玕牐
33. Step5 ྯਠ౮Ӟ㮆 step 碻牧ਂ䲆牧㪔薪疗翕殷ጱ虋玕牐
34. Step6 ྯਠ౮Ӟ㮆 step 碻牧ਂ䲆牧㪔薪疗翕殷ጱ虋玕牐
35. Step7 ྯਠ౮Ӟ㮆 step 碻牧ਂ䲆牧㪔薪疗翕殷ጱ虋玕牐 https://jsbin.com/qotisabisu/1/edit?html,css
36. B O X M O D E L B O X S I Z I N G http://www.w3schools.com/css/css3_box-sizing.asp http://www.w3schools.com/css/css_boxmodel.asp
37. H O M E W O R K
38. H O M E W O R K - 1 ತӞ犚֦మ蕣֢ጱੜزկ牧犥 HTML, CSS 蕣֢ڊ㬵 ই: ted.com 翕ᒊӤጱܜ粙
 䰬ୗ
39. Twitter ጱ header
40. H O M E W O R K - 2 ፡茐瑽粙牧᯿碝አᛔ૩ጱොୗ䌃Ӟ稞 lab ጱ瑽粙ጱ HTML/CSS
 疝ṛ穉ֺ牧犋೔. ᛔ૪ࡅ稭ܨݢ
41. S O U R C E ! • http://www.w3schools.com/cssref/css_selectors.asp • http://zh-tw.learnlayout.com/no-layout.html • https://flukeout.github.io/ • https://addons.mozilla.org/zh-tw/firefox/addon/tilt/ Firefox ፡ 3D 硳ຎጱॺկ
42. 䨗 罕 വ 萃 • HTML5‧CSS3 磧䔶瑽薹䋿䜗拻ଷ • HTML5物The Missing Manual 㾴褬Ӿ෈粚 (ᒫԫ粚) (蝡 ๜䨗磪舣෈粚) • CSS物The Missing Manual㾴褬Ӿ෈粚 ᒫࢥ粚 (蝡๜䨗 犖磪舣෈粚) • 窼獈亮ڊHTML&CSS(ᒫԫ粚)
43. T H A N K Y O U !