CSS 入門 - Web 前端程式開發實務

Copyright © 2012 FITPI. All rights reserved. ∄ൔᆭૅ$44 1 భ؊۽ӱῘứℯ↩⇪‣
ᾣ℩ğᾠקდKPTFQIK

Copyright © 2012 FITPI. All rights reserved. ྛᾇ$44 3 ᆰࢤᄝṌ⚓⤨൐ႨTUZMFℾྟ
Inline CSS

Copyright © 2012 FITPI. All rights reserved. ྛᾇ$44 3 ᆰࢤᄝṌ⚓⤨൐ႨTUZMFℾྟ
<p style="屬性名稱:屬性值;">...</p> Inline CSS

Copyright © 2012 FITPI. All rights reserved. ళೆൔ$44 4 ᆰࢤᾞ$44⇔ᄝ)5.-⤨֥ቔم
Embedded CSS

TUZMFTUZMFṌ⚓ Embedded CSS

Copyright © 2012 FITPI. All rights reserved. ຓ҆$44 5 ႄႨຓ҆$44ẵσčࡹ∗ڸẵ଀㬪DTTĎ
External CSS

MJOLṌ⚓ ↥᾵ແ External CSS

Copyright © 2012 FITPI. All rights reserved. ἐႨଧ၂⊕Ĥ 6 99%
的情況都應該使⽤用外部 CSS

Copyright © 2012 FITPI. All rights reserved. ἐႨଧ၂⊕Ĥ 6 ๏
∽ၩğ∄ൔ∻᾵ἧିⴺṼָٳ b 99% 的情況都應該使⽤用外部 CSS

∽ၩğ∄ൔ∻᾵ἧିⴺṼָٳ b ๏ ིੱğ⇔၂ՑॖၛสႨ֞؟ἠ↌∉ᇏb 99% 的情況都應該使⽤用外部 CSS

∽ၩğ∄ൔ∻᾵ἧିⴺṼָٳ b ๏ ིੱğ⇔၂ՑॖၛสႨ֞؟ἠ↌∉ᇏb ๏ ིିğຓ҆ẵσିФॹ౼ DBDIF b 99% 的情況都應該使⽤用外部 CSS

∽ၩğ∄ൔ∻᾵ἧିⴺṼָٳ b ๏ ིੱğ⇔၂ՑॖၛสႨ֞؟ἠ↌∉ᇏb ๏ ིିğຓ҆ẵσିФॹ౼ DBDIF b ๏ ື၂২ຓğ὜Ф℟㬪൮∉֥ೆ१↌ᅟb 99% 的情況都應該使⽤用外部 CSS

∽ၩğ∄ൔ∻᾵ἧିⴺṼָٳ b ๏ ིੱğ⇔၂ՑॖၛสႨ֞؟ἠ↌∉ᇏb ๏ ིିğຓ҆ẵσିФॹ౼ DBDIF b ๏ ື၂২ຓğ὜Ф℟㬪൮∉֥ೆ१↌ᅟb ❖ ∉⅂ഒa۷ॹ↾ൕb 99% 的情況都應該使⽤用外部 CSS

∽ၩğ∄ൔ∻᾵ἧିⴺṼָٳ b ๏ ིੱğ⇔၂ՑॖၛสႨ֞؟ἠ↌∉ᇏb ๏ ིିğຓ҆ẵσିФॹ౼ DBDIF b ๏ ື၂২ຓğ὜Ф℟㬪൮∉֥ೆ१↌ᅟb ❖ ∉⅂ഒa۷ॹ↾ൕb 99% 的情況都應該使⽤用外部 CSS http://developer.yahoo.com/performance/rules.html#external

Copyright © 2012 FITPI. All rights reserved. ӈႨ⇢≢ఖ 7 ᄝ)5.-ᇏaॖ⊀Ớ෮Ⴕ֥Ṍ⚓℟קJE∻DMBTTℾྟđ
ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div>

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p {

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ }

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav {

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ }

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ } .bd {

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ } .bd { /* 針對所有 class=”bd” 設定樣式 */

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ } .bd { /* 針對所有 class=”bd” 設定樣式 */ }

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ } .bd { /* 針對所有 class=”bd” 設定樣式 */ } div.bd {

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ } .bd { /* 針對所有 class=”bd” 設定樣式 */ } div.bd { /* 針對所有 div class=”bd” 設定樣式 */

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ } .bd { /* 針對所有 class=”bd” 設定樣式 */ } div.bd { /* 針對所有 div class=”bd” 設定樣式 */ }

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ } .bd { /* 針對所有 class=”bd” 設定樣式 */ } div.bd { /* 針對所有 div class=”bd” 設定樣式 */ } #nav .bd {

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ } .bd { /* 針對所有 class=”bd” 設定樣式 */ } div.bd { /* 針對所有 div class=”bd” 設定樣式 */ } #nav .bd { /* 只針對所有 id=”nav” 下的 class=”bd” 設定樣式 */

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ } .bd { /* 針對所有 class=”bd” 設定樣式 */ } div.bd { /* 針對所有 div class=”bd” 設定樣式 */ } #nav .bd { /* 只針對所有 id=”nav” 下的 class=”bd” 設定樣式 */ }

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ } .bd { /* 針對所有 class=”bd” 設定樣式 */ } div.bd { /* 針對所有 div class=”bd” 設定樣式 */ } #nav .bd { /* 只針對所有 id=”nav” 下的 class=”bd” 設定樣式 */ } #nav, #article {

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ } .bd { /* 針對所有 class=”bd” 設定樣式 */ } div.bd { /* 針對所有 div class=”bd” 設定樣式 */ } #nav .bd { /* 只針對所有 id=”nav” 下的 class=”bd” 設定樣式 */ } #nav, #article { /* 同時針對 id=”nav” 與 id=”article” 設定相同的樣式 */

ԢਔἡჍ)5.-۷ݺ֥∽ၩຓđ္ିٚь໡ⁿ℟ק$44∄ൔ Selector <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> p { /* 針對所有 p 標籤設定樣式 */ } #nav { /* 針對 id=”nav” 設定樣式 */ } .bd { /* 針對所有 class=”bd” 設定樣式 */ } div.bd { /* 針對所有 div class=”bd” 設定樣式 */ } #nav .bd { /* 只針對所有 id=”nav” 下的 class=”bd” 設定樣式 */ } #nav, #article { /* 同時針對 id=”nav” 與 id=”article” 設定相同的樣式 */ }

Copyright © 2012 FITPI. All rights reserved. ⇢≢ఖ ྘ 8 http://www.w3.org/TR/CSS2/selector.html#pattern-matching
(CSS2) CSS3 ⽀支援更多： http://www.w3schools.com/cssref/css_selectors.asp

Copyright © 2012 FITPI. All rights reserved. ℾྟ 9 選擇器
{ 屬性名稱1：屬性值; 屬性名稱2：屬性值; 屬性名稱3：屬性值; }

{ 屬性名稱1：屬性值; 屬性名稱2：屬性值; 屬性名稱3：屬性值; } ႨնওὂЇڭ

{ 屬性名稱1：屬性值; 屬性名稱2：屬性值; 屬性名稱3：屬性值; } ႨնওὂЇڭ ϶྘વὂ⃯ۯℾྟ଀Ẁ∻ℾྟᆴ

{ 屬性名稱1：屬性值; 屬性名稱2：屬性值; 屬性名稱3：屬性值; } ႨնওὂЇڭ ϶྘વὂ⃯ۯℾྟ଀Ẁ∻ℾྟᆴ ၛٳὂٳۯ҂๝ℾྟ

{ 屬性名稱1：屬性值; 屬性名稱2：屬性值; 屬性名稱3：屬性值; } ႨնওὂЇڭ ϶྘વὂ⃯ۯℾྟ଀Ẁ∻ℾྟᆴ ၛٳὂٳۯ҂๝ℾྟ <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div>

{ 屬性名稱1：屬性值; 屬性名稱2：屬性值; 屬性名稱3：屬性值; } ႨնওὂЇڭ ϶྘વὂ⃯ۯℾྟ଀Ẁ∻ℾྟᆴ ၛٳὂٳۯ҂๝ℾྟ <div id=”nav”> <div class=”bd”> <p>選單</p> </div> </div> <div id=”article”> <div class=”bd”> <p>⽂文章</p> </div> </div> #nav, #article { background: yellow; padding: 20px; width: 100px; margin-bottom: 10px; } #nav p { text-decoration: underline; color: blue; } #article p { color: red; font-weight: bold; } + =

Copyright © 2012 FITPI. All rights reserved. ℾྟࢺℚ 10 http://www.w3schools.com/css/
CSS Styling Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables W3School 的屬性類別列表 CSS Advanced CSS Grouping/Nesting CSS Dimension CSS Display CSS Positioning CSS Floating CSS Align CSS Pseudo-class CSS Pseudo-element CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS Attribute Selectors CSS Box Model CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding

Copyright © 2012 FITPI. All rights reserved. #PY.PEFM 11 padding
border width margin W3C 的標準盒模型 padding border width margin IE 怪異模式盒模型 XJEUI IFJHIUෘمປಆ҂๝aԚ⇥ᆀླ٤ӈཬྏ ⇀ࣂ֥↌∉ၘῂ㢻Ⴕܯ㹁ଆൔ֥ླ౰ਔ ᆺေཬྏ%0$5:1&֥࿆ۡࠧॖх૧

Copyright © 2012 FITPI. All rights reserved. color:#369; background:#ffe; font:bold
16px; ๏ ูՎ໓ᅣଆ⊾౼ἠℳކ֥JE ๏ ࡆഈIE CE GU֥DMBTT ๏ ০Ⴈభ૫֥࢝Ọ༆℟ק∄ൔ 12 ‣↮ğูଆ⊾ࡆഈ∄ൔ http://f2eclass.com/lab/css/module.html

Copyright © 2012 FITPI. All rights reserved. 過去：常⽤用 <table> 來做到下⾯面的版型：
<table border=”1”> <tr> <td align=”left”>靠左⽂文字</td> <td align=”right”>靠右⽂文字</td> </tr> </table> 14 ẖⅼஆϱ 靠左⽂文字靠右⽂文字

Copyright © 2012 FITPI. All rights reserved. 現在：使⽤用 CSS 的
ﬂoat 屬性來做到 <div id=”masthead” style=”border:solid 1px #000”> <span style=”float:left”> 靠左⽂文字 </span> <span style=”float:right”> 靠右⽂文字 </span> </div> 15 GMPBUℾྟ 靠左⽂文字靠右⽂文字

Copyright © 2012 FITPI. All rights reserved. 但 ﬂoat 之後的區塊是不會佔空間的
實際情況會是： border 不會被⽂文字的⾼高度給撐開！ 16 ڜọ㸗ള֥↜ⅳ 靠左⽂文字靠右⽂文字

Copyright © 2012 FITPI. All rights reserved. IE9 之前的作法在上⼀一層設
zoom:1 <div id=”masthead” style=”zoom:1;border:solid 1px #000”> <span style=”float:left”> 靠左⽂文字 </span> <span style=”float:right”> 靠右⽂文字 </span> </div> 17 Ớ*&֥ࢳم

Copyright © 2012 FITPI. All rights reserved. 加上特別的 <br> <div
id=”masthead” style=”zoom:1;border:solid 1px #000”> <span style=”float:left”> 靠左⽂文字 </span> <span style=”float:right”> 靠右⽂文字 </span> <br style=”clear:both;”> </div> 18 ๙Ⴈࢳم BUT! 我們不應該為了樣式特別加⼀一個 <br> /* 作⽤用是增加了⼀一個有 clear:both 屬性的區塊 */ #masthead:after { content:""; display:block; clear:both; } 與上⾯面加的 <br> 效果相同

Copyright © 2012 FITPI. All rights reserved. border:solid 5px #ccc;
font:bold 197%; IE : 在⽗父節點設定 zoom1; 其他瀏覽器：⽗父節點:after { content:’’; display:block; clear:both; } ‣↮ğႨ$44ቓڜọ ๏ 標題浮到左邊 ๏ YUI 圖浮到右邊 ๏ 替整個模組設 border ๏ ⽤用前⾯面的⽅方法清除 19 http://f2eclass.com/lab/css/ﬂoat.html

Copyright © 2012 FITPI. All rights reserved. 適當地將 <img> 改⽤用
CSS 背景可讓讀取更順暢 20 $44Мࣟ

Copyright © 2012 FITPI. All rights reserved. 在 Y! 所有裝飾性的圖都是
CSS 背景圖 21

Copyright © 2012 FITPI. All rights reserved. 22 ठ≢ٚൔ 何時該⽤用背景圖？何時該⽤用
img 標籤？

Copyright © 2012 FITPI. All rights reserved. 22 ठ≢ٚൔ ๏
對於裝飾性、可有可無的圖⽚片應採⽤用背景圖。何時該⽤用背景圖？何時該⽤用 img 標籤？

對於裝飾性、可有可無的圖⽚片應採⽤用背景圖。 ❖ 例如圓⾓角、⼩小 Icon 等即使消失也不會造成無法閱讀的圖⽚片。何時該⽤用背景圖？何時該⽤用 img 標籤？

對於裝飾性、可有可無的圖⽚片應採⽤用背景圖。 ❖ 例如圓⾓角、⼩小 Icon 等即使消失也不會造成無法閱讀的圖⽚片。 ๏ ⽽而對於內容的⼀一部分，則應該使⽤用 img 標籤。何時該⽤用背景圖？何時該⽤用 img 標籤？

對於裝飾性、可有可無的圖⽚片應採⽤用背景圖。 ❖ 例如圓⾓角、⼩小 Icon 等即使消失也不會造成無法閱讀的圖⽚片。 ๏ ⽽而對於內容的⼀一部分，則應該使⽤用 img 標籤。 ❖ 例如⻝⾷食記中的餐點圖⽚片、網⾴頁上的廣告、⽤用圖⽚片做的標題、網站 Logo 都是內容的⼀一部分。何時該⽤用背景圖？何時該⽤用 img 標籤？

Copyright © 2012 FITPI. All rights reserved. background: [背景⾊色] [url(圖檔路徑)]
[x, y 位置] [重複]; background:#369 url(ico_yui.gif) left top repeat-x; repeat-y no-repeat 0 100% 0 -12px background-color:#369; background-image:url(ico_yui.gif); background-position:left top; background-repeat:repeat-x; 或 23 ∽م

Copyright © 2012 FITPI. All rights reserved. ‣↮ğ$44Мࣟ 24 http://f2eclass.com/lab/css/background.html
๏ 設定背景圖為 bg_nav.png

Copyright © 2012 FITPI. All rights reserved. $444QSJUFT 25 http://l.yimg.com/f/i/tw/hp/spirit121004l/sprite.png
把多張背景圖合併成⼀一張雅⻁虎奇摩⾸首⾴頁的 Sprites 0, 0 sprite.png 0, 30 0, 55 0, 90 0, 115 0, 145 background: url(sprite.png) 0 -115px no-repeat; background: url(sprite.png) 0 -145px no-repeat; background: url(sprite.png) 0 -90px no-repeat; background: url(sprite.png) 0 -55px no-repeat; background: url(sprite.png) 0 -30px no-repeat; background: url(sprite.png) 0 0 no-repeat;

Copyright © 2012 FITPI. All rights reserved. 4QSJUFT֥∱ಌề 26 ๏
ݺẕğႵི㦆ഒ↌ਫ⃪਼౰⅂ਈ ❖ ෾؟⃪౰Ớ↌∉֥↾ൕ൞Ⴕ႕⇉֥b ๏ ὒẕğₒၛ→Ὂ ❖ Y Z໊֥ᇂ֤յῘ႕ཞẕ৘ℂⅴҰᅳb ๏ ၘῂႵℂⅴॖၛሱọ߄ẕ৘

Copyright © 2012 FITPI. All rights reserved. <div/> <div/> <div/>
<div/> 什麼都沒設時（position:static;） 28

Copyright © 2012 FITPI. All rights reserved. <div/> <div/> <div/>
<div style=”position:absolute; bottom:0;right:0;”> 當對某個區塊設了 position:absolute; 時就脫離原有區塊的範圍、不佔空間 29

Copyright © 2012 FITPI. All rights reserved. <div style=”position:relative;” />
<div/> <div/> <div style=”position:absolute; bottom:0;right:0;”> 對⺟母區塊設定 position:relative; 則會限制住 position:absolute; 的⼦子區塊 30

Copyright © 2012 FITPI. All rights reserved. ๏ QPTJUJPO ❖
TUBUJD≁℟ 31

TUBUJD≁℟ ❖ BCTPMVUF䌉Ớק໊ 31

TUBUJD≁℟ ❖ BCTPMVUF䌉Ớק໊ ❖ SFMBUJWFཌྷỚק໊ 31

TUBUJD≁℟ ❖ BCTPMVUF䌉Ớק໊ ❖ SFMBUJWFཌྷỚק໊ ❖ GJYFE 31

TUBUJD≁℟ ❖ BCTPMVUF䌉Ớק໊ ❖ SFMBUJWFཌྷỚק໊ ❖ GJYFE ๏ UPQ SJHIU CPUUPN MFGU֥஥ކ 31

TUBUJD≁℟ ❖ BCTPMVUF䌉Ớק໊ ❖ SFMBUJWFཌྷỚק໊ ❖ GJYFE ๏ UPQ SJHIU CPUUPN MFGU֥஥ކ ❖ ᄝଢభ໊֥ᇂສ༯၍QY QPTJUJPOSFMBUJWFUPQQY 31

TUBUJD≁℟ ❖ BCTPMVUF䌉Ớק໊ ❖ SFMBUJWFཌྷỚק໊ ❖ GJYFE ๏ UPQ SJHIU CPUUPN MFGU֥஥ކ ❖ ᄝଢభ໊֥ᇂສ༯၍QY QPTJUJPOSFMBUJWFUPQQY ❖ ᆜٺ໓ࡱᇏ֥Ⴗ༯࢘ğ QPTJUJPOBCTPMVUFSJHIUCPUUPN 31

TUBUJD≁℟ ❖ BCTPMVUF䌉Ớק໊ ❖ SFMBUJWFཌྷỚק໊ ❖ GJYFE ๏ UPQ SJHIU CPUUPN MFGU֥஥ކ ❖ ᄝଢభ໊֥ᇂສ༯၍QY QPTJUJPOSFMBUJWFUPQQY ❖ ᆜٺ໓ࡱᇏ֥Ⴗ༯࢘ğ QPTJUJPOBCTPMVUFSJHIUCPUUPN ❖ ॖℶ⃯თ֥ቋ༯ٚč*&҂ᆦჱĎğ QPTJUJPOGJYFECPUUPN 31

Copyright © 2012 FITPI. All rights reserved. 1. 將 li
設定為 position:relative; 2. 將 img 設定為 position:absolute; 並利⽤用 top, right 做微調 ‣↮ğ$44໊ᇂ 32 http://f2eclass.com/lab/position.html

Copyright © 2012 FITPI. All rights reserved. IE 6, IE7,
IE8, IE9, 其他瀏覽器會有不同的底⾊色 #article .bd { background:blue; background:purple \0; background:pink \9; *background:green; _background:red; } All Browsers IE 7, IE 6 IE 6 34 IE8, IE7, IE6 IE9, IE8 ӈႨ$44)BDL ⼤大多是為了 IE 特別修正，其他瀏覽器較少問題

Copyright © 2012 FITPI. All rights reserved. 讓 #article .bd
在 IE9 為 purple、IE8 為 green、IE7 為 red，其他瀏覽器為 pink。 ‣↮ğ$44)BDL 35 http://f2eclass.com/lab/css-hack.html

Copyright © 2012 FITPI. All rights reserved. Άᾲᆩℰ∻۽ऎ 36 ๏
3FTFU$44ᾞ∄ൔἳਬ ๏ $44(SJET$44ஆϱٚൔ ๏ 4"44$PNQBTTс⇥۽ऎ ๏ $44с⇥ℾྟ ๏ 5XJUUFS#PPUTUSBQ۽ӱ℩္Ⴕݺࢺ૫ ๏ $44$PEF$POWFOUJPOℼ⇔ἲữ ๏ $44ὡⅾ

Copyright © 2012 FITPI. All rights reserved. 3FTFU$44 ๏ )5.-Ṍ⚓Чദ׻Ⴕ≁℟∄ൔđ֌൞ૄ
ἠ⏟´ఖ׻Ⴕҵ㹁đࡆഈն؟҂ژކ໡ ⁿ֥ླ౰b ๏ )5.-൞᾵ἧa҂∣ἐႵ಩ޅ∄ൔb ๏ ପ喁໡ⁿࣼἳਬϔa⃸ૄἠṌ⚓֥ຓἭ ׻၂ଆ၂∄b ๏ ⊦∊Ć෮Ⴕ֥∄ൔ׻Ⴎሱ࠭ᇗྍק∕b 37

Copyright © 2012 FITPI. All rights reserved. 3FTFU$44֥⇢≢ ๏ &SJD.FZFS
IUUQNFZFSXFCDPNFSJDUPPMTDTTSFTFU ๏ :6*$443FTFU IUUQZVJMJCSBSZDPNZVJEPDTDTTSFTFU 39 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.2/build/cssreset/cssreset-min.css"> 直接放在⾴頁⾯面上就⽣生效

Copyright © 2012 FITPI. All rights reserved. $44(SJET ๏ (SJET൞ᆷᆜἠ↌∉֥ஆϱb
40

๏ $44'MPBU὜൞ஆϱ֥၂⊕ቔمb 40

๏ $44'MPBU὜൞ஆϱ֥၂⊕ቔمb ๏ ҂ࡹ∗ሱ࠭Ῐứஆϱđ↱ᾳ෾؟b 40

๏ $44'MPBU὜൞ஆϱ֥၂⊕ቔمb ๏ ҂ࡹ∗ሱ࠭Ῐứஆϱđ↱ᾳ෾؟b ๏ ᄜᾏẪ֥↌∉׻∣ἐႄႨ↛ק֥(SJET ༢ⅼb 40

Copyright © 2012 FITPI. All rights reserved. 42 http://960.gs/ ๏
ᾞ↌∉ཋᇅ㬪QJYFMb ๏ ၇ᅶࠇ֩ٳ్۬ሰb ๏ ݺẕ൞۵ℶῒ℟ί℩ಸၞٳ۽b ❖ ҂Ⴈᄜ⃝၂ؐỚ⃆֥↜ⅳb ๏ ὒẕ൞ჰ൓⁫֥ⅆ྽㢻Ḱم၇4&0Ệᆜb HT

Copyright © 2012 FITPI. All rights reserved. 43 :6*(SJET http://developer.yahoo.com/yui/grids/
側邊欄寬度為 240px 平均分配 50%, 50% 版⾯面寬度 950px

Copyright © 2012 FITPI. All rights reserved. 46 ๏ ∉૫ῥ؇؟⊕ॖ⇢b
:6*(SJET http://developer.yahoo.com/yui/grids/

๏ ۀ୑㬪wᇶေ⤨ಸx∻wṥṆ῵xb :6*(SJET http://developer.yahoo.com/yui/grids/

๏ ۀ୑㬪wᇶေ⤨ಸx∻wṥṆ῵xb ๏ ṥṆ῵ॖሱႮỆᆜቐႷa۲೘⊕ῥ؇b :6*(SJET http://developer.yahoo.com/yui/grids/

๏ ۀ୑㬪wᇶေ⤨ಸx∻wṥṆ῵xb ๏ ṥṆ῵ॖሱႮỆᆜቐႷa۲೘⊕ῥ؇b ๏ ⤨ಸῥ؇∉૫ῥ؇ṥṆ῵ῥ؇b :6*(SJET http://developer.yahoo.com/yui/grids/

๏ ۀ୑㬪wᇶေ⤨ಸx∻wṥṆ῵xb ๏ ṥṆ῵ॖሱႮỆᆜቐႷa۲೘⊕ῥ؇b ๏ ⤨ಸῥ؇∉૫ῥ؇ṥṆ῵ῥ؇b ๏ ࠧ൐ᇗေ֥⤨ಸᄝႷṆa္ॖၛᄝჰ൓⁫ᇏ ᄪề↾ൕb :6*(SJET http://developer.yahoo.com/yui/grids/

Copyright © 2012 FITPI. All rights reserved. ⃦⅌⇔$44 50 @import
"compass"; .foo { @include border-radius(5px); @include box-shadow(10px); } /* line 3, ../sass/foo.scss */ .foo { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 10px; -moz-box-shadow: 10px; box-shadow: 10px; } foo.scss foo.css $44ᆦჱ؇ᄝૄἠ⏟´ఖὕႵ၂ུҵ㹁đ ଢభն؟ὕ൞὜ܳഈ۲ሱṸഅ֥QSFGJY ൐Ⴈ$PNQBTTđ୆ᆺေ⇔၂⊕ࣼॖၛ㸗ԛ ෮Ⴕ⏟´ఖ෮ླ֥$44đ൅ٳ⃦⅌Ć

⃪༯≘IUUQGFDMBTTDPNMBCDTTDPNQBTT[JQ ๏ ࢳ⇭⅜֞୆֥↌ᅟ۴ଢ仛$="QQ4FSW=XXX=

⃪༯≘IUUQGFDMBTTDPNMBCDTTDPNQBTT[JQ ๏ ࢳ⇭⅜֞୆֥↌ᅟ۴ଢ仛$="QQ4FSW=XXX= ๏ ὜ႵTBTT TUZMFTIFFUT JNBHFT֩ଢ仛

⃪༯≘IUUQGFDMBTTDPNMBCDTTDPNQBTT[JQ ๏ ࢳ⇭⅜֞୆֥↌ᅟ۴ଢ仛$="QQ4FSW=XXX= ๏ ὜ႵTBTT TUZMFTIFFUT JNBHFT֩ଢ仛 ❖ TBTT൞ჰ൓ẵ

⃪༯≘IUUQGFDMBTTDPNMBCDTTDPNQBTT[JQ ๏ ࢳ⇭⅜֞୆֥↌ᅟ۴ଢ仛$="QQ4FSW=XXX= ๏ ὜ႵTBTT TUZMFTIFFUT JNBHFT֩ଢ仛 ❖ TBTT൞ჰ൓ẵ ❖ TUZMFTIFFUT൞ႮTBTT⊨ԛaℯόФ⏟´ఖồ౼֥DTTẵ

⃪༯≘IUUQGFDMBTTDPNMBCDTTDPNQBTT[JQ ๏ ࢳ⇭⅜֞୆֥↌ᅟ۴ଢ仛$="QQ4FSW=XXX= ๏ ὜ႵTBTT TUZMFTIFFUT JNBHFT֩ଢ仛 ❖ TBTT൞ჰ൓ẵ ❖ TUZMFTIFFUT൞ႮTBTT⊨ԛaℯόФ⏟´ఖồ౼֥DTTẵ ❖ JNBHFT༯Ⴕ໡≁༵⊵Ḿݺ֥ⅾẵ

⃪༯≘IUUQGFDMBTTDPNMBCDTTDPNQBTT[JQ ๏ ࢳ⇭⅜֞୆֥↌ᅟ۴ଢ仛$="QQ4FSW=XXX= ๏ ὜ႵTBTT TUZMFTIFFUT JNBHFT֩ଢ仛 ❖ TBTT൞ჰ൓ẵ ❖ TUZMFTIFFUT൞ႮTBTT⊨ԛaℯόФ⏟´ఖồ౼֥DTTẵ ❖ JNBHFT༯Ⴕ໡≁༵⊵Ḿݺ֥ⅾẵ ๏ 4DPVU℟קݺᗥ⬏ọaẵσṉọ὜ሱọ㸗ളb

⃪༯≘IUUQGFDMBTTDPNMBCDTTDPNQBTT[JQ ๏ ࢳ⇭⅜֞୆֥↌ᅟ۴ଢ仛$="QQ4FSW=XXX= ๏ ὜ႵTBTT TUZMFTIFFUT JNBHFT֩ଢ仛 ❖ TBTT൞ჰ൓ẵ ❖ TUZMFTIFFUT൞ႮTBTT⊨ԛaℯόФ⏟´ఖồ౼֥DTTẵ ❖ JNBHFT༯Ⴕ໡≁༵⊵Ḿݺ֥ⅾẵ ๏ 4DPVU℟קݺᗥ⬏ọaẵσṉọ὜ሱọ㸗ളb ๏ 4VCMJNF5FYU֤ႵDPOGJHSC஥ކ#VJMEb

⃪༯≘IUUQGFDMBTTDPNMBCDTTDPNQBTT[JQ ๏ ࢳ⇭⅜֞୆֥↌ᅟ۴ଢ仛$="QQ4FSW=XXX= ๏ ὜ႵTBTT TUZMFTIFFUT JNBHFT֩ଢ仛 ❖ TBTT൞ჰ൓ẵ ❖ TUZMFTIFFUT൞ႮTBTT⊨ԛaℯόФ⏟´ఖồ౼֥DTTẵ ❖ JNBHFT༯Ⴕ໡≁༵⊵Ḿݺ֥ⅾẵ ๏ 4DPVU℟קݺᗥ⬏ọaẵσṉọ὜ሱọ㸗ളb ๏ 4VCMJNF5FYU֤ႵDPOGJHSC஥ކ#VJMEb ๏ ႵOPSNBMIUNM CBTJDTQSJUFIUNM BVUP TQSJUFIUNM೘ἠẵσ⃪նࡅ‣↮b

Copyright © 2012 FITPI. All rights reserved. 53 ๏ 4"444ZOUBDUJDBMMZ"XFTPNF4UZMF4IFFUT
IUUQTBTTMBOHDPN ק∕ਔࠎẒ∽م ๏ $PNQBTT$44"VUIPSJOH'SBNXFPSL IUUQDPNQBTTTUZMFPSH ࠎᧄ4"44෮ቓ֥ॿࡏa⃪؟Ṛॉ≾Ṇ֥໓ࡱ ๏ 4DPVU$PNQBTTBOE4BTTXJUIPVUBMMIBTTMF IUUQNITHJUIVCDPNTDPVUBQQ ॴ௜෻౏૧ỷ֥4"44۽ऎ $PNQBTTṚॉ’᾵

Copyright © 2012 FITPI. All rights reserved. ๏ ۽ӱ℩္ିႵݺ∄ൔ ๏
ᄝ∉૫ഈႄႨຓ҆$44a๩Ἶ#PPUTUSBQ≁༵ק ∕֥)5.-᾵ἧ∻$MBTT଀Ẁࠧॖ൐Ⴈb২ೂ DMBTTCUO ๏ ℳކႨᄝ҂ླห⦁∄ൔֹ֥ٚđ২ೂ$.4ࠇ 1SPUPUZQFb֌Ⴕሱק∄ൔֹ֥ٚđ২ೂྙའ↌ᅟ ࣼ҂ℳކਔb 54 5XJUUFS#PPUTUSBQ http://twitter.github.com/bootstrap/

CBDLHSPVOEJNBHFMJOFBSHSBEJFOUᾛṧ ๏ CPSEFSSBEJVT≈࢘ 55 $44с⇥ℾྟ

CBDLHSPVOEJNBHFMJOFBSHSBEJFOUᾛṧ ๏ CPSEFSSBEJVT≈࢘ ๏ CPYTIBEPXއሰ֥∜႕ 55 $44с⇥ℾྟ

CBDLHSPVOEJNBHFMJOFBSHSBEJFOUᾛṧ ๏ CPSEFSSBEJVT≈࢘ ๏ CPYTIBEPXއሰ֥∜႕ ๏ UFYUTIBEPX໓ሳ֥∜႕ 55 $44с⇥ℾྟ

CBDLHSPVOEJNBHFMJOFBSHSBEJFOUᾛṧ ๏ CPSEFSSBEJVT≈࢘ ๏ CPYTIBEPXއሰ֥∜႕ ๏ UFYUTIBEPX໓ሳ֥∜႕ ๏ USBOTJUJPO㍤ṳ 55 $44с⇥ℾྟ

๏ 䌉Ớ҂ၛ∄ൔଁ଀)5.-֥JEࠇDMBTTℾྟb

๏ 䌉Ớ҂ၛ∄ൔଁ଀)5.-֥JEࠇDMBTTℾྟb ๏ DMBTT∻JEଁ଀㍇Ⴈཬ⇔஥ކ௥ᅼὂ’ࢤb

๏ 䌉Ớ҂ၛ∄ൔଁ଀)5.-֥JEࠇDMBTTℾྟb ๏ DMBTT∻JEଁ଀㍇Ⴈཬ⇔஥ކ௥ᅼὂ’ࢤb ๏ ℾྟοᅶሳଛⅆ྽ B[ ቓஆ྽b

๏ 䌉Ớ҂ၛ∄ൔଁ଀)5.-֥JEࠇDMBTTℾྟb ๏ DMBTT∻JEଁ଀㍇Ⴈཬ⇔஥ކ௥ᅼὂ’ࢤb ๏ ℾྟοᅶሳଛⅆ྽ B[ ቓஆ྽b ๏ ⇢≢ఖᗥॢ၂۬٢նওὂῘⅽaնওὂ᾵ແᅝ၂ྛb

๏ 䌉Ớ҂ၛ∄ൔଁ଀)5.-֥JEࠇDMBTTℾྟb ๏ DMBTT∻JEଁ଀㍇Ⴈཬ⇔஥ކ௥ᅼὂ’ࢤb ๏ ℾྟοᅶሳଛⅆ྽ B[ ቓஆ྽b ๏ ⇢≢ఖᗥॢ၂۬٢նওὂῘⅽaնওὂ᾵ແᅝ၂ྛb ๏ ෮ႵℾྟࢥẪỒ၂ྛaၛἠ4QBDFTῘⅽb

๏ 䌉Ớ҂ၛ∄ൔଁ଀)5.-֥JEࠇDMBTTℾྟb ๏ DMBTT∻JEଁ଀㍇Ⴈཬ⇔஥ކ௥ᅼὂ’ࢤb ๏ ℾྟοᅶሳଛⅆ྽ B[ ቓஆ྽b ๏ ⇢≢ఖᗥॢ၂۬٢նওὂῘⅽaնওὂ᾵ແᅝ၂ྛb ๏ ෮ႵℾྟࢥẪỒ၂ྛaၛἠ4QBDFTῘⅽb ๏ 冓೤⁫၂ੰ㍇Ⴈཬ⇔b

๏ 䌉Ớ҂ၛ∄ൔଁ଀)5.-֥JEࠇDMBTTℾྟb ๏ DMBTT∻JEଁ଀㍇Ⴈཬ⇔஥ކ௥ᅼὂ’ࢤb ๏ ℾྟοᅶሳଛⅆ྽ B[ ቓஆ྽b ๏ ⇢≢ఖᗥॢ၂۬٢նওὂῘⅽaնওὂ᾵ແᅝ၂ྛb ๏ ෮ႵℾྟࢥẪỒ၂ྛaၛἠ4QBDFTῘⅽb ๏ 冓೤⁫၂ੰ㍇Ⴈཬ⇔b ๏ ℾྟᆴᗥ၂ੰࡆഈٳὂb

๏ 䌉Ớ҂ၛ∄ൔଁ଀)5.-֥JEࠇDMBTTℾྟb ๏ DMBTT∻JEଁ଀㍇Ⴈཬ⇔஥ކ௥ᅼὂ’ࢤb ๏ ℾྟοᅶሳଛⅆ྽ B[ ቓஆ྽b ๏ ⇢≢ఖᗥॢ၂۬٢նওὂῘⅽaնওὂ᾵ແᅝ၂ྛb ๏ ෮ႵℾྟࢥẪỒ၂ྛaၛἠ4QBDFTῘⅽb ๏ 冓೤⁫၂ੰ㍇Ⴈཬ⇔b ๏ ℾྟᆴᗥ၂ੰࡆഈٳὂb ๏ ㍇Ⴈ)5.-ଆ⊾߄ῘứaỚ܋Ⴈ֥҆ٺေཬྏb

๏ 䌉Ớ҂ၛ∄ൔଁ଀)5.-֥JEࠇDMBTTℾྟb ๏ DMBTT∻JEଁ଀㍇Ⴈཬ⇔஥ކ௥ᅼὂ’ࢤb ๏ ℾྟοᅶሳଛⅆ྽ B[ ቓஆ྽b ๏ ⇢≢ఖᗥॢ၂۬٢նওὂῘⅽaնওὂ᾵ແᅝ၂ྛb ๏ ෮ႵℾྟࢥẪỒ၂ྛaၛἠ4QBDFTῘⅽb ๏ 冓೤⁫၂ੰ㍇Ⴈཬ⇔b ๏ ℾྟᆴᗥ၂ੰࡆഈٳὂb ๏ ㍇Ⴈ)5.-ଆ⊾߄ῘứaỚ܋Ⴈ֥҆ٺေཬྏb 以上書寫規範只是建議，你可以⾃自訂

⃪޽ềℭᾇुἾ$44֥෮Ⴕℾྟb ๏ *%⇢≢ఖğἡჍ∄ൔ℟קଁ଀ॢᾇb

⃪޽ềℭᾇुἾ$44֥෮Ⴕℾྟb ๏ *%⇢≢ఖğἡჍ∄ൔ℟קଁ଀ॢᾇb ๏ $MBTT⇢≢ఖğቋӈႨῲ℟ק$44∄ൔb

⃪޽ềℭᾇुἾ$44֥෮Ⴕℾྟb ๏ *%⇢≢ఖğἡჍ∄ൔ℟קଁ଀ॢᾇb ๏ $MBTT⇢≢ఖğቋӈႨῲ℟ק$44∄ൔb ๏ ၛഈ‥ᆀ֥ଁ଀׻∣ἐх૧Ṛ≗∄ൔ

⃪޽ềℭᾇुἾ$44֥෮Ⴕℾྟb ๏ *%⇢≢ఖğἡჍ∄ൔ℟קଁ଀ॢᾇb ๏ $MBTT⇢≢ఖğቋӈႨῲ℟ק$44∄ൔb ๏ ၛഈ‥ᆀ֥ଁ଀׻∣ἐх૧Ṛ≗∄ൔ ❖ ২ೂğUPQOBW MFGUCBS SFEQY CPUUPNBE CMBDLCBS

⃪޽ềℭᾇुἾ$44֥෮Ⴕℾྟb ๏ *%⇢≢ఖğἡჍ∄ൔ℟קଁ଀ॢᾇb ๏ $MBTT⇢≢ఖğቋӈႨῲ℟ק$44∄ൔb ๏ ၛഈ‥ᆀ֥ଁ଀׻∣ἐх૧Ṛ≗∄ൔ ❖ ২ೂğUPQOBW MFGUCBS SFEQY CPUUPNBE CMBDLCBS ๏ ⇢≢ఖླႨ᾵ἧῲଁ଀b

⃪޽ềℭᾇुἾ$44֥෮Ⴕℾྟb ๏ *%⇢≢ఖğἡჍ∄ൔ℟קଁ଀ॢᾇb ๏ $MBTT⇢≢ఖğቋӈႨῲ℟ק$44∄ൔb ๏ ၛഈ‥ᆀ֥ଁ଀׻∣ἐх૧Ṛ≗∄ൔ ❖ ২ೂğUPQOBW MFGUCBS SFEQY CPUUPNBE CMBDLCBS ๏ ⇢≢ఖླႨ᾵ἧῲଁ଀b ❖ ২ೂğTJEFCBS OBW FYUSB BEMSFD

⃪޽ềℭᾇुἾ$44֥෮Ⴕℾྟb ๏ *%⇢≢ఖğἡჍ∄ൔ℟קଁ଀ॢᾇb ๏ $MBTT⇢≢ఖğቋӈႨῲ℟ק$44∄ൔb ๏ ၛഈ‥ᆀ֥ଁ଀׻∣ἐх૧Ṛ≗∄ൔ ❖ ২ೂğUPQOBW MFGUCBS SFEQY CPUUPNBE CMBDLCBS ๏ ⇢≢ఖླႨ᾵ἧῲଁ଀b ❖ ২ೂğTJEFCBS OBW FYUSB BEMSFD ๏ $PNQBTT⃸⇔$44۷᾵ἧ߄a4QSJUF۷ሱọb

⃪޽ềℭᾇुἾ$44֥෮Ⴕℾྟb ๏ *%⇢≢ఖğἡჍ∄ൔ℟קଁ଀ॢᾇb ๏ $MBTT⇢≢ఖğቋӈႨῲ℟ק$44∄ൔb ๏ ၛഈ‥ᆀ֥ଁ଀׻∣ἐх૧Ṛ≗∄ൔ ❖ ২ೂğUPQOBW MFGUCBS SFEQY CPUUPNBE CMBDLCBS ๏ ⇢≢ఖླႨ᾵ἧῲଁ଀b ❖ ২ೂğTJEFCBS OBW FYUSB BEMSFD ๏ $PNQBTT⃸⇔$44۷᾵ἧ߄a4QSJUF۷ሱọb ๏ #PPUTUSBQิ܂ޓϿ֥∄ൔđ୆֥㸗௖ℳކ⁯Ĥ

CSS 入門 - Web 前端程式開發實務

CSS 入門 - Web 前端程式開發實務

More Decks by Joseph Chiang

Other Decks in Programming

Featured

Transcript