星級評分是網站和應用程序中常見的一種評價方式，它使用星形圖標來表示產品或服務的質量。在這篇文章中，我們將介紹如何使用HTML和CSS來創建一個簡單的星級評分系統。

<div class="rating">
<input type="radio" name="rating" id="star1" value="1">
<label for="star1"></label>
<input type="radio" name="rating" id="star2" value="2">
<label for="star2"></label>
<input type="radio" name="rating" id="star3" value="3">
<label for="star3"></label>
<input type="radio" name="rating" id="star4" value="4">
<label for="star4"></label>
<input type="radio" name="rating" id="star5" value="5">
<label for="star5"></label>
</div>

這里我們使用了一個包含5個單選按鈕的div元素，并將它們的name屬性設置為"rating"。每個單選按鈕都有一個唯一的ID和一個空的label元素。

接下來，我們可以使用CSS來定義我們的星級評分：

.rating {
display: inline-block;
}
.rating input[type="radio"] {
display: none;
}
.rating label {
color: #ddd;
font-size: 2.5em;
cursor: pointer;
}
.rating label:hover,
.rating label:hover ~ label {
color: #FFD700;
}
.rating input[type="radio"]:checked ~ label {
color: #FFD700;
}

我們首先將rating類的display屬性設置為inline-block，以便使星級評分在頁面中垂直居中。我們還將單選按鈕的display屬性設置為none，以避免它們在頁面上可見。我們使用CSS的 ~ 選擇器來定義鼠標懸停時星級評分的顏色，以及選中單選按鈕時的顏色。

現在，我們已經完成了我們的星級評分系統，用戶可以通過單擊星形圖標來選擇評分，然后顯示選定的星形圖標的顏色。這個評分系統可以用于許多不同的網站和應用程序中，可以根據需求進行自定義。