在學(xué)習(xí)CSS的過程中，練習(xí)不可少。今天給大家介紹的是100個(gè)CSS實(shí)例，可以讓我們更深入地理解CSS的運(yùn)用。

/* 實(shí)例1：給鏈接添加懸浮效果 */
a:hover {
color: red;
}
/* 實(shí)例2：設(shè)置背景顏色 */
body {
background-color: #f5f5f5;
}
/* 實(shí)例3：調(diào)整圖片大小 */
img {
width: 200px;
height: 200px;
}

這些實(shí)例可以分為幾類。第一類是基礎(chǔ)樣式，包括文字樣式、邊框樣式、背景樣式等。例如，我們可以設(shè)置字體大小、顏色、粗細(xì)等等：

/* 實(shí)例4：設(shè)置字體大小 */
p {
font-size: 16px;
}
/* 實(shí)例5：設(shè)置文字顏色 */
p {
color: #333;
}
/* 實(shí)例6：設(shè)置字體加粗 */
p {
font-weight: bold;
}

第二類是布局樣式，包括對(duì)元素位置、大小的調(diào)整。例如，我們可以設(shè)置元素的位置、寬度、高度：

/* 實(shí)例7：設(shè)置元素位置 */
div {
position: absolute;
top: 50px;
left: 50px;
}
/* 實(shí)例8：設(shè)置元素寬度 */
div {
width: 200px;
}
/* 實(shí)例9：設(shè)置元素高度 */
div {
height: 100px;
}

第三類是動(dòng)畫效果，包括過渡、動(dòng)畫、旋轉(zhuǎn)等。例如，我們可以設(shè)置元素的過渡時(shí)間、動(dòng)畫效果、旋轉(zhuǎn)動(dòng)畫：

/* 實(shí)例10：設(shè)置元素過渡效果 */
div {
transition: all 0.5s ease;
}
/* 實(shí)例11：設(shè)置元素動(dòng)畫效果 */
div {
animation: slidein 3s;
}
/* 實(shí)例12：設(shè)置元素旋轉(zhuǎn)動(dòng)畫 */
div {
transform: rotate(30deg);
}

以上是幾個(gè)簡(jiǎn)單的實(shí)例，這些實(shí)例并不是最終的結(jié)果，而是可以根據(jù)自己的需求進(jìn)行修改。通過這些實(shí)例的練習(xí)，我們可以深入了解CSS的基礎(chǔ)知識(shí)和運(yùn)用方式。