在網頁設計中，CSS是一個十分重要的元素，它可以定義網頁的風格和布局。現在我們就來探究一下如何利用CSS讓三個頁面擁有相似的風格。

/* 頁面風格共同樣式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
background-color: #f2f2f2;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
color: #333;
font-size: 18px;
}
section {
margin: 20px;
}
section h1 {
font-size: 24px;
font-weight: bold;
}
section p {
line-height: 1.5;
}
button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

可以看出，上面的CSS代碼是一個共同樣式，我們可以將其放在一個獨立的CSS文件中，在三個頁面共用。然后針對三個頁面的不同之處，再根據需要定義特殊風格的元素。

比如第一個頁面是一個博客頁面，主要展示文章內容。我們可以在共同樣式的基礎上，再定義博客標題和日期的樣式：

/* 博客頁面特殊樣式 */
.blog-title {
display: block;
font-size: 28px;
text-align: center;
margin-bottom: 10px;
}
.blog-date {
display: block;
text-align: center;
margin-bottom: 20px;
font-style: italic;
color: #999;
}

第二個頁面是一個商品展示頁面，我們需要針對商品展示部分定義特定的樣式：

/* 商品展示頁面特殊樣式 */
.product-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.product-list-item {
width: 300px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.product-list-item h2 {
font-size: 20px;
margin-bottom: 10px;
}
.product-list-item img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.product-list-item p {
line-height: 1.5;
}
.product-list-item button {
display: block;
margin: 10px auto 0;
}

第三個頁面是一個簡歷頁面，我們需要以簡約的方式呈現信息，可以針對簡歷部分定義特殊的樣式：

/* 簡歷頁面特殊樣式 */
.resume-section {
margin-bottom: 40px;
}
.resume-section h2 {
font-size: 20px;
font-weight: bold;
}
.resume-section ul {
list-style: none;
margin: 0;
padding: 0;
}
.resume-section li {
margin-bottom: 10px;
}
.resume-section li span {
font-weight: bold;
}
.resume-section p {
line-height: 1.5;
}
.resume-contact a {
color: #333;
text-decoration: none;
display: block;
margin-bottom: 5px;
}

以上就是如何利用CSS讓三個頁面擁有相似風格的方法，通過共同樣式的定義，再針對不同頁面的特殊需求進行適當的樣式定義，可方便快捷地實現網頁風格統一。