HTML和CSS是網頁的兩大重要組成部分，它們決定著網頁的呈現方式和樣式。當我們訪問一個網頁時，頁面上的各種元素會根據相應的HTML標記顯示，而CSS則會為這些元素添加樣式，包括顏色、字體、大小、邊框等等。

CSS最基本的組成部分是選擇器和屬性值。在這里，我們將通過一個簡單的的例子來演示如何使用CSS來為超市小票添加樣式。

.ticket{
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
width: 250px;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
}
.ticket h2{
margin-top: 0;
font-size: 16px;
}
.ticket ul{
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.ticket li{
padding: 5px 0;
}
.ticket .total{
font-weight: bold;
}

在例子中，我們首先定義了一個CSS類名.ticket，然后為它指定了一系列屬性值，包括背景顏色、邊框、內邊距、寬度、字體和行高等等。接著，我們使用CSS選擇器語法來為.ticket 類下的h2、ul和li標簽添加樣式。特別地，我們為.total類名下的標簽指定了粗體字體屬性。

最后，我們將這些CSS代碼應用到HTML中的超市小票上，就可以得到一個美觀的小票樣式了（如下圖所示）。

<div class="ticket">
<h2>Best Supermarket</h2>
<ul>
<li>Bread & Butter <span class="price">$3.99</span></li>
<li>Milk <span class="price">$1.99</span></li>
<li>Cheese <span class="price">$4.99</span></li>
<li>Total <span class="price total">$10.97</span></li>
</ul>
</div>

在這個例子中，我們在HTML中添加了一個class為ticket的div標簽，然后在其中添加了一個h2標簽、一個ul標簽和四個li標簽。在li標簽中，我們使用了span標簽來為每個商品指定價格，使用CSS類名.total來為總價添加粗體字體樣式。

通過以上的方法，我們可以很方便地使用CSS來為網頁添加各種樣式，并為用戶提供更好的瀏覽體驗。