商品詳情頁的設計往往是電商網站或者移動應用中十分重要的一部分，因為一個好的商品詳情頁設計能夠吸引用戶的注意力并且提高用戶購買商品的意愿。在設計商品詳情頁的時候，CSS樣式的運用是十分關鍵的。

在商品詳情頁中，CSS樣式的運用往往分為三部分：整體布局樣式、商品詳情樣式以及交互樣式。

// 整體布局樣式
.container {
margin: 0 auto;
width: 90%;
}
// 商品詳情樣式
.goods-detail {
display: flex;
flex-direction: column;
justify-content: center;
}
.goods-img {
width: 100%;
}
.goods-price {
font-size: 24px;
text-align: center;
}
.goods-desc {
font-size: 16px;
line-height: 1.5;
padding: 20px;
}
// 交互樣式
.btn-buy {
display: block;
margin: 20px auto;
text-align: center;
color: #fff;
background-color: #ff5500;
padding: 10px 20px;
border-radius: 8px;
}
.btn-buy:hover {
background-color: #ff3300;
}

整體布局樣式用于控制商品詳情頁的寬度和居中顯示。商品詳情樣式主要用于控制商品圖片、價格和描述的樣式。其中，商品描述一般需要設置字體大小、行高和內外邊距等樣式屬性，這樣能夠讓商品描述信息更加清晰易讀。交互樣式主要用于控制商品購買按鈕的樣式，讓用戶更加方便地購買商品。

總之，商品詳情頁的CSS樣式設計能夠直接影響到用戶的購買體驗和購買意愿。因此，我們應該注意樣式的布局和設計，讓商品詳情頁更加美觀、易讀和易用。