第七單元常用 CSS 設定 7.0 單元教學目標利用 CSS 美化 HTML 文件. 版面配置. 字體設定. 文字設定. 背景設定. 項目清單設定. 超連結設定. 表格設定 7.1 基本概論本章節主要介紹如何利用 CSS 美化 HTML 文件, 內容介紹是依一般從無到有建立網頁時我們所常碰到的需求, 從最基本的 版面配置 一直到 表格設定 為止, 為讓學習上更有效率縮短語法摸索時間, 本章以範例方式逐一說明常用 CSS 的設定並在 7.3 節中進行實作 ( 註. 範例下載 :http:// goo.gl/x8mp2s) 7.1.1 版面配置 : CSS 是使用盒子的概念 (box model) 來進行版面的配置, 盒子架構由外而內分別為邊界 (margin) 邊框 (border) 留白 (padding) 與內容 (content) 如圖 1 所示, 開始建立一份新的網頁建議一定要先將這些屬性值初始化, 相關屬性的用途與使用方式呈如下述 : - 1 -
margin border padding content 圖 1 CSS 盒子的概念 下列為 margin 常用的屬性 :( 7-1.html).margin-top ( 上邊界 ).margin-bottom ( 下邊界 ).margin-left ( 左邊界 ).margin-right ( 右邊界 ) 網頁左右邊界皆為 5px, 上邊界為 20px, 下邊界自動調整 - 2 -
下列為 border 常用的屬性 :( 7-2.html) 1.border-style ( 邊框樣式 ) 2.border-width ( 邊框寬度 ) 3.border-color ( 邊框色彩 ) 4.border ( 所有邊框統一描述樣式 ) 5.border-top-, border-left-, border-bottom-, border-right- ( 各別描述上下左右邊框樣式 ) 1. border-style: 2.border-width: 屬性值為數字或下述的名稱 :thin ( 細框 ) medium ( 中框 ) thick ( 粗框 ) - 3 -
3.border-color: 4.border: 5.border-top-, border-left-, border-bottom-, border-right-: 下列為 padding 常用的屬性 :( 7-3.html).padding-top ( 上留白 ) - 4 -
.padding-bottom ( 下留白 ).padding-left ( 左留白 ).padding-right ( 右留白 ) 設定 container 區塊上下留白分別為 20px 10px, 左右留白分別為 10px 15px 7.1.2 字體設定 ( 7-4.html) 下列為 CSS 常用字體屬性 : 1. font-family 2. font-size 3. font-weight 4. font-style 1. font-family: 設定顯示字型, 一般網頁的字型分成兩大類 : 襯線與無襯線字體, 目前網頁常用的是無襯線字體, 因為近似黑體字比較粗, 網頁文字呈現時比較清晰 常見撰寫方式 p{font-family: Arial, Helvetica, sans-serif;}, 其中 Arial, - 5 -
Helvetica, sans-serif; 所代表的涵義是選字型的次序, 先由 Arial 開始尋找依 序到 sans-serif 配合用戶端的機器上有安裝的字體進行顯示 2.font-size: 設定字型大小, 屬性值可以是數值也可以是下列文字名稱,"xx-small" "x-small" "small" "medium" "large" "x-large" 與 "xx-large" 1em 為瀏覽器預設字體尺寸 1em=100%=12pt=16px 3. font-weight 設定字體的厚度, 數值範圍 100-900, 數值越大越厚 ; 另外, 我們也可下列文字名稱 :bold ( 厚 ) bolder ( 更厚 ) 與 normal ( 正常 ) - 6 -
4. font-style 設定字體是否為斜體字 7.1.3 文字設定 ( 7-5.html) 下列為 CSS 常用文字屬性 : 1.letter-spacing 2.word-spacing 3.text-align 4.text-decoration 5.line-height 1. letter-spacing: 設定每一個字母間的間距, 取代 逐一設定的方式 2. word-spacing: 設定每一個字與每一個字的間距, 將間距加大提高閱讀的舒適度 - 7 -
3. text-align: 設定文字對齊方式 :left ( 靠左對齊 ) right ( 靠右對齊 ) center ( 置中對齊 ) Justify ( 左右對齊 ) 4. text-decoration: 設定文字額外的線條 :underline ( 底線 ) overline ( 頂線 ) 與 line-through ( 刪除線 ) 5. line-height: 設定段落行高, 下述範例為增加 1.5 倍行高 - 8 -
7.1.4 背景設定 ( 7-6.html) 下列為 CSS 常用背景屬性 : 1. background-color 2. background-image 3. background-repeat 4. background-attachment 1. background-color: 設定背景色為青色 2. background-image: 設定背景圖為 bg1.jpg - 9 -
3. background-repeat: 3.1 水平重覆 : 設定背景圖為 bg1.jpg, 但只有水平重覆 3.2 垂直重覆 : 設定背景圖為 bg1.jpg, 但只有垂直重覆 - 10 -
4. background-attachment: ( 範例 7-7.html) 設定背景圖固定在螢幕上 ( 屬性值 ="fixed") 或者是當網頁捲動時, 背景圖也跟著移動 ( 屬性值 ="scroll"), 在範例 (7-7.html) 我們將國旗背景圖固定在左上角, 文字在背景圖的上層, 當網頁上捲時圖不會跟著移動 7.1.5 項目清單設定 ( 範例 7-8.html) 下列為 CSS 常用項目清單屬性 : 1. list-style-type 2. list-style-image 1. list-style-type : 預設項目清單 - 11 -
.none ( 沒有標誌 ).disc ( 實心圓形符號 ).circle ( 空心圓形符號 ).square ( 實心方形符號 ).decimal ( 阿拉伯數字 ).decimal-leading-zero ( 阿拉伯數字雙位元顯示不足位元補 0).lower-roman ( 小寫羅馬數字 ).upper-roman ( 大寫羅馬數字 ).lower-alpha ( 小寫英文字母 ).upper-alpha ( 大寫英文字母 ) - 12 -
2. list-style-image : 指定圖示的項目清單 7.1.6 超連結設定 ( 範例 7-9.html) 下列為 CSS 常用超連結屬性 :.a:link: 超連結尚未被點擊看過時, 此時超連結的樣式.a:visited: 已點擊看過超連結的內容時, 此時超連結的樣式 - 13 -
.a:hover: 滑鼠移動到超連結文字的上面, 此時超連結的樣式.a:active: 點擊超連結當下且滑鼠尚未放開, 此時超連結的樣式 設定超連文字在尚未被點擊時是藍色無底線, 點擊後為暗紅色無底線, 滑鼠移動到超連結文字的上面時則字體加厚 900 顏色改成紅色加底線, 點擊超連結當下且滑鼠尚未放開超連文字為青色加底線 7.1.7 表格設定 ( 範例 7-10.html) 利用上述 7.1.1-7.1.6 小節所介紹的內容, 我們可針對 <table>, <th>, <tr> 與 <td> 標籤來進行美化, 例如 : 邊框 顏色 背景 文字 等 此範例主要述求表格細線框的製作, 首先在重新定義 <table> 標籤, 讓其邊框與 1px 色彩為黑色, 其中 border-collapse: collapse 是允許讓框線重疊, 接下來針對 <th>, <tr> 與 <td> 統一設定空白 7px 且邊框為 1px 黑色, 為突顯表格欄位內容, 再將 <th> 設定成背景為淡黃色, 最後以類別選取器的方式將 price 文字置中且為粗體字 - 14 -
7.2 本單元 Project 簡介本單元 Project 主題雖同第五章自傳的撰寫, 為求進一步版面的美化 文字格式與段落首行縮排與左右對齊以及特殊字型的應用, 我們大量使用 7.1 小節所介紹的 CSS 常用設定語法, 圖 2 為美化前的網頁內容 ( 資料來源 : yes123 求職網 ), 圖 3 為美化後的網頁內容, 兩者明顯有極大差異 圖 2 原始網頁 (project.html) - 15 -
圖 3 美化後的網頁 (project_finish.html) 圖 3 中仍保有第五章 Project 的所有優點 ( 網頁字體大小適中 字體間距與行高加大, 大提升閱讀的書舒適度, 另外自傳並非滿版呈現, 而是以螢幕 80% 大小進行置中呈現, 背景淡黃增加柔和度, 最後欲突顯的訊息也用不同色彩進行標示外, 更增加了下述的變化 : 1. 頁首 自傳 兩字是以隸書體呈現, 為讓隸書體能在瀏覽者電腦上順利呈現, 我們將其作成圖檔格式並以區塊背景的手法將圖片水平置中, 在 header 區塊中當作隱藏標示的 個人自傳 四字, 則採用 text-indent: -400em; 的手法將其移出網頁呈現區 2. 抬頭文字是用 border 的語法來製作出四邊皆不同的線條區塊, 而內定的字體則 以 微軟正黑體 排第一順位 - 16 -
3. 每個段落採排版方式進行首行縮排兩字, 左右文字對齊的效果, 並非是以全型 空白方式產生出內縮的效果 4. 在項目清單的方面, 我們讓每一個清單內容加淺灰色底線, 增加條列式的美 觀 其它相關優點與操作步驟詳見 7.3 小節 7.3 操作步驟步驟 1: 建立一個新的 HTML(project.html) 與 CSS(IT.css) 檔案, 在 HTML 檔中加入 個人自傳 於 <title></title> 中當成網頁標題, 並新增連結 IT.css 的語法於第 8 行, 呈如下圖 - 17 -
步驟 2: 設定文件字體格式, 由於要套用於整份文件, 所以我們使用標籤選取器 的方式重新定義網頁標籤 <body> 如下 : CSS 語法說明 : 1.font-family: 設定顯示字型為無襯線字體, 字型選取次序為 Arial, Helvetica, sans-serif; 2.font-size: 設定字型大小, 因瀏覽器相容性的考量其值設定為 1em( 同百分比 ), 瀏覽器預設字體尺寸 =1em=100%=12pt=16px 3.letter-spacing: 設定字距, 由於 HTML 預設字距較小, 在高解析度的螢幕上會顯得字與字間的距離太擁擠, 容易造成眼睛疲勞 此範例設 0.1em 代表字距為 0.1 16px=1.6px 4.line-height: 設定行高距離 5.background-color: 設定背景顏色為淡黃色 步驟 3: 進行網頁切版, 在 project.html 中首先我們會設定一個 div 名叫 wrapper, 其它 header content 區塊置於其中 footer 則在外, 主要是希望能藉由 - 18 -
wrapper 區塊將自傳全部文字內容能定位在螢幕水平中間並且以使用者 螢幕的 80% 寬呈現, 相關網頁切版內容呈如下述 : 步驟 4: 為了解加入 CSS 語法後 project.html 所產生的變化, 我們先將 原始文 字內容.txt 複製於所對應的標籤中 - 19 -
內文複製進入後, 目前網頁預覽結果如下, 文字字型 大小 間距 行 高與網頁背景色皆照先前 CSS 的設定呈現, 目前網頁全螢幕呈現, 文字 內容皆靠左 步驟 5: 接下來在 IT.css 中針對 wrapper header content footer 等四區塊進行 CSS 設定 : 1.wrapper: CSS 語法說明 : width: 80%; 代表以螢幕大小 80% 呈現 border: 1px outset #CCC; 加大小為 1px 的 outset 外框 margin-top: 30px; 上邊界 30px margin-right: auto; 右邊界自動 margin-bottom: 0px; 下邊界 0px margin-left: auto; 上邊界 30px - 20 -
background-color: #FFC; 背景色為淡黃 CSS 設定完後的結果 : 2.header: CSS 語法說明 : text-align: center; 代表文字水平置中對齊 background-image: url(img/autobiography.jpg); 背景圖為 autobio-graphy.jpg background-repeat: no-repeat; 不重覆顯示 background-position: center center; 水平垂直皆罝中 text-indent: -400em; 將個人自傳文字往左移 400 em CSS 設定完後的結果 : - 21 -
3.content: CSS 語法說明 : 目前暫無設定, 日後可視需求增加語法 4.footer: CSS 語法說明 : background-color: #FFA; 背景色淡黃 font-size: 0.8em; 縮小字 border-top-width: 1px; 上邊框大小 border-top-style: solid; 上邊框樣式 - 22 -
border-top-color: #CCC; 上邊框顏色 text-align: center; 字水平置中 margin-top: 5px; 上邊界 border-bottom-width: 1px; 下邊框大小 border-bottom-style: solid; 下邊框樣式 border-bottom-color: #CCC; 下邊框顏色 width: 85%; 寬度大小 margin-right: auto; 左邊界 margin-left: auto; 右邊界 color: #900; 字型大小 padding: 1px; 四邊留白 1px CSS 設定完後的結果 : 步驟 6: 為強調標題內容, 可利用類別選取器進行設定, 在此針對標題文字我們 自訂類別名稱為.font_title 呈如下述 : - 23 -
CSS 語法說明 : color: #000; 字體色彩黑色 font-weight: bold; 字體粗體 font-family: " 微軟正黑體 ", Arial, Helvetica, sans-serif; 字型 height: 22px; 區塊高度 width: 80px; 區塊寬度 background-color: #FFF; 背景色 border-left-width: 8px; 左邊框寬度 border-left-style: solid; 左邊框樣式 border-left-color: #F00; 左邊框色彩 border-bottom-width: 2px; 下邊框寬度 border-bottom-style: solid; 下邊框樣式 border-bottom-color: #009; 下邊框色彩 padding-top: 5px; 上留白 - 24 -
padding-right: 2px; 右留白 padding-bottom: 2px; 下留白 padding-left: 10px; 左留白 border-top-width: 1px; 上邊框寬度 border-top-style: solid; 上邊框樣式 border-top-color: #CCC; 上邊框色彩 border-right-width: 1px; 右邊框寬度 border-right-style: solid; 右邊框樣式 border-right-color: #CCC; 右邊框色彩 接著在 project.html 指定的位置, 將語法嵌入 CSS 設定完後的結果 : 步驟 7: 段落採排版方式進行首行縮排兩字, 左右文字對齊的效果 CSS 語法說明 : text-indent : 2em; 首行縮排 - 25 -
text-align: justify; 左右對齊 text-justify:inter-ideograph; 左右對齊 padding-right: 1em; 右留白 padding-left: 1em; 左留白 接著在 project.html 指定的位置, 將語法嵌入 CSS 設定完後的結果 : 步驟 8: 在項目清單的方面, 我們讓每一個清單內容加淺灰色底線, 增加條列式 的美觀 CSS 語法說明 : - 26 -
border-bottom-width: 1px; 下邊框寬度 border-bottom-style: dashed; 下邊框樣式 border-bottom-color: #999; 下邊框色彩 padding-bottom: 3px; 下邊框留白 width: 430px; 區塊寬度 CSS 設定完後的結果 : 經由上述八個步驟, 便能將自傳美化完成, 完成檔呈如附件可自行參酌 更多 的 CSS 語法可至 https://www.w3schools.com/css/ 學習網進行線上查詢與學 習 - 27 -
7.4 單元習題 [ ]1.CSS 版面配置是使用何種概念 (A) 盒子概念 (B) 繼承概念 (C) 重覆選取概念 (D) 容器概念 [ ]2. 下列何者不是 CSS 版面配置的語法 (A)margin (B)padding (C)border (D) div [ ]3. 若要統一加寬字母的間距, 需使用何種語法 (A) (B)letter-spacing (C)word-spacing (D)text-align [ ]4. 下列何者能增加文字與區塊的空間 (A)div (B)padding (C)border (D) margin [ ]5. 若要呈現出雙位元阿拉伯數字的項目清單則 list-style-type 要選用下列何者 (A)decimal (B)lower-roman (C)decimal-leading-zero (D)disc [ ]6. 若要設定點擊超連結當下且滑鼠尚未放開超連文字的效果, 則需在下列何者進行設定 (A)a:link (B)a:visited (C) a:hover (D)a:active [ ]7. 若要設定背景圖不隨著網頁捲動時也跟著移動則 background-attachment 的屬性值為何 (A)fixed (B) scroll (C)fixed-scroll (D)scroll-fixed [ ]8. 為讓段落文字能首行縮排與左右對齊, 下列何者為非必要的 CSS 語法 (A) text-indent (B) text-align (C)text-justify (D)padding [ ]9. 下列何者 HTML 標籤無法讓 CSS 語法美化表格內容 (A)<table> (B)<th> (C)<ul> (D)<tr> [ ]10. 下列何者能讓所有邊框統一描述樣式 (A)border (B)border-style (C)style (D) borders 解答 :A, D, B, B, C, D, A, D, C, A - 28 -
7.5 專題作業商品 DM 製作 : 請自行選擇欲販售的商品, 利用 7.1 節所介紹的語法來進行設計, 相關要求如下 : 1. 以標籤 table 進行排版並以細邊有色框呈現 2. 以三欄三列方式呈現商品照片 3. 照片要統一加上細外框 ( 註. 用 CSS 語法非修圖軟體 ) 4. 條列式說明商品的特色 5.CSS 語法要獨立成一個檔案 - 29 -