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)
Slide 2
Slide 2 text
虻 碘 ӥ 斉
9/9, 9/23, 9/30, 10/7 ᮷ᥝ᯿碝ӥ斉
http://goo.gl/wC5a6l
蝱獈盅牧讨螡ݦӤ薫 Clone or download
簁盅螡䢔 Download ZIP
Slide 3
Slide 3 text
Ջ 讕 ฎ C S S
http://goo.gl/wC5a6l
Slide 4
Slide 4 text
C S S
Cascading Style Sheets
አෝ聅玕翕殷牧蝱ᤈ粚ᶎ戔懯
ୌ缏ࣁ HTML ጱ奾䯤ԏӤ牧ᥝ磪螕吚ጱ HTML 奾
䯤蚤痀ݷ牐
http://goo.gl/wC5a6l
Slide 5
Slide 5 text
H T M L 膏 C S S ጱ 橕 狌
૪妿荠অጱ瞆ৼ V.S 荠অӬ妿螂蕕笷ጱ瞆ৼ
奾䯤 誇䓄 蕕笷膏蟴ᗝ
HTML CSS
http://goo.gl/wC5a6l
Slide 6
Slide 6 text
http://goo.gl/wC5a6l
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
ই ֜ ࣁ H T M L ֵ አ C S S ?
• ଉአጱӣ㮆ොୗ׀眅ֵአ
• ᤈ獉䰬ୗ - ࣁ HTML ጱ秂壆ӤےӤ style 痀
• ֵአ 秂壆 - 㪔疥 CSS 承ဩ䌃ࣁ <style> 秂壆
愊ᶎ
• ֵአ <link> 秂壆 - ڥአ link 秂壆ጱ href 痀牧瞲ਧ
ᥝ蝫奾ጱ css 䲆礯᪠䕩
http://goo.gl/wC5a6l
Slide 9
Slide 9 text
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
匍 ࣁ ౯ 㮉 䨝 ԧ ӣ 㮆 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
Slide 16
Slide 16 text
አ C S S 瞲 ਧ 氅 ᜋ
ѼFF0000
rgb
rgba(255,255,255,0.5);
hsla(0, 0%, 100%, 0.5)
瞲ਧ氅ᜋݷ圸
Slide 17
Slide 17 text
ଉ አ ጱ C S S ጱ 㻌 ֖
㻌 ֖ ݷ 圸 藯 ก
p x 蓦 癷 向 ᔰ 憙 傶 1 ጱ 㻌 ֖
% 犥 ጯ 獤 穉 戔 ਧ 穉 ֺ
e m Ӟ 㮆 य़ 䌃 ਁ ྮ ̿ M ̀ ಅ 㬟 磪 ጱ 疝 ଶ
http://jas9.blogspot.com/2011/09/pxemrem.html
Slide 18
Slide 18 text
( 2 ) 疥 承 ဩ 䌃 ࣁ S T Y L E 秂 壆 愊 ᶎ
• 樄珸 inline.html
皤媲㴄ጱ娞聜牧
疥 CSS inline (ᤈ獉䰬ୗ) 砆ک style 秂壆愊牐
Slide 19
Slide 19 text
( 3 ) ֵ አ L I N K 秂 壆 疥 C S S 䲆 礯 螠 獈
• 樄珸 inline.html
• 碝ीӞ㮆 my_style.css 䲆礯ࣁ w2 ፓ袅ӥ
Slide 20
Slide 20 text
( 3 ) ֵ አ L I N K 秂 壆 疥 C S S 䲆 礯 螠 獈
疥 (2) 䌃ࣁ style 秂壆愊ᶎጱ獉砆ک my_style.css
Slide 21
Slide 21 text
( 3 ) ֵ አ L I N K 秂 壆 疥 C S S 䲆 礯 螠 獈
ࣁ inline.html ےӤ link 秂壆牧㪔䌃蝫ک my_style.css
Slide 22
Slide 22 text
愆 :
ڥ አ 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";
Slide 23
Slide 23 text
ݱ 圵 螡 䢔 瑊
Slide 24
Slide 24 text
觊獨螡䢔瑊 (瞲ਧ 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 ฎ殷ᶎӾࠔӞጱݷ圸牧犋ݢ犥᯿蕦
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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 ᤩ 讨 ೲ 碻
Slide 27
Slide 27 text
L A B
Slide 28
Slide 28 text
毆 ๗ ౮ ຎ
Slide 29
Slide 29 text
藶 眸 眸 疥 犥 ӥ C S S 獉 䌃 ک U S E R C A R D . C S S
Step1
ྯਠ౮Ӟ㮆 step 碻牧ਂ䲆牧㪔薪疗翕殷ጱ虋玕牐
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
Slide 37
Slide 37 text
H O M E W O R K
Slide 38
Slide 38 text
H O M E W O R K - 1
ತӞ犚֦మ蕣֢ጱੜزկ牧犥 HTML, CSS 蕣֢ڊ㬵
ই: ted.com 翕ᒊӤጱܜ粙
䰬ୗ
Slide 39
Slide 39 text
Twitter ጱ header
Slide 40
Slide 40 text
H O M E W O R K - 2
፡茐瑽粙牧᯿碝አᛔ૩ጱොୗ䌃Ӟ稞 lab ጱ瑽粙ጱ HTML/CSS
疝ṛ穉ֺ牧犋. ᛔ૪ࡅ稭ܨݢ
Slide 41
Slide 41 text
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 硳ຎጱॺկ