本篇CSS串接樣式表教學，將示範如何變更網頁各個區塊版面的高度、背景色彩、框線樣式、文字格式、文字對齊、超連結樣式...等CSS規則。
CSS 線上參考文件：https://helpx.adobe.com/tw/dreamweaver/using/cascading-style-sheets.html
下載 Adobe Dreamweaver CC 使用說明文件
單元一：網頁連結自訂規則的CSS串接樣式表
1. 新增一個檔案名稱為 style.css 的空白CSS串接樣式表。
2.網頁連結外部CSS串接樣式表 style.css 。
單元二：頁首版面設計
頁首版面改變高度，及加上版面區塊背景色彩。
1. 以下將示範將頁首版面高度變更為120px、版面背景色彩變更為藍色。
2. style.css CSS 樣式表新增一個 header HTML標籤選擇器，及其宣告的樣式屬性，如下所示。
header {
height: 120px;
background-color: #113c51;
}
顏色的選擇，可以參考 Paletton 網站。
3. 因為新增的是標籤元素選擇器，會自動套用至 header 標籤，所以不需要修改網頁原始碼。
4. header 標籤因為沒有設定版面寬度，所以此版面的背景色彩會從左至右填滿整個螢幕。
5. 網頁頁首版面將變更如下圖所示。
單元三：頁尾版面設計
頁尾版面改變高度，及加上版面區塊背景色彩。
1. 以下將示範將頁尾的版面高度變更為 80px、版面背景色彩變更為深藍色。
2. style.css CSS 樣式表新增一個 footer 標籤元素選擇器，及其宣告的樣式屬性，如下所示。
footer {
height: 80px;
background-color: #032536;
}
顏色的選擇，可以參考 Paletton 網站。
3. 因為新增的是標籤元素選擇器，會自動套用至 footer 標籤，所以不需要修改網頁原始碼。
4. footer HTML標籤因為沒有設定版面寬度，所以此版面的背景色彩會從左至右填滿整個螢幕，跟頁首版面相同。
單元四：導覽選單的版面設計
導覽選單版面加上版面區塊背景色彩。
1. 將示範版面背景色彩變更為藍色。
2. style.css CSS 樣式表新增一個 nav 標籤元素選擇器，及其宣告的樣式屬性，如下所示。
nav {
background-color: #477286;
}
顏色的選擇，可以參考 Paletton 網站。
3. 因為新增的是標籤元素選擇器，會自動套用至 nav 標籤，所以不需要修改網頁原始碼。
4. footer HTML標籤因為沒有設定版面寬度，所以此版面的背景色彩會從左至右填滿整個螢幕，跟頁首版面相同。
單元五：內容區版面設計
版面區塊加上圓角邊框線(border)
1. style.css CSS 樣式表新增一個 container-border 類別選擇器，及其宣告的樣式屬性，如下所示。
.container-border {
border-width: 1px;
border-color: #d5d5d5;
border-style: solid;
border-radius: 5px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
}2. 網頁原始碼的第二個 section 版面區段，將程式碼修改如下所示。
<!--第二單元-->
<section>
<div class="container container-border">
<div class="row">
<div class="col-lg-9">
<article>上方程式碼主要是將原先的 div class="container" 變更為 div class="container container-border"。
container-border 則是 style.css 串接樣式表中的一個設定版面區塊邊框的類別選擇器。
3. 網頁頁首版面將變更如下圖所示。
單元六：側邊攔版面設計
版面區塊加上灰色背景色彩
1. style.css CSS 樣式表新增一個 aside 類別選擇器，及其宣告的樣式屬性，如下所示。
.aside {
background-color: #d5d5d5;
margin-top: -10px;
}2. 網頁原始碼的 aside 版面區段，將程式碼修改如下所示。
<div class="col-lg-3 aside">
<aside>
<!--側邊內容在這裡-->
</aside>
</div>上方程式碼主要是將原先的 div class="col-lg-3" 變更為 div class="col-lg-3 aside"。
aside 則是 style.css 串接樣式表中的一個設定版面區塊灰色背景色彩的類別選擇器。
3. 網頁頁首版面將變更如下圖所示。
單元七：強化導覽選單版面
將導覽選單列的版面區塊上下置中於 nav 區塊版面，及延伸導覽選單列左右寬度，讓其與下方的其他版面區塊等寬。
1. style.css CSS 樣式表新增一個 navbar 類別選擇器，及其宣告的樣式屬性，如下所示。
.navbar {
margin-top: 5px;
margin-bottom: 5px;
margin-right: -15px;
margin-left: -15px;
}2. 網頁原始碼的 nav 版面區段中，本來就有使用 navbar 類別樣式，所以我們不需要修改網頁程式碼。
navbar 類別樣式已定義規則於 bootstrap.css 串接樣式表單，style.css 加入新的規則定義，可擴充及覆蓋 bootstrap.css 原先的定義。
navbar 類別樣式的使用位置，改如下所示。
<nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-default">
<div class="container-fluid">3. 網頁頁首版面將變更如下圖所示。
單元八：強化頁尾版面
將頁尾版面區塊中的文字置中，及將文字顏色設定為白色。
1. style.css CSS 樣式表 footer 標籤選擇器的宣告中，加入如下所示的屬性定義。
footer {
height: 80px;
background-color: #032536;
text-align: center;
color: #ffffff;
padding-top: 30px;
}
style.css 串接樣式表的完成內容
@charset "utf-8";
header {
height: 120px;
/* background-color: #113c51; */
}
footer {
height: 80px;
background-color: #032536;
text-align: center;
color: #ffffff;
padding-top: 30px;
}
nav {
background-color: #477286;
}
.navbar {
margin-top: 5px;
margin-bottom: 5px;
margin-right: -15px;
margin-left: -15px;
}
.container-border {
border-width: 1px;
border-color: #d5d5d5;
border-style: solid;
border-radius: 5px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
}
.aside {
background-color: #d5d5d5;
margin-top: -10px;
}
aside {
padding-top: 10px;
}
a (
color: #032536;
}