CSS3小圖標樣式已經成為了現代網頁設計的標配。它們可以讓你的頁面看起來更加美觀、專業化。在這篇文章中，我們將一起來學習如何使用CSS3來創建小圖標，讓你的網頁看起來更加精致。

首先，讓我們來了解一下pre標簽的作用。pre標簽會保留你在標簽里的空格和換行，這對于代碼的可讀性非常有幫助。下面將使用pre標簽來展示代碼。

.icon {
width: 20px;
height: 20px;
display: inline-block;
background-image: url('sprite.png');
background-repeat: no-repeat;
}
.home {
background-position: -10px -10px;
}
.search {
background-position: -40px -30px;
}
.cart {
background-position: -70px -50px;
}

我們首先定義了一個名為.icon的CSS類，它將用于所需的每個小圖標。我們將其寬度和高度設置為20像素，并使用display屬性來設置為內聯塊元素。接下來，我們將使用background-image屬性來指定我們的圖片資源，它們將以背景圖像的形式呈現。使用background-repeat屬性，我們可以避免圖標之間的重復出現和重復下載。

下面是示例圖標的CSS樣式代碼。請注意，每個圖標都使用不同的背景位置，在sprite圖中表示為負值。這些值將根據您的sprite圖像的大小和位置而變化。

好了，現在我們已經了解了如何創建CSS3小圖標樣式。我們準備好將這些小圖標添加到我們自己的網頁上了！