2015 羅東高中網頁設計工作坊－CSS 初心者指南

CSS 初心者指南 @ 2015.07.20 羅東高中網頁設計工作坊
工作坊活動網站：http://irene84111.github.io/ltsh-web-design-workshop

Transcript

1. CSS ⴲ䗱罏䭸⽂ 康㹦ꔤ
   
   〵抓猰䪮㣐㷸 2015.7.20 羅東⾼高中網⾴頁設計⼯工作坊
2. CSS㋐軋ㅕ
3. 僽♧珏
   垺䒭铃鎊 欽⟃䲾鶤笪갤⯋稇)5.-⯋稇涸㢫錚垺䒭
4. ⢿㥶 䱖晝鏤鎙 胝兞겝蒀 俒㶶겝蒀 ⯋稇㣐㼭 ⯋稇꟦騅 ✽⹛佪卓 酤귇⯋稇 矦㋲⹛殥 㶶넓隶⻋
5. CSS铃岁圓䧭 鼇乵㐼 㿂䚍 ⧩ 4FMFDUPS 1SPQFSUZ 7BMVF 鼇乵ㆭ❉⯋稇銴㤛欽鸏⦐垺䒭
   ⢿㥶厥⦐垦겗㶶㕮晚䧴俒畎媯衆 邍爚銴ꆚ㼩➊랃垺䒭⨞锅侮
   ⢿㥶겝蒀㣐㼭䧴⡙縨 颭✮䨾鼇㿂䚍♧⦐⧩
   ⢿㥶秋蒀QY䧴縨⚥
6. h1 { color: red } CSS铃岁眕⢿ 鼇乵㐼 㿂䚍 ⧩ 缺陼㼟䨾剤I⯋稇涸չⰉ俒겝蒀պ鏤㹁捀չ秋蒀պ
7. 겝蒀湱ꡠ铃岁 color background-color border-color Ⰹ俒겝蒀 胝兞겝蒀 㢫呥겝蒀 䌢欽㿂䚍 䌢欽⧩ RGB⾊色碼或⾊色名 background-opacity 胝兞♶鷴僈䏞 FY
   GDDDSFEXIJUF RGB⾊色碼或⾊色名 FY
   GDDDSFEXIJUF RGB⾊色碼或⾊色名 FY
   GDDDSFEXIJUF 0.0 ~ 1.0 區間 FY
   
8. 俒㶶湱ꡠ铃岁 font-size line-height text-align Ⰹ俒㣐㼭 俒㶶遤넞 俒㶶㼩뢶 䌢欽㿂䚍 䌢欽⧩ px或em FY
   QYFN left、center、right px或em FY
   QYFN text-decoration 俒㶶酤귇 underline、line-through 刿㢵垺䒭⧩锞荈遤HPPHMF
9. 鼹呥湱ꡠ铃岁 border-color border-style border-width 㢫呥겝蒀 㢫呥괐呔 㢫呥磧稣 䌢欽㿂䚍 䌢欽⧩ dotted、dashed、solid 刿㢵垺䒭⧩锞荈遤HPPHMF px或em FY
   QYFN RGB⾊色碼或⾊色名 FY
   GDDDSFEXIJUF border-radius 㢫呥磧稣 px或em或% FY
   QY
10. 㽯㼄湱ꡠ铃岁 width height ⯋稇㻫䏞 ⯋稇넞䏞 䌢欽㿂䚍 䌢欽⧩ px或% FY
    QY px或% FY
    QY
11. 䱖晝湱ꡠ铃岁 padding margin ⯋稇Ⰹ騅 ⯋稇㢫騅 䌢欽㿂䚍 䌢欽⧩ px或% FY
    QY px或% FY
    QY
12. 幢㋲湱ꡠ铃岁 list-style-type list-style-position 幢㋲痘贫垺䒭 幢㋲痘贫涸⡙縨 䌢欽㿂䚍 䌢欽⧩ disc、circle、square 鼩剤䖎㢵垺䒭荈䊹叆 inside、outside
13. &MFNFOU鼇乵㐼 鼇《乩剤垦硹湱ず涸䨾剤⯋稇 h1 { color: blue } h2 { color: red } <h1>嗨！</h1> <h1>呦！</h1> <h2>嘿！</h2> )5.- $44 穡卓 չ㍜պ莅չルպ剚隶䧭话蒀㔔捀➮⦛鿪僽I
    罜չ㏮պ剚隶䧭秋蒀㔔捀➮僽Iザ
14. 㥶卓♶䟝♧妄鿈佖ヤ
15. 齡㽠欽
    $MBTT
16.  欽⢵ⴕ겳
     䘰鸠㤛欽
    $44
     雊玑䒭焺隶䖤㥪溏
17. FMFNFOU
    DMBTTWBMVF
18. FMFNFOU
    〳⟃僽ꤑ✫暶㹁垦硹⟃㢫涸⟤䠑垦硹 FMFNFOU
    DMBTTWBMVF
19. WBMVF
    㽠僽겳ⴽ涸そ㶶〳⟃荈歋ㄐそ FMFNFOU
    DMBTTWBMVF
20. $MBTT鼇乵㐼 鼇《乩剤暶㹁$MBTT涸䨾剤⯋稇 .a { color: blue } .b { color: red } <h1 class=“a”>嗨！</h1> <h1 class=“b”>呦！</h1> <h1 class=“a”>嘿！</h1> )5.- $44 穡卓 չ㍜պ莅չ㏮պ剚隶䧭话蒀㔔捀➮⦛鿪㿂倴չBպ鸏⦐DMBTT
    罜չルպ剚隶䧭秋蒀㔔捀➮㿂倴չCպ涸DMBTT
21. *E鼇乵㐼 鼇《乩剤暶㹁*E涸㋲♧⯋稇 #a { color: blue } #b { color: red } <h1 id=“a”>嗨！</h1> <h1 id=“b”>呦！</h1> <h1 id=“c”>嘿！</h1> )5.- $44 穡卓 չ㍜պ剚隶䧭话蒀㔔捀➮涸*E僽չBպ
    չルպ剚隶䧭秋蒀㔔捀➮涸*E僽չCպ
    չ㏮պ⵱♶剚隶蒀
22. 鼩剤䖎㢵鼇乵㐼 ⯓闍⦐剤馱涸㥪✫ a:link { color: blue } a:visited { color: red } a:hover { color: yellow } a:active { color: green } <a href=“#”>此為連結</a> )5.- $44 穡卓 鸮穡겝蒀剚隶䧭话蒀
    չ럊麕⛓䖕պ剚隶䧭秋蒀
    չ康垦徿麕儘պ剚隶䧭랔蒀
    չ康垦럊⡞♶佞儘պ剚隶䧭笃蒀