網頁設計中有一個非常重要的元素就是CSS樣式，它可以提供豐富的展示效果，讓網頁看起來更加美觀，同時也提高了用戶的舒適感。下面我們來看一下CSS樣式在網頁代碼中的應用。
<html>
<head>
<title>我的網站</title>
<style>
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
font-size: 24px;
}
.content {
padding: 20px;
font-size: 18px;
line-height: 1.5;
}
.btn {
background-color: #f0ad4e;
color: white;
padding: 10px 20px;
text-align: center;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<header class="header">
<h1>歡迎來到我的網站</h1>
</header>
<div class="content">
<p>這里是我的網站，歡迎大家來訪問和留言。</p>
<p>我會在這里分享我的生活和工作經驗，希望能夠給大家帶來幫助。</p>
<button class="btn">了解更多</button>
</div>
</body>
</html>在上面的代碼中，我們通過<style>標簽定義了三個CSS樣式類：header、content和btn。這三個樣式類分別用于設置網頁的頁眉、內容和按鈕的樣式。
對于頁眉，我們設置了背景顏色、文本顏色、內邊距、字體大小和文本對齊方式等樣式屬性。
對于內容區域，我們設置了內邊距、字體大小和行高等樣式屬性，以使得網頁內容更加舒適和易讀。
對于按鈕，我們設置了背景顏色、文本顏色、內邊距、文本對齊方式、圓角和光標樣式，使得按鈕看起來更加醒目和易于交互。
通過使用這些CSS樣式，我們可以輕松地為網頁添加各種豐富的視覺效果，提升用戶的使用體驗。如果您想要打造一個美觀實用的網站，那么請記住使用CSS樣式的重要性。
下一篇css簡單的登錄樣式