20141101簡報(HTML/CSS) day 02

$44 傓䶺┮䷐崎峩⻇甒 5COO[.KP

$44 综劳⃬⃡*6/.

$44 *6/.␤倁 GNGOGPV

$44 *6/.␤倁 GNGOGPV <a herf=“http://www.pccu.edu.tw”>⽂文化⼤大學</a>

$44 *6/.␤倁 GNGOGPV <a herf=“http://www.pccu.edu.tw”>⽂文化⼤大學</a> 桬瘟㳺佅

$44 *6/.␤倁 GNGOGPV <a herf=“http://www.pccu.edu.tw”>⽂文化⼤大學</a> 桬瘟㳺佅倱㩀㳺佅

$44 *6/.␤倁 GNGOGPV <a herf=“http://www.pccu.edu.tw”>⽂文化⼤大學</a> 桬瘟㳺佅倱㩀㳺佅⽍㌈⛮䴒

$44 *6/.␤倁 GNGOGPV <a herf=“http://www.pccu.edu.tw”>⽂文化⼤大學</a> 桬瘟㳺佅倱㩀㳺佅⽍㌈⛮䴒⽍㌈⌝

$44 *6/.␤倁 GNGOGPV <a herf=“http://www.pccu.edu.tw”>⽂文化⼤大學</a> 桬瘟㳺佅 ⑈⺚倱㩀㳺佅⽍㌈⛮䴒⽍㌈⌝

$44 䵛␤倁GORV[GNGOGPVU <hr /> <br /> <img src="logo.png" />

$44 䵛␤倁GORV[GNGOGPVU <hr> <br> <img src="logo.png">

$44 *6/.㪗㲬

$44 <html> </html> <head> </head> <title> XXX </title> <body> </body>
<h1> ooo </h1> <p> ooo </p> 㳺峹䥥▀䠉⼒瓞⺚⥉苌㚰耡Ⅷ↬㢝桬瘟㳺峹❭倱㩀㳺峹ℬ┮䥥羝峫

$44 桬瘟≧給給%55

$44 $44 $BTDBEJOH4UZMF4IFFU

$44 $44 $BTDBEJOH4UZMF4IFFU ℓ碉㴄ㇰ孉!

$44 %55嵿㾶

$44 %55嵿㾶肞㞨⥉ { ! ! ! }

$44 %55嵿㾶肞㞨⥉ { ! ! ! } ⽍㌈⛮䴒: ⽍㌈⌝;
.. .. ..

$44 %55嵿㾶 .main_menu { color: red; background: blue; }

$44 %55≠䠉㢚ㇰ

$44 %55≠䠉㢚ㇰ <span style="color: red;”>我是紅字</span> 行內套用 *OMJOF

$44 %55≠䠉㢚ㇰ <style type="text/css"> span { color: red; } </style>
嵌入套用 &NCFE

$44 %55≠䠉㢚ㇰ <link rel="stylesheet" href="style.css"> 外部連結 &YUFSOBM-JOL

$44 %55≠䠉㢚ㇰ <style type="text/css"> @import url(style.css); </style> 匯入套用 *NQPSU

$44 肞㞨⥉5GNGEVQT h1 { border: 1pt p.content { line-height: 180%;
.menu { menu_list > li { border-radius: 3px; hover { color: #FFFFFF; * { font-si menu { margin: auto 0; a:hover { c .menu_list > li { border-radius: 3px; #menu { margin: auto 0; nt-size: 16px }

$44 %55肞㞨⥉ 瓴⫀肞㞨⥉ )NQDCNUGNGEVQT 㔡㧪␤倁 \^ ␤倁肞㞨⥉ 6[RGUGNGEVQTU 㗨⹻␤倁 I\^
%NCUU肞㞨⥉ %NCUUUGNGEVQTU 㗨⹻%NCUU DPOUFOU\^ IIFBEFS\^ +&肞㞨⥉ +&UGNGEVQTU 㗨⹻+& OBWJHBUJPO 劅倥肞㞨⥉ )TQWRUQHUGNGEVQTU 㗨⹻䥥㔡㧪肞㞨⥉ IFBEFS GPPUFS I\^ 䧕俜肞㞨⥉ %JKNFEQODKPCVQT 㗨⹻䧕俜⸱肞㞨 MJB\^ NFOVMJ\^ QUJNF\^ 砒⇄肞㞨⥉ &GUEGPFCPVEQODKPCVQT 㔡㧪砒⇄䥥肞㞨⥉ QB\^ DPOUFOUQ\^ 䧙聏肞㞨⥉ #FLCEGPVUKDNKPIEQODKPCVQT 㕟ⓛ䧙聏䥥␤倁 I Q\^ 資料來源：http://bit.ly/1AEwkgL

$44 ㄙ䠉%55⽍㌈ 2TQRGTVKGU

$44 ┮㥐啓 color : 顏色;

$44 綖㥐啓 background: 顏色;

$44 ㋯熝⨉%55孉䰛欰啓獑

$44 藏⻘青⾊色

$44 3(# 藏⻘青⾊色

$44 3(# )&9 藏⻘青⾊色

$44 3(# )&9 /BNF 藏⻘青⾊色

$44 3(# )&9 /BNF 耼職俦珮傁珮繷≧孉䰛藏⻘青⾊色

$44 3(# )&9 /BNF 耼職俦珮傁珮繷≧孉䰛 rgb(95, 158, 160) 藏⻘青⾊色

$44 3(# )&9 /BNF 耼職俦珮傁珮繷≧孉䰛耼職⑎∮磕䥥聜∮䮝孉䰛 rgb(95, 158, 160) 藏⻘青⾊色

$44 3(# )&9 /BNF 耼職俦珮傁珮繷≧孉䰛耼職⑎∮磕䥥聜∮䮝孉䰛 rgb(95, 158, 160) #5f9ea0
藏⻘青⾊色

䋰缧⥉㧪⋬櫱崎⹻劊䥥欰啓⛮ 藏⻘青⾊色

cadetblue 䋰缧⥉㧪⋬櫱崎⹻劊䥥欰啓⛮ 藏⻘青⾊色

$44 藏⻘青⾊色

$44 3(#" 藏⻘青⾊色

$44 3(#" 藏⻘青⾊色藏⻘青⾊色

$44 3(#" 㢑⭿耼㣯ㆇ rgb(95, 158, 160, 0.5) 藏⻘青⾊色藏⻘青⾊色

$44 3(#" 㢑⭿耼㣯ㆇ rgb(95, 158, 160, 0.5) 藏⻘青⾊色藏⻘青⾊色 "MQIB

$44 3(#" 㢑⭿耼㣯ㆇ rgb(95, 158, 160, 0.5) 藏⻘青⾊色藏⻘青⾊色 "MQIB
.panel { color: rgb(95, 158, 160); opacity:0.5 } or

$44 欰啓⚤勤傓䶺 ō JVVRYYYHNCVWKEQNQTRKEMGTEQO ō JVVREQNQWTEQFG ō JVVRUEQNQTCFQDGEQO\JETGCVGEQNQTYJGGN

$44 &'/1 範例練習：http://bit.ly/116IT4O

$44 ⸸臶Ⰸ⻰ font-size: 大小;

$44 %55⢏∮㤐獑

$44 QY

$44 QY QU

$44 QY QU FN

$44 QY QU FN QD

$44 QY QU FN QD JO

$44 QY QU FN QD JO FY

$44 QY QU FN QD JO FY DN

$44 QY QU FN QD JO FY DN NN

$44 QY QU FN QD JO FY DN NN
SFN

$44 嬭悾 line-height: 高度;

$44 嬭悾 line-height: 高度; line-height: 16px; line-height: 200%; line-height: 2em;

$44 䧮僽俒㶶 line height font size font-size: 14px; line-height: 16px;
1px 1px

$44 僕劳範例練習：http://bit.ly/1oGGSGT

$44 ⻇∽㎦⭤ 情境範例：http://bit.ly/1xgjoLu

$44 ㉩⯻┼⑆桡䥥┮䷐テ粕ㄌ㧤㊹峹䥥Ⅼ

$44 %555GNGEVQT U5RGEKHKEKV[ %55肞㞨⥉ⰸ䠉⚀┨

$44 "#$%

$44 " style屬性

$44 " style屬性 <h1 style=“color:red;”>Text</h1>

$44 " style屬性 <h1 style=“color:red;”>Text</h1> #

$44 " style屬性 <h1 style=“color:red;”>Text</h1> # ID 屬性

$44 " style屬性 <h1 style=“color:red;”>Text</h1> # ID 屬性 #header {
}

} $

} $ Class 屬性

} $ .title { } Class 屬性

} $ .title { } Class 屬性 .title:first-child

} $ .title { } Class 屬性 % .title:first-child

} $ .title { } Class 屬性 % Element Name .title:first-child

} $ .title { } Class 屬性 % h1 { } Element Name .title:first-child

$44 8*/

$44 %55ⰸ䠉㾶┨峩乸祚 IUUQTQFDJDJUZLFFHBOTU

$44 痞㩽#$%&䧙粹砒≧䥥垬㙪┮橃䥥

$44 ɓ֛ࠅৣ፯኿ኜࢁ͜ࡡۆ

$44 %55肰䠭榷竅⨉肰䠭∧≁腩⃮桬⹤

$44 CONTENT padding-top padding-bottom padding-left padding-right border-left border-right border-top border-bottom
margin-left margin-top margin-right margin-bottom width height

$44 CONTENT padding-top padding-bottom padding-left padding-right margin-left margin-top margin-right margin-bottom
width height

$44 ⯷肰䠭OCTIKP margin: 大小;

$44 ⑈悾RCFFKPI padding: 大小;

$44 margin: 10px;

$44 margin: 10px; 上右下左10px

$44 margin: 10px; 上右下左10px margin: 10px 5px;

$44 margin: 10px; 上右下左10px margin: 10px 5px; 上下10px 左右5px

$44 margin: 10px; 上右下左10px margin: 10px 5px 4px; margin: 10px
5px; 上下10px 左右5px

$44 margin: 10px; 上右下左10px margin: 10px 5px 4px; 上10px 左右5px
下4px margin: 10px 5px; 上下10px 左右5px

下4px margin: 10px 9px 8px 7px; margin: 10px 5px; 上下10px 左右5px

下4px margin: 10px 9px 8px 7px; 上10px 右9px 下8px 左7px margin: 10px 5px; 上下10px 左右5px

下4px margin: 10px 9px 8px 7px; 上10px 右9px 下8px 左7px 櫧磢曹 margin: 10px 5px; 上下10px 左右5px

$44 RCFFKPI

$44 RCFFKPI ⛭⃫

$44 㬧傻DQTFGT border: 粗細顏色樣式; 2px  0.75em red #12fa99
rgb(1,200,29) solid dashed double dotted 實線虛線雙線點點線

$44 margin- padding- border- top right bottom left

$44 ▶㔬∽ 範例練習：http://bit.ly/1tJyIJh

$44 䁏▶(NQCV

$44 䁏▶ float: 樣式; right left none

$44 ▶㔬∽ 範例練習1：http://bit.ly/1u4dWYp 範例練習2：http://bit.ly/1u4d1Hz

$44 ⻇∽㎦⭤ 情境範例：http://bit.ly/1BdPCd8

$44 (NQCV$WI䥥缷㾶解法一新增這行

$44 (NQCV$WI䥥缷㾶解法二

$44 (NQCV$WI䥥缷㾶解法三新增這行

$44 ⍞欿肞㞨⥉ ⍞␤倁肞㞨⥉

$44 ⍞欿肞㞨⥉2UGWFQENCUUGU BDUJWF 滑鼠點擊時 GPDVT 元素成為焦點時 IPWFS 滑鼠置於元素上方時 MJOL 未訪問過的連結
WJTJUFE 已訪問過的連結 pSTUDIJME 第一個元素 MBOH 當屬性 lang 為某值

$44 ⍞␤倁肞㞨⥉2UGWFQGNGOGPVU pSTUMFUUFS 元素內第一個字元 pSTUMJOF 元素內第一行 CFGPSF 元素前內容 BGUFS 元素後的內容
聆ㄙ㧤㜎搮EQPVGPV⽍㌈

$44 ▶㔬∽ 範例檔1：http://bit.ly/1u4dWYp 範例檔2：http://bit.ly/1u4ixdc

$44 歐䰛⽍㌈FKURNC[

$44 歐䰛⽍㌈ display: 狀態; block inline inline-block none ….

$44 display: block; 規定元素以區塊方式呈現

$44 display: inline; 規定元素以單行方式呈現，不能設定「width」、「height」、「background-image」 display: block; 規定元素以區塊方式呈現

display: inline-block; 規定元素以單行方式呈現，可以設定「width」、「height」、「background-image」

display: inline-block; 規定元素以單行方式呈現，可以設定「width」、「height」、「background-image」 display: none; 不顯示

$44 ▶㔬∽ 範例練習：http://bit.ly/1tKIKtB

$44 %55崜缷 ⃬崜缷㤐䎛Ⅷ恑㧕桘䥥惐

$44 單行 // 多行 /* */ 聅嬭

$44 ⻇∽㎦⭤ 情境範例：http://bit.ly/1tKOUKl

$44 ⹻∮RQUKVKQP 倶⻮⃮㤐)25⹻∮

$44 ⹻∮RQUKVKQP position: 狀態; static absolute relative ﬁxed

$44 position: static; 預設值，不受 top、bottom、left 和 right 屬性值影響

$44 position: absolute; 絕對位置，以父元素為定位 position: static; 預設值，不受 top、bottom、left 和 right
屬性值影響

屬性值影響 position: relative; 相對位置，以本身元素為定位

屬性值影響 position: relative; 相對位置，以本身元素為定位 position: fixed; 以瀏覽器畫面為定位

$44 position: static; 預設值，不受 top、bottom、left 和 right 屬性值影響

$44 position: absolute; 絕對位置，以父元素為定位

$44 FKXKVGO 䔗␤倁䎛DQF[ position: absolute; 絕對位置，以父元素為定位

$44 FKXKVGO 䔗␤倁䎛DQF[ position: absolute; 絕對位置，以父元素為定位 MFGUQY UPQQY

$44 position: relative; 相對位置，以本身元素為定位

$44 position: relative; 相對位置，以本身元素為定位 MFGUQY UPQQY

$44 position: fixed; 以瀏覽器畫面為定位

$44 MFGUQY UPQQY position: fixed; 以瀏覽器畫面為定位

$44 &'/1 範例練習：http://bit.ly/1GSgS18

$44 ⻇∽㎦⭤ 情境範例：http://bit.ly/1GSlfJr

$44 %55*CEM 肪㤐缙橃⻮

$44 ⓨ䔩

$44 㧟側㓲⇆䎛䠉 ! 䡌⹭ℬ砒⛐⇆哋▶䠀ⓛ傓䶺

$44 㧟側㓲⇆䎛䠉 ! 䡌⹭ℬ砒⛐⇆哋▶䠀ⓛ傓䶺 ⌻痋✈

$44 ⓨ䔩㕡ト䠒Ⰸ┑⻰苌㉿⃫┑⃬

$44 ⓨ䔩㕡ト ⌻峹纝畏䠉'OOGV苌㋌⚩㧪㠩

$44 ⓨ䔩㕡ト屰䡌%55䥥≠䠉 Ⅷ缷⟋ⅼ揉⇞缙≠䠉KOCIG㓷㤐EUU崎⹻

$44 ⓨ䔩㕡ト嵿㏰甙␤倁⻮㢝5'1㉩㧪ㅌ▊

$44 ⓨ䔩㕡ト畏䠉テ⑘

$44 VGORNCVGU http://sneakpeekit.com/

$44 &'/1

$44 49& 4GURQPUKXG9GD&GUKIP

$44 ⧛⹻䔩橃禵▶䔩橃

$44 ⃮㤐㺰⋬傓䶺揞肏⛩

$44 .FEJB2VFSZ

$44 49&テ⑘ • 12 種 RWD 工具 http://bit.ly/1tPTJSK • 檢視不同瀏覽器狀態
http://bit.ly/1v8EifF • SUSY http://susy.oddbird.net/

$44 ∽礱

$44 ∽礱 ō 亥≬傓䶺獌JVVRDKVN[S*ZDL ō ⃪↛⃡倥 ō 䡌ⓛYKTGHTCOGU ō ⌻ⓛRTQVQV[RGU䥥*6/.㵵礌
ō ⬒✫㲬㏔苌寞∽禵粕 ⓧ曹

20141101簡報(HTML/CSS) day 02

20141101簡報(HTML/CSS) day 02

More Decks by Sammy Lin

Other Decks in Education

Featured

Transcript