第十三章、CSS樣式表使用方塊模型 (box model)
CSS 用於連結與文字的特效
- 文字的字體大小是有單位的！底下為常見的字體大小單位(可對照課本 13-31)：
- pt (點數，1pt 為 1/72 英吋，常用於印刷字體，顯示於螢幕者應少用)
- pc (pica, 同上，相當於 12 點, 12pt)
- px (像素，文字應避免使用這方面的單位！)
- em (相當於英文 M 的大小，為相對單位！可使用 1em, 0.5em, 1.2em 等)
- % (與正常字體比較的百分比單位)
- 如何讓你的某些文字加上框線網底？可使用 13-39 頁談到的 background-color 來設計！
舉例來說，如果要讓 h1 具有底色時，可以如下這樣製作：
h1 { background-color: #ADD8E6; color: #256579; }
重點在那個 background-color 喔！
- 承上題，那如果是想要加上底線的話，就如下處理即可：
h1 {text-decoration: underline}
- 文字的行距也是可以調整的！請參考這裡的連結，
將行距調整為 1.5 倍行高，可透過如下設定：
xxx { line-height: 1.5 }
- 連結<a>標籤的使用時，可以透過 CSS 來增加一些特殊的技法！包括可在你的網頁中，讓滑鼠移動到超連結時，才出現底線。
可以使用的 a 的 CSS 樣式主要有：
a:link {text-decoration: none; color: blue}
a:visited {text-decoration: none; color: blue}
a:active {text-decoration: none; color: blue}
a:hover {text-decoration: underline; color: #ff0000}
你可以自行加入一些特殊的變化！包括改變字體大小，加入框線網底等等功能！例如我們上課用主機 http://class.vbird.tw 裡面的資料等等。那如果想要底線與文字上方都有線段，可以如下處理：
a:hover {text-decoration: underline overline; }
- 立刻進行實作題第一題！請花 30 分鐘的時間完成這個部分！
CSS 的方塊模型
- 請務必參考 page 13-42 頁裡面，分析 margin, padding 與 border 的關係！
- 請務必參考 page 13-45 頁裡面，說明方塊的總高度與總寬度為多少！！
- 練習：請參考課本 page 13-49 的說明，建立兩個不重複的方塊。假設空白區域(padding)為 60 間距，
餘域區域 (margin) 為 50 間距，方框高度與寬度各為 200，方框的線段格式為虛線 (dashed)，
最後，方框的內部底色為淺黃色，字體顏色為深藍色；
- 練習：承上，如果這兩個方塊是上下分佈的，不是水平方向並列時，該如何處理？(思考，有沒有段行？)
- 練習：承上，如果這兩個方塊是有重複的？該如何處理？(思考：如果 margin 是負數，那是否回重疊？)
- 練習：參考 page 13-50 的說明，建立兩個 box ，然後分別用不同的顏色顯示出來！第一個方框內容為『墾丁之旅』，
第二個方框內容ex-11-1.txt
- 練習：根據 page 13-54 ，建立如圖 13-27 (page 13-56) 的樣式！該練習請務必自行手動設計！
因為很多部落格或者是相關網站都使用該技巧來設定的！圖檔按此連結
實作題：請依照如下提示來製作本週習題：
- 實作題一：請設計一個名為 overall.css 的檔案，內容將你所會用到的，常用到的 CSS 樣式寫入，
其中，最重要的就是本週的 <a > 標籤！然後修改你整個網站的所有網頁，讓你的網站能夠有一致的連結風格！
- 實作題二：請參考課本 page 13-63 的說明，建立該網頁，假設檔名為 week11-13-2.html，
文字請按此下載，圖檔請按此下載
- 修改您的 index.html ，讓本週的習題可以被瀏覽。
|
