基礎切版技巧

針對CSS初學者的基礎功能概述課程

Transcript

1. 主講 / BoBo
2. 課程大綱 一、CSS 套用方式 二、CSS 區塊特性 三、CSS 的繼承&權重 四、常用的語法 五、最常發生的問題 六、基礎切版實作
3. 一、CSS套用方式 1.行內套用 例： <p style="font-size:16;">This is font size 16.</p>
4. 一、CSS套用方式 2.崁入套用 例： <style type="text/css"> div { background-color:#FF0000; } </style>
5. 一、CSS套用方式 3.外部連結套用 例： <link rel=stylesheet type="text/css" href=“index.css">
6. 一、CSS套用方式 4.匯入套用 例： <STYLE TYPE="text/css"> <!-- @import url(http://www.mysite.com/style.css); --> </STYLE>
7. 二、CSS區塊特性 1.區塊級容器 例：div,p,ul,li,dl,dt,dd…..
8. 二、CSS區塊特性 2.非區塊級容器 例：span,a,font……
9. 二、CSS區塊特性 3. 區塊&非區塊的特性比較 非區塊容器 區塊容器 寬度 依內容變動 100% 高度 依內容變動 依內容變動 區塊自動換行 不換行 強制換行 邊距(margin) 只有左右正常 可正常使用 間距(padding) 當區塊直接最外層時, 上方留白會無法顯示 可正常使用
10. 三、CSS的繼承&權重 1.繼承的特性 例： .txt_cor{ color:#000} <div class="txt_cor"> <span>黑色的字</span> 同樣是黑色的字 </div>
11. 三、CSS的繼承&權重 2.權重的特性 例： .txt_cor{ color:#000} #name{color:#fff} <div id="name" class="txt_cor"> <span>白色的字</span> 同樣是白色的字 </div>
12. 四、常用的語法 1. 改變容器區塊特性 Display 2. 連結相關指令 a 3. 邊距 margin 4. 間距 padding 5. 浮動 float 6. 文字 font text 7. 顏色 color background 8. 定位 position 9. 邊框 border
13. 四、常用的語法 10.進階版CSS略述 a. CSS選擇器 b. 圖片置中 c. 文字裁減 d. CSS的Framework e. CSS3的裝飾用語法(IE8不支援)
14. 五、最常發生的問題 1. 背景圖消失 2. 浮動&清除 3. z-index 4. 簡易偵測跑版問題的方法
15. 六、基礎切版實作 http://www.studio-yoggy.com/