如果你正在學習CSS，那么課外練習是一個絕佳的方式來增強你的技能和知識。以下是幾種不同類型的CSS課外練習，可以幫助你更深入地理解并練習CSS。

一、選擇器和樣式

/* 在一個HTML文檔中為不同類型的元素設置樣式 */
p {
font-size: 20px;
color: blue;
}
h1 {
font-size: 40px;
color: red;
}
ul li {
font-size: 14px;
color: green;
}

二、盒子模型

/* 創建一個包含多個DIV元素的布局，使用盒子模型將它們對齊 */
.container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto;
}
.box {
width: 200px;
height: 200px;
background: #ccc;
margin: 10px;
box-sizing: border-box;
}

三、Flexbox布局

/* 使用Flexbox布局創建一個響應式導航欄 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #333;
height: 60px;
padding: 0 20px;
color: white;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu li {
list-style: none;
margin-right: 20px;
}
@media (max-width: 768px) {
.navbar {
flex-direction: column;
height: auto;
}
.menu {
flex-direction: column;
}
.menu li {
margin: 10px 0;
}
}

通過這些練習，你可以更好地了解CSS，并提高你的CSS技能。并且這些技能也將幫助你在實際項目中更快地解決問題、提高工作效率。