CSS是前端開發中非常重要的組成部分，其能夠給HTML文檔帶來更加豐富的樣式效果。以下是一些常見的CSS范例代碼：

/* 將所有段落文字都設置為紅色 */
p {
color: red;
}
/* 設置特定類的文字為藍色 */
.blue-text {
color: blue;
}
/* 創建一個具有陰影效果的按鈕 */
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
box-shadow: 0 6px #999;
}
/* 創建一個懸浮效果的導航菜單 */
.navmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navmenu li {
float: left;
}
.navmenu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navmenu li a:hover {
background-color: #111;
}
/* 設置一個響應式網格布局 */
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* 設置一個漸變背景 */
.gradient-bg {
background: linear-gradient(to right, #00c2ff, #0084ff);
}