CSS樣式表是一種用于控制網頁布局和樣式的編程語言，可以讓網頁更加美觀、易于閱讀和使用。下面是一個簡單的CSS樣式表書寫案例，用于控制一個HTML頁面的布局和樣式。
頁面布局：
首先，我們需要創建一個HTML頁面，并使用CSS樣式表來設計頁面的布局。
```html
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
header {
background-color: #007bff;
color: #fff;
padding: 20px;
text-align: center;
nav {
background-color: #fff;
padding: 20px;
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
nav li {
display: inline-block;
margin-right: 10px;
nav a {
color: #007bff;
text-decoration: none;
main {
background-color: #f2f2f2;
padding: 20px;
main div {
margin-top: 20px;
margin-bottom: 20px;
footer {
background-color: #007bff;
color: #fff;
padding: 20px;
text-align: center;
</style>
</head>
<body>
<header>
<h1>My Webpage</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<div>
<h2>Welcome to my webpage!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac quam hendrerit, nec auctor dui consectetur non. Donec sit amet arcu turpis. In hac habitasse platea dictumst.</p>
</div>
</main>
<footer>
<p>Copyright (c) 2023 My Webpage</p>
</footer>
</body>
</html>
在這個案例中，我們使用了`body`元素來控制頁面的整體布局，并使用`header`、`nav`、`main`和`footer`元素來定義頁面的不同部分。
在`header`元素中，我們使用了`background-color`屬性來設置背景顏色，并使用`padding`屬性來設置該元素的內邊距。我們還使用了`text-align`屬性來將`header`元素居中。
在`nav`元素中，我們使用了`background-color`屬性來設置背景顏色，并使用`padding`屬性來設置該元素的內邊距。我們還使用了`list-style-type`屬性來定義`nav`元素的列表樣式，并將`margin`屬性設置為0。
在`main`元素中，我們使用了`div`元素來創建水平分頁，并使用`margin-top`和`margin-bottom`屬性來設置分頁的頁碼和頁面頂部和底部的空白。
最后，在`footer`元素中，我們使用了`p`元素來設置頁面的版權信息，并使用了`text-align`屬性來將`footer`元素居中。
通過使用CSS樣式表，我們可以輕松地控制網頁的布局和樣式，使網頁更加美觀、易于閱讀和使用。